Skip to content

fix(combobox): add ARIA attributes and update translations for toggle button#3366

Open
anna-lach wants to merge 3 commits into
mainfrom
fix/3253-combobox-toggle-button-should-behave-as-toggle-button
Open

fix(combobox): add ARIA attributes and update translations for toggle button#3366
anna-lach wants to merge 3 commits into
mainfrom
fix/3253-combobox-toggle-button-should-behave-as-toggle-button

Conversation

@anna-lach
Copy link
Copy Markdown
Collaborator

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:

  • The combobox button now always uses a static aria-label of "Options" instead of toggling between "Show the options" and "Hide the options". The open/closed state is now communicated using the aria-expanded attribute, which updates appropriately as the popover opens and closes. [1]], [2]], [3]])
  • Associated tests have been updated to reflect these changes, verifying the correct use of aria-label and aria-expanded on the button. [1]], [2]])

Localization and Translation Updates:

  • The localization keys for "Show the options" and "Hide the options" have been removed in favor of a single "Options" key, which is now used in all supported languages (Spanish, Italian, Dutch, Polish). Corresponding translation files and XLF resources were updated to match. [1]], [2]], [3]], [4]], [5]], [6]], [7]], [8]])

Copilot AI review requested due to automatic review settings May 21, 2026 06:19
@anna-lach anna-lach linked an issue May 21, 2026 that may be closed by this pull request
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 21, 2026

🦋 Changeset detected

Latest commit: e0b0115

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@sl-design-system/combobox Patch
@sl-design-system/locales Patch

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

@anna-lach anna-lach changed the title fix(combobox): Add ARIA attributes and update translations for toggle button fix(combobox): add ARIA attributes and update translations for toggle button May 21, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 added aria-expanded to expose open/closed state.
  • Updated combobox unit tests to assert the new aria-label and aria-expanded behavior.
  • Consolidated localization by removing showOptions / hideOptions keys and introducing a single sl.combobox.options key 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.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 21, 2026

🕸 Storybook preview

You can view a preview here (commit e0b01154bc3e3fd0626a60b136d6dd88573be3ba).

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 21, 2026

🕸 Website preview

You can view a preview here (commit e0b01154bc3e3fd0626a60b136d6dd88573be3ba).

Copilot AI review requested due to automatic review settings May 21, 2026 09:30
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

Comment thread .changeset/bright-walls-live.md
@anna-lach anna-lach marked this pull request as ready for review May 21, 2026 10:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Combobox] Toggle button should behave as toggle button

4 participants