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.
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.
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.
https://github.com/styled-components/styled-components-website/assets/51212933/6d662adf-97f2-4585-9f5b-453c46a47b56
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 CSSanimationPlayState
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.
https://github.com/styled-components/styled-components-website/assets/51212933/ac0b273e-e212-4a21-a3cd-d7fe34277642