Screen readers incorrectly announces the state of <igx-checkbox> within <igx-column-actions>

[jamesuhl]

Description

While using a screen reader (JAWS or NVDA), selecting checkboxes within the pinned columns dropdown component does not announce the correct state of the checkbox

• igniteui-angular version: latest
• browser: Tested in Chrome

(I assume other dropdowns will experience the same issue)

Steps to reproduce

1. Open Infragistics example page for the Data Grid Toolbar (https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/toolbar)
2. Launch a screen reader (either NVDA or JAWS)
3. Navigate using only the keyboard to the "Pinned Columns" dropdown button, open the dropdown
4. Tab down to a checkbox selection (i.e. "Country", or "Beats Per Minute") and select the checkbox using the spacebar
5. Listen to the results from the screen reader

Result

Once the state is changed after the dropdown is open (while using the keyboard), the screen reader does not always correctly announce the current checked state.

Expected result

If the checkbox is checked, the screen reader should always announce "checkbox checked". If the checkbox is not checked, the screen reader should always announce "checkbox not checked"

Problem

The <igx-checkbox> is not using the "checked" attribute. The source of the problem is due to how Infragistics coded the accessibility code. The use of aria-checked is not appropriate for a native HTML checkbox (i.e. <input type="checkbox">. Aria-checked was intended for custom components and web components only (i.e. <span role="checkbox" tabindex="0">). The igx-checkbox is actually using a hidden HTML <input> but the checked state is set using aria-checked. The screen reader is not interpreting this correctly since it is programmed to interpret the "checked" attribute. My testing indicates that the initial aria-checked is announced, but any changes to this state are not registered by the screen reader.

Solution

I believe the original <igx-checkbox> component needs to be edited, such that it adds or removes the "checked" attribute instead of relying on aria-checked.

Alternative Solution

If for some reason adding/removing "checked" is not an option, you can try adding an aria-live to the checkbox component, but then you have to change the text content somewhere to trigger this change (since changes to attributes don't trigger screen readers). I don't know if or how this will work, so the original solution may be best.

Notes

If there's a concern about breaking changes to the component. Both aria-selected and the use of "checked" attribute can be used at the same time (although redundant). Otherwise, using the "checked" attribute on native HTML checkbox elements is the ideal, and will be announced correctly by screen readers.

I used the following CSS to temporarily expose the hidden HTML checkbox within Infragistics components: input.igx-checkbox__input { position: relative !important; width: 10px !important; height: 10px !important; appearance: checkbox !important; margin:0; }

This can help visualize the problem. After opening the dropdown using keyboard only, I can get the HTML checkboxes and the visual SVG graphics to go out of sync. The screen reader is relying on the "checked" attribute of the native HTML checkbox for updates to the initial state. You have to use the keyboard to replicate, clicking on the checkboxes using the mouse works as expected.