From 1913608df5cdfe63cb47a0fe95fd8c9f816ea554 Mon Sep 17 00:00:00 2001
From: Rohit Mittal <51212933+rohitmit98@users.noreply.github.com>
Date: Fri, 13 Oct 2023 23:07:08 -0400
Subject: [PATCH] Improved accessibility in Slider/Navigation.tsx and
 UserLogos/index.tsx (#944)

* Changes made for improving accessibility

* added aria-label to Showcase nav buttons
---
 components/Slider/Navigation.tsx |  4 ++--
 components/UsersLogos/index.tsx  | 31 ++++++++++++++++++++++++++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/components/Slider/Navigation.tsx b/components/Slider/Navigation.tsx
index fb17d2cf..73e9a951 100644
--- a/components/Slider/Navigation.tsx
+++ b/components/Slider/Navigation.tsx
@@ -16,7 +16,7 @@ export default function Navigation({ prev, next }: NavigationProps) {
   return (
     <SlideNav>
       <ShowcaseLink item={prev}>
-        <NavButton>
+        <NavButton role="button" tabIndex={0} aria-label="previous showcase, use left arrow to navigate">
           <Image
             width={1920}
             height={1080}
@@ -37,7 +37,7 @@ export default function Navigation({ prev, next }: NavigationProps) {
       </ShowcaseLink>
 
       <ShowcaseLink item={next}>
-        <NavButton>
+        <NavButton role="button" tabIndex={0} aria-label="next showcase, use right arrow to navigate">
           <Image
             width={1920}
             height={1080}
diff --git a/components/UsersLogos/index.tsx b/components/UsersLogos/index.tsx
index 62c1e4f9..cda6c623 100644
--- a/components/UsersLogos/index.tsx
+++ b/components/UsersLogos/index.tsx
@@ -1,5 +1,6 @@
 import { Company } from 'companies-manifest';
 import styled, { keyframes } from 'styled-components';
+import { useState } from 'react';
 
 const getSlide = (childIndex: number, reverse?: boolean) => keyframes`
   from {
@@ -32,6 +33,7 @@ const UsersSlider = styled.span<{ $offset?: number; $reverse?: boolean }>`
   white-space: nowrap;
   overflow: hidden;
   position: absolute;
+  cursor: pointer; // Add cursor pointer to indicate it's clickable
 
   ${UsersWrapper} {
     flex-direction: ${({ $reverse }) => ($reverse ? 'row' : 'row-reverse')};
@@ -80,15 +82,38 @@ const SortedLogos = ({ users }: ISortedLogos) => (
 );
 
 const UsersLogos = ({ users, reverse }: { reverse?: boolean; users: ISortedLogos['users'] }) => {
+  // State to track animation pause
+  const [animationPaused, setAnimationPaused] = useState(false);
+
+  // Function to toggle animation pause state
+  const toggleAnimation = () => {
+    setAnimationPaused(prevState => !prevState);
+  };
+
   return (
     <UsersSliderContainer>
-      <UsersSlider $offset={-1} $reverse={reverse}>
+      <UsersSlider
+        $offset={-1}
+        $reverse={reverse}
+        onClick={toggleAnimation} // Attach click event handler
+        style={{ animationPlayState: animationPaused ? 'paused' : 'running' }} // Apply animationPlayState style
+      >
         <SortedLogos users={users} />
       </UsersSlider>
-      <UsersSlider $offset={0} $reverse={reverse}>
+      <UsersSlider
+        $offset={0}
+        $reverse={reverse}
+        onClick={toggleAnimation} // Attach click event handler
+        style={{ animationPlayState: animationPaused ? 'paused' : 'running' }} // Apply animationPlayState style
+      >
         <SortedLogos users={users} />
       </UsersSlider>
-      <UsersSlider $offset={1} $reverse={reverse}>
+      <UsersSlider
+        $offset={1}
+        $reverse={reverse}
+        onClick={toggleAnimation} // Attach click event handler
+        style={{ animationPlayState: animationPaused ? 'paused' : 'running' }} // Apply animationPlayState style
+      >
         <SortedLogos users={users} />
       </UsersSlider>
     </UsersSliderContainer>