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

[rohitmitt]

Addressing Issue #904 - Enhance Accessibility

• On the Showcase page, users were unable to access the left and right slider navigators for displaying the previous and next company showcases. These navigators rely on left and right arrow keys for interaction.

• I've added HTML attributes that allow users to tab to these sections of the page, and I've provided clear instructions for navigation. Although these elements are buttons, the instruction "use left/right arrow to navigate" should suffice for users with impairments.

Here is the change visualized. Changes were made in Slider/Navigation.tsx.

navigation.tsx.mp4

Addressing Issue #769 - Pause Logo Scrolling Animation

• This issue suggested allowing users to 'pause' scrolling animated content in compliance with WCAG 2.1 Criterion 2.2.2: Pause, Stop, Hide. Here's how I resolved it:

• I implemented a simple solution using React's useState hook, which identifies the current state of the moving content 'UserLogos'. Users can now click the container to toggle the CSS animationPlayState property between 'paused' and 'running'. Additionally, I've added a pointer cursor to the logo section to indicate that it's a clickable field.

Here is the change visualized. Changes were made in UserLogos/index.tsx.

index.tsx.mp4

[quantizor]

Great additions, thank you!