feat(ui): accessibility primitives, skip link, scroll affordances and separator system (DS-077…DS-080) - #505
Merged
Merged
Conversation
…ow detection - Introduced ScrollArea component with customizable orientation and edge shadows. - Added useOverflowEdges hook to manage scroll position affordances without re-renders. - Enhanced styling for scrollbars in the ScrollArea. - Created Separator and Divider components with accessibility features and customizable tones. - Added SkipLink component for improved navigation and accessibility. - Implemented VisuallyHidden component for screen-reader-only content. - Added tests for all new components to ensure functionality and accessibility compliance.
|
@0xsteins is attempting to deploy a commit to the Ijai's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@0xsteins Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
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
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.
closes #488 - Adds shared VisuallyHidden and LiveRegion primitives: hidden content stays in the a11y tree, can wrap semantic elements, and reveals itself when focus enters without shifting layout.
LiveRegion renders the right live/atomic/role attributes per mode and exposes announcementKey / useAnnouncer() as the documented way to re-announce an identical message.
closes #489 - Adds SkipLink as the shell's first focusable element and a stable
target in AppShell; activating it focuses the main region without putting a hash in the URL.RouteAnnouncer moves focus to the new page heading and announces its title once per pathname change — query-only and tab-only changes are ignored, and focus is handed over with preventScroll so pointer users get no jump or ring. Playwright covers activation and post-navigation focus.
closes #490 - Rewrites ScrollArea on native scrolling with vertical/horizontal/both modes and optional start/end edge shadows that appear only when content exists in that direction.
Edge state is written as data-overflow-* attributes rather than React state, so scrolling triggers zero re-renders; scrollbars use surface/border tokens and stay visible in forced-colors mode, and the user's visible-scrollbar preference is never overridden.
closes #491 - Refines Separator with subtle/default/strong tones, both orientations, and a decorative mode that is hidden from assistive tech; vertical rules work in flex layouts with no fixed parent height.
Adds a labeled Divider (start/center/end) whose rules are decorative and whose label is plain, contrast-checked text, plus DESIGN.md guidance on when spacing or surface contrast should replace a separator instead.
Notes for the reviewer: new gallery sections mean the design-system visual baselines need regenerating (
bun run test:e2e -- design-system-visual --update-snapshots). ScrollArea no longer wraps Base UI's scroll-area — its custom scrollbars hide the native ones and disappear in forced-colors mode, which contradicts two of #490's acceptance criteria.