Improved accessibility in Slider/Navigation.tsx and UserLogos/index.t…

…sx (#944) * Changes made for improving accessibility * added aria-label to Showcase nav buttons
styled-components · Oct 14, 2023 · 1913608 · 1913608
1 parent 273a3db
commit 1913608
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git 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
@@ -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>