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.)

video1-min.mp4

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: #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.)

video2-min.mp4

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]

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

[github-actions]

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]

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]

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

[github-actions]

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

[github-actions]

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

[jsakamotoIGJP]

Hi @Lipata,
Sorry for bothering you, but could you please reopen this issue and reconsider taking care of it?

I don't want to push you and your team, but personally, I feel like this feature request is not so hard to implement since it just adds some "aria—" attributes. Of course, I understand there might be some reasons not to start this improvement that I can't see.

Or, if you and your team decide not to fix this issue, please let us know and explain your decision.

In any case, we'd appreciate it if you would reconsider taking care of this issue. Thanks in advance.

[Lipata]

@jsakamotoIGJP, we will review the issue in the next sprint at the start of 2025.

[jsakamotoIGJP]

Thank you, @Lipata, for reopening this issue. Yeah, it is close to the end of the holiday season now, so I hope you and your team have a good time. See you again next year!