[Combo] JAWS doesn’t announce the state of checkboxes (reopened).

[jamesuhl]

Description

The JAWS screen reader does not distinguish between checked and non-checked list items for the comboBox. Note: Re-opening bug ticket closed on June 6, 2025. (Ref: https://github.com/IgniteUI/igniteui-angular/issues/15843#event-20294203914). Providing an alternative solution in this ticket.

• igniteui-angular version: latest
• browser: Chrome & Edge (works in Firefox)

Steps to reproduce

1. In Chrome or Edge browser, open Infragistics sample page for ComboBox: https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo
2. Launch JAWS screen-reader
3. Navigate using keyboard only to ComboBox example
4. Select and deselect several options
5. Continue navigating up and down the selection list
6. Listen to announcement from screen reader

Result

• JAWS = no distinction from selected or not selected items
• NVDA = only the state of unselected items are announced

Expected result

Selected options should be indicated by the screen reader. Currently, there is no way to distinguish between selected or unselected items in the ComboBox using JAWS with Chrome or Edge. Note: NVDA announces the "unselected" items but not the "selected" items.

Problem

This is a known defect with Chrome and JAWS: (https://issues.chromium.org/issues/337904204, https://github.com/FreedomScientific/standards-support/issues/733). Since the aria-selected is not working properly, I am providing an alternative solution

Solution

• Remove aria-label from <igx-combo-item> (allowing the screen-reader to announce the text content within this element.
• On <span class="igx-checkbox__composite"> (or directly to the <svg>) add: role="img" , then...
• Dynamically update the aria-label of this element: IF checked, dynamically add: aria-label="checkbox checked" ELSE dynamically add: aria-label="checkbox not checked"

Alternately, you could use or aria-label="graphic of unchecked checkbox" or aria-label="graphic of checked checkbox"

Note on the use of role="listbox"

The placement of aria-multiselectable is incorrect on the ComboBox. aria-multiselectable and role="listbox" should go on the same element. (Also, aria-labelledby should be an ID, not a string)

Ref: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-multiselectable

Note on toggle button

Also, the toggle button has no accessible label by default, and there is no aria-expanded and aria-controls on the toggle button. These are used on the existing input, so it's just a matter of duplicating that functionality on the toggle button. To Fix the existing toggle button:

• Add: aria-label="Toggle menu" to the <igx-suffix class="igx-combo__toggle-button"> (this would be a minimum fix, an improvement would be: aria-label="Toggle menu for {{label_of_input}}" and use the label text in there. This decreases the possibility that multiple "Toggle menu" buttons appearing on the same page. Which is also considered an accessibility issue.
• Add: aria-expanded="{{ true | false }}" on this toggle button to reflect the current state of the menu. Next...
• Add: aria-controls={{ igx-drop-down-XX-list }} (set to the ID of the dropdown container) Current:

Fix: