Skip to content

Conversation

@metonym
Copy link
Collaborator

@metonym metonym commented Oct 17, 2025

Fixes #2172

Closes #2188, closes #2187

This PR fixes critical accessibility violations in the MultiSelect component identified by the IBM Equal Access Accessibility Checker. The component was using improper role nesting with role="button" wrapping interactive elements, causing keyboard accessibility issues and screen reader confusion.

The fix restructures both filterable and non-filterable variants to use role="combobox" directly on the interactive element without nested button roles, following the same pattern used in the ComboBox component. For the filterable variant, the input element now serves as the combobox with proper aria-labelledby, aria-controls, and aria-owns attributes. For the non-filterable variant, the ListBoxField uses role="combobox" instead of role="button", with aria-activedescendant for proper keyboard navigation tracking.

The PR updates all existing tests to reflect the role changes and adds 7 new accessibility-focused regression tests.

@metonym metonym force-pushed the multiselect-a11y-fix branch from e276a2b to e3c5757 Compare October 17, 2025 19:35
@metonym metonym merged commit c4c335a into master Oct 17, 2025
7 checks passed
@metonym metonym deleted the multiselect-a11y-fix branch October 17, 2025 19:51
@metonym
Copy link
Collaborator Author

metonym commented Oct 19, 2025

Fixed in v0.89.8

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.

Accessibility Violations in MultiSelect Component (carbon-components-svelte@^0.89.4) using IBM Equal Access Checker

1 participant