PLANET-5247 Spreadsheet Accessibility

[planet-4]

The Spreadsheet frontend has some issues we may want to double check:

• The title attribute present in the column headers (currently is "Sort by"), is read in all rows, in all columns, before the content, it looks like the title attribute should actually be the name of the column for it to be accessible. For example, if your table is: Name  |  Species Garfield |  Cat

When you focus the "Cat" cell it will read: "Sort by, Cat, column 2". It should be: "Species, Cat, column 2".

To do this, change the title attribute in the column header to match the column name.

• The headers are clickable, so we should either wrap the buttons + the arrow in <button> tags, or make sure we use the appropiate aria-role to make sure they are interpreted as buttons. Using <button> is probably the best option.
• Make sure the changes in sorting order are properly announced.

I ran into an issue where the Spreadsheet was absolutely ignored by the Screen reader just two times and couldn't reproduce it anymore. Screen readers used to build the "accessibility tree" (imagine it as a simplified version of the page) on page load, but unless I'm wrong they don't works like that anymore and they are aware of DOM changes, I guess it worths testing it reloading the page a few times, maybe altering the bandwidth to test what happens with a slow connection if the spreadsheet takes a while to load.

Reporter: pcuadrad
Sections: Block: Spreadsheet

Potentially affected repositories: planet4-plugin-gutenberg-blocks

Testing

Add a Spreadsheet block to a page and test it out with a screen reader (you can use this spreadsheet for example). You can also read the docs for more details on the block.

[aeisenberg]

I'll be picking this up now. The title fix is straight forward. There are a handful of other changes that would make tables more accessible:

• Add a caption
• Add a summary
• Use the scope="col" attribute

I'll add the third one since it is easy, but in order to add a caption and summary, there needs to be a change in the template as well.

The first two are a design change, which would be outside the scope of this issue, but something to consider for later.

I ran into an issue where the Spreadsheet was absolutely ignored by the Screen reader just two times and couldn't reproduce it anymore.

I'll try to reproduce this as well.

[aeisenberg]

Another accessibility issue is that the column sorting is not tab-selectable. I'll fix that.