Premium support for our pure JavaScript UI components


Post by Josh Argent »

Hi,

We are using the Tree Grid and have noticed a couple of accessibility issues relating to the tree column.

  1. Screen readers cannot read whether a tree row is expanded or collapsed.
  2. The icons added to grid rows (using iconCls on GridRowModel) do not have any alternate text that's readable by screen readers. We need to provide an accessible alternative to icons.

Thanks.


Post by Animal »

This is the DOM of a branch node which is collapsed:

Screenshot 2022-05-18 at 16.36.36.png
Screenshot 2022-05-18 at 16.36.36.png (41.58 KiB) Viewed 427 times

This is the DOM of the same branch node when expanded:

Screenshot 2022-05-18 at 16.37.43.png
Screenshot 2022-05-18 at 16.37.43.png (49.19 KiB) Viewed 427 times

As you can see, the aria-expanded property is set correctly. I cannot do much more than ensure that that is set.

What kind of alt would you like to see in the icon images?


Post by Animal »

Also, I'm not sure how alt text would work. Those icons are not images. It's a unicode character using Font Awesome:

Screenshot 2022-05-18 at 16.41.54.png
Screenshot 2022-05-18 at 16.41.54.png (97.18 KiB) Viewed 427 times

How should I modify the DOM to produce the kind of output that you require? All can be done, I just need to know what.


Post by Josh Argent »

Thanks for your reply Animal. I didn't realise the aria-expanded attribute was set, our screen reader isn't picking it up for some reason, which is probably a fault with the screen reader.

I understand the icons are just unicode characters. Ideally we would like to be able to specify some alternate text to be read along with the cell value. I think setting the title attribute on the <i> tag and removing the role="presentation" works. However, I imagine this is something that should be configurable.

Our use case for icons is to identify 3 different types of row in our grid. Without some kind of alternate text, it is impossible for screen reader users to distinguish the 3 types.


Post by Animal »

It seems that the row element has to be focused for the reader to announce the details about the row. It doesn't infer them from the owning row, when a cell is focused.

This is a whole new layer of focus navigation handling when listening for arrow keys. Here's a ticket for it: https://github.com/bryntum/support/issues/4643

For title on icons, here is the ticket: https://github.com/bryntum/support/issues/4644


Post by Josh Argent »

I see, that makes sense. Thank you!


Post Reply