d2l-tag-list & d2l-filter-tags component - Screen readers + Chrome - Screen-reader is not reading text of second and later list items
Chebsi opened this issue · comments
Browser: Version 103.0.5060.134 (Official Build) (64-bit)
NVDA: Version 2022.2
When I use keyboard controls (arrow keys) to navigate through the tag list, NVDA will say the first tag's text as expected, however later items in the list are not said out loud.
Instead we only hear "list item 2 of 5", without the text in the filter.
So it will say
"{Tag text}, press backspace, or press delete key to remove item {tag text}, 1 of 5 level 1"
"list item 2 of 5 level 1" (here we'd expect the tag text to be included like the first item above)
"list item 3 of 5 level 1"
and so on (Attached a screenshot showing NVDA's speech as I navigate through the list.)
Hovering over the list items with the mouse, NVDA will read the text as expected for each list item.
This is not happening in Firefox + NVDA or Safari + Voiceover
Margaree pointed out this might actually be a bug with chromium (https://stackoverflow.com/questions/67690306/how-to-make-an-accessible-list-in-a-web-component)
Thanks for opening this!
I did a bit of investigation into this and Chrome isn't using the list item content when the tabindex for a listitem is -1. This can be seen in the image above if you note there is no text next to non-first listitems. If I set all to tabindex=0 then it does use the content and the screenreader experience works as expected (however we don't want tabbing between items, just arrow keys).
A potential fix is in _renderTags doing something like this.setAttribute('aria-label', tagContent) but there are potential edge cases with the tooltips to be considered and also testing of existing working browser/screenreader combinations (e.g., NVDA/Firefox, VoiceOver/Safari) to make sure we don't have any regressions.
This is being closed as it is now being tracked in Rally by this defect. Going forward our plan is to track bugs like this in Rally rather than GitHub issues.