a11y: resolve testimonial keyboard trap and implement skip logic #18
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Someone is attempting to deploy a commit to the Amantus Machina Team on Vercel. A member of the Team first needs to authorize it. |
Member
|
Thank you! |
- Added `.sr-only` utility for screen-reader-only context - Implemented `inert` on `.testimonials-track` to prevent redundant keyboard tabbing - Enhanced "View all" link with descriptive hidden text for better navigation context - Added `focus-visible` styles to provide clear visual indicators for keyboard users - Added `prefers-reduced-motion` media query to respect system-level motion preferences
thewilloftheshadow
force-pushed
the
a11y/fix-testimonial-keyboard-trap-a11y-utility-classes
branch
from
0f91095 to
11d2d8f
Compare
Member
|
Landed via temp rebase onto main. Thanks @wilfriedladenhauf! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🛠️ Accessibility Improvements: Resolving the "Keyboard Toll"
📋 Overview
This PR addresses a significant accessibility (a11y) issue in the Testimonials section. Previously, keyboard and screen-reader users were forced to tab through 50+ individual testimonial links before reaching the "Quick Start" section.
🚀 Key Changes
Added the inert attribute to the .testimonials-track.
Benefit: This completely removes the scrolling marquee from the focus order. Keyboard users now skip the "toll" and move directly to installation instructions.
Enhanced "View all" Context
Updated the /shoutouts link to include a visually hidden descriptive label.
Added A11y Utility Classes
Introduced a standard .sr-only class to the stylesheet.
System-Level Motion Support
Added a prefers-reduced-motion media query.
Benefit: Respects users with vestibular/motion sensitivities by instantly disabling starfield, nebula, and marquee animations based on their OS settings.
Implemented custom :focus-visible logic using the project's --cyan-bright variable.
more contrast / higher visibiliy on focus style:
.sr-onlyutility for screen-reader-only contextinerton.testimonials-trackto prevent redundant keyboard tabbingfocus-visiblestyles to provide clear visual indicators for keyboard usersprefers-reduced-motionmedia query to respect system-level motion preferences