igx-combo - improve accessibility for reading aloud by screen reader apps, especially the Windows Narrator

[jsakamotoIGJP]

Is your feature request related to a problem? Please describe.

Yes, it is.

When I enabled the Windows Narrator and operated a web page that has the igx-combo, the Narrator could not work as I expected.

• It sometimes reads aloud unnecessarily elements such as "blank".
• When I enter the arrow-down key, it cannot recognize UI operatable elements well. For example, the Narrator found and read the hidden "input type=checkbox" element, but it is not desirable behavior because it is a hidden element from the visibility perspective. Another one is the Narrator reads aloud the "Graphic" for the checkbox icon. It is also unnecessarily reading.

See also the video below. (By default, the following video might be muted. Please watch by turning off the mute.)

https://github.com/IgniteUI/igniteui-angular/assets/102948935/29eb49af-5eca-48e8-957a-6ff5215df66b

Describe the solution you'd like

• Make the Narrator not read aloud unnecessarily elements such as "blank".
• Make the Narrator not read aloud the invisible input type=checkbox element.
• Make the Narrator don't read aloud unnecessarily graphical elements.

Describe alternatives you've considered

Patching the aria-* attributes of DOM elements that generated by igx-combo at runtime.

Additional context

This is the source project I used to investigate this issue:

📦c-00233265-ng-app.zip

[jsakamotoIGJP]

The related issue is here: https://github.com/IgniteUI/igniteui-angular/issues/13594

[jsakamotoIGJP]

This is my workaround.

• 📦c-00233265-ng-app (2).zip

This workaround patches the aria-* attributes of DOM elements generated by igx-combo at runtime.

1. Handle the opened event of the igx-combo.
2. When the opened event is fired, invoke a monkey patch process of the following.

• Fix the value of the aria-label attribute to be the text inside its drop-down list item.
• Add the aria-hidden="true" attribute to the igx-checkbox elements inside the drop-down list generated by igx-combo.

The patch code that is doing above is below:

export const igxComboItemsAriaPatch = () => {
  const comboItems = Array.from(document.querySelector(".igx-combo__content").querySelectorAll("igx-combo-item"));
  comboItems.forEach(item => {
    item.ariaLabel = item.querySelector(".igx-drop-down__inner").textContent.trim();
    item.querySelector("igx-checkbox").ariaHidden = "true";
  });
}

See also the video below that shows you the result of the workaround above. (By default, the following video might be muted. Please watch by turning off the mute.)

https://github.com/IgniteUI/igniteui-angular/assets/102948935/29e607df-77af-4f4f-bcfe-efc165636708

Unfortunately, the Windows Narrator is also not perfect. The workaround above still sometimes doesn't work well. It is not stable. However, we should do our best to make it render higher accessibility, I think.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[jsakamotoIGJP]

Oh no, don't close this issue. The customer is waitng for fixing this issue for a long time. Please handle this. (CC: @Lipata )

[jsakamotoIGJP]

Thank you, @Lipata !

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[jsakamotoIGJP]

Sorry for interrupt you, @Lipata, but could you keep this issue be opened?

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.