Package
@carbon/react
Browser
Firefox
Operating System
MacOS
Package version
v1.81.0
React version
16.14.0
Automated testing tool and ruleset
IBM Equal Access Accessibility Checker - Latest Deployment
Assistive technology
JAWS, MacOS VoiceOver
Description
When navigating through ComboBox dropdown options using keyboard, screen readers do not announce which option is currently selected. This violates WCAG 4.1.2 Name, Role, Value (Level A) compliance.
What did you expect to happen?
When a user navigates to an already-selected option in the ComboBox dropdown list using keyboard, the screen reader should announce:
The option name
Its position in the list
That it is "selected"
What happened instead?
Screen readers announce the option name and position, but do NOT announce that the option is selected. Users cannot identify which option was previously selected when navigating through the list.
WCAG 2.1 Violation
4.1.2 Name, Role, Value (Level A)
Reproduction/example
Test URL: https://cloud.ibm.com/content-mgmt/catalogs/{catalog-id}/offering/{offering-id} Component: Service dropdown in "Define IAM access" panel
Steps to reproduce
User Impact: Screen reader users cannot determine which option is currently selected in the ComboBox, making it difficult to understand the current state of the component.
Steps to reproduce
Open a page with a ComboBox component that has a pre-selected value
Use keyboard to open the ComboBox dropdown (Space or Enter)
Use arrow keys to navigate through the options
Navigate to the option that is currently selected
Listen to screen reader announcement (JAWS with Firefox or VoiceOver with Safari)
Expected: Screen reader announces "Option Name, 2 of 5, selected"
Actual: Screen reader announces "Option Name, 2 of 5" (missing "selected" state)
Code Example:
<ComboBox
id="service-dropdown"
items={availableServices}
itemToString={(item) => item?.displayName || item?.name || ''}
titleText="Service"
placeholder="Select service"
onChange={handleServiceChange}
selectedItem={selectedService}
/>
Root Cause Analysis
The ComboBox component (powered by Downshift) does not properly set aria-selected="true" on the currently selected option in the dropdown menu. All options either:
Have aria-selected="false", or
Have no aria-selected attribute
This prevents assistive technologies from announcing the selected state.
Suggested Fix
Ensure that when the ComboBox dropdown is open:
The currently selected option has aria-selected="true"
All other options have aria-selected="false"
The aria-activedescendant attribute on the input correctly references the selected option
Related Components
This issue likely affects all Downshift-based components:
ComboBox
MultiSelect
FilterableMultiSelect
Dropdown (if applicable)
Suggested Severity
Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.
Code of Conduct
Package
@carbon/react
Browser
Firefox
Operating System
MacOS
Package version
v1.81.0
React version
16.14.0
Automated testing tool and ruleset
IBM Equal Access Accessibility Checker - Latest Deployment
Assistive technology
JAWS, MacOS VoiceOver
Description
When navigating through ComboBox dropdown options using keyboard, screen readers do not announce which option is currently selected. This violates WCAG 4.1.2 Name, Role, Value (Level A) compliance.
What did you expect to happen?
When a user navigates to an already-selected option in the ComboBox dropdown list using keyboard, the screen reader should announce:
The option name
Its position in the list
That it is "selected"
What happened instead?
Screen readers announce the option name and position, but do NOT announce that the option is selected. Users cannot identify which option was previously selected when navigating through the list.
WCAG 2.1 Violation
4.1.2 Name, Role, Value (Level A)
Reproduction/example
Test URL: https://cloud.ibm.com/content-mgmt/catalogs/{catalog-id}/offering/{offering-id} Component: Service dropdown in "Define IAM access" panel
Steps to reproduce
User Impact: Screen reader users cannot determine which option is currently selected in the ComboBox, making it difficult to understand the current state of the component.
Steps to reproduce
Open a page with a ComboBox component that has a pre-selected value
Use keyboard to open the ComboBox dropdown (Space or Enter)
Use arrow keys to navigate through the options
Navigate to the option that is currently selected
Listen to screen reader announcement (JAWS with Firefox or VoiceOver with Safari)
Expected: Screen reader announces "Option Name, 2 of 5, selected"
Actual: Screen reader announces "Option Name, 2 of 5" (missing "selected" state)
Code Example:
<ComboBox
id="service-dropdown"
items={availableServices}
itemToString={(item) => item?.displayName || item?.name || ''}
titleText="Service"
placeholder="Select service"
onChange={handleServiceChange}
selectedItem={selectedService}
/>
Root Cause Analysis
The ComboBox component (powered by Downshift) does not properly set aria-selected="true" on the currently selected option in the dropdown menu. All options either:
Have aria-selected="false", or
Have no aria-selected attribute
This prevents assistive technologies from announcing the selected state.
Suggested Fix
Ensure that when the ComboBox dropdown is open:
The currently selected option has aria-selected="true"
All other options have aria-selected="false"
The aria-activedescendant attribute on the input correctly references the selected option
Related Components
This issue likely affects all Downshift-based components:
ComboBox
MultiSelect
FilterableMultiSelect
Dropdown (if applicable)
Suggested Severity
Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.
Code of Conduct