NavigationBar/Popover a11y enhancements #4540
Merged
Conversation
This file contains 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
|
Storybook staging is available at https://kiwicom-orbit-sarka-a11y-navigationbar.surge.sh |
sarkaaa
force-pushed
the
sarka/a11y-navigationbar
branch
from
a184491 to
cab4e20
Compare
Deploying orbit with
|
| Latest commit: |
5f89526
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://56a3f4fb.orbit.pages.dev |
| Branch Preview URL: | https://sarka-a11y-navigationbar.orbit.pages.dev |
|
Size Change: -25 B (-0.01%) Total Size: 460 kB
ℹ️ View Unchanged
|
sarkaaa
force-pushed
the
sarka/a11y-navigationbar
branch
4 times, most recently
from
8d6dbb4 to
d7f4f50
Compare
sarkaaa
changed the title
DSil
reviewed
Dec 12, 2024
packages/orbit-components/src/NavigationBar/NavigationBar.stories.tsx
Outdated
Show resolved
Hide resolved
sarkaaa
force-pushed
the
sarka/a11y-navigationbar
branch
3 times, most recently
from
32dee67 to
0d4835e
Compare
sarkaaa
force-pushed
the
sarka/a11y-navigationbar
branch
2 times, most recently
from
5f87610 to
da0c92b
Compare
DSil
approved these changes
Dec 18, 2024
This commit adds ariaLabel and ariaLabelledby props to enhance the component's accessibility. It also updates the tabIndex value to make the Popover element focusable and readable by screen readers.
sarkaaa
force-pushed
the
sarka/a11y-navigationbar
branch
from
da0c92b to
5f89526
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Based on the a11y, some of the violations are caused by incorrect implementation of Nitro component(s) (Navbar). These components import Orbit components.
EDIT: I've also changed the
tabIndexvalue for Popover component to make it accessible.Closes https://kiwicom.atlassian.net/browse/FEPLT-2170
✨
Description by Callstackai
This PR enhances accessibility for the NavigationBar and Popover components by adding
ariaLabelandariaLabelledbyprops, improving screen reader support.Diagrams of code changes
sequenceDiagram participant User participant Screen Reader participant NavigationBar participant Popover User->>NavigationBar: Interacts with navigation NavigationBar->>Screen Reader: Announces "navigation" (new ariaLabel) NavigationBar->>Screen Reader: Announces button labels (new aria-labels for ButtonLinks) User->>Popover: Opens popover Popover->>Screen Reader: Announces custom label (new ariaLabel) Popover->>Screen Reader: Associates with heading (new ariaLabelledby) Note over NavigationBar,Popover: Accessibility Improvements:<br/>- Added aria-label support<br/>- Added aria-labelledby support<br/>- Enhanced screen reader contextFiles Changed
ariaLabelprop to the NavigationBar example.ariaLabelandariaLabelledbyprops to the Popover example.aria-labelfor accessibility.ariaLabelprop in the NavigationBar README.ariaLabelprop in the NavigationBar component.ariaLabelprop to the NavigationBar props interface.ariaLabelandariaLabelledbyprops to Popover stories.ariaLabelandariaLabelledbyprops in the Popover README.ariaLabelandariaLabelledbyprops to the Popover content wrapper.ariaLabelandariaLabelledbyprops in the Popover component.ariaLabelandariaLabelledbyprops to the Popover props interface.This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions
.md. See list of supported languages.