fix(combobox): add ARIA attributes and update translations for toggle button#3366
fix(combobox): add ARIA attributes and update translations for toggle button#3366anna-lach wants to merge 3 commits into
Conversation
🦋 Changeset detectedLatest commit: e0b0115 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 |
There was a problem hiding this comment.
Pull request overview
Updates the sl-combobox toggle button’s accessibility labeling strategy and aligns localized strings across supported locales. This improves screen reader behavior by relying on aria-expanded for state while keeping a consistent button label, and removes now-unneeded translation keys.
Changes:
- Updated the combobox toggle button to use a static localized
aria-label(“Options”) and addedaria-expandedto expose open/closed state. - Updated combobox unit tests to assert the new
aria-labelandaria-expandedbehavior. - Consolidated localization by removing
showOptions/hideOptionskeys and introducing a singlesl.combobox.optionskey in all shipped locales.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/combobox/src/combobox.ts | Switches toggle button labeling to static “Options” and adds aria-expanded state exposure. |
| packages/components/combobox/src/combobox.spec.ts | Updates assertions to validate static aria-label and aria-expanded toggling. |
| packages/locales/src/es-ES.ts | Replaces show/hide strings with new sl.combobox.options template entry. |
| packages/locales/src/es-ES.xlf | Replaces show/hide translation units with sl.combobox.options. |
| packages/locales/src/it.ts | Replaces show/hide strings with new sl.combobox.options template entry. |
| packages/locales/src/it.xlf | Replaces show/hide translation units with sl.combobox.options. |
| packages/locales/src/nl.ts | Replaces show/hide strings with new sl.combobox.options template entry. |
| packages/locales/src/nl.xlf | Replaces show/hide translation units with sl.combobox.options. |
| packages/locales/src/pl.ts | Replaces show/hide strings with new sl.combobox.options template entry. |
| packages/locales/src/pl.xlf | Replaces show/hide translation units with sl.combobox.options. |
🕸 Storybook previewYou can view a preview here (commit |
…gle-button-should-behave-as-toggle-button
🕸 Website previewYou can view a preview here (commit |
This pull request updates the accessibility implementation of the combobox toggle button and streamlines localization strings for the component. The main focus is on simplifying the button's aria-label usage, improving the use of aria-expanded for screen readers, and consolidating translation keys across multiple languages.
Accessibility and UI Improvements:
aria-labelof "Options" instead of toggling between "Show the options" and "Hide the options". The open/closed state is now communicated using thearia-expandedattribute, which updates appropriately as the popover opens and closes. [1]], [2]], [3]])aria-labelandaria-expandedon the button. [1]], [2]])Localization and Translation Updates: