ActionBar: Add aria-label to role="toolbar"
#6980
Conversation
🦋 Changeset detectedLatest commit: 7b2235f The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
staff
|
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
github-actions
bot
requested a deployment
to
storybook-preview-6980
There was a problem hiding this comment.
Pull Request Overview
This PR adds accessibility support to the ActionBar component by applying an aria-label attribute to the toolbar element. The change enhances screen reader compatibility by providing a descriptive label for the toolbar role.
Key Changes
- Added
aria-labelattribute to the toolbar div element within ActionBar - Reformatted the toolbar div element for better readability
- Added changeset for patch release documentation
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/react/src/ActionBar/ActionBar.tsx | Added aria-label attribute to toolbar element and reformatted for readability |
| .changeset/thin-cobras-cry.md | Added changeset documenting the accessibility improvement |
| role="toolbar" | ||
| className={styles.List} | ||
| style={{gap: `${ACTIONBAR_ITEM_GAP}px`}} | ||
| aria-label={ariaLabel} |
There was a problem hiding this comment.
The ariaLabel variable is being used but it's not defined in the component props or local scope. This will cause a runtime error.
Copilot uses AI. Check for mistakes.
1 participant
Applies
aria-labelto the toolbar inside ofActionBar.Changelog
Changed
aria-labeltorole="toolbar"Rollout strategy
Testing & Reviewing
Merge checklist