Improve accessibility for screen readers

[Neurrone]

Fixes #3850

• Use aria-label to label iconic buttons in the reporter
• Use CSS to provide text for screen readers in the statistics list

Investigated fixing the runnables and collapsable components so they would announce whether they are collapsed/expanded and to make them keyboard navigable, but because the collapsable content is a child of the node that can be clicked to toggle them would cause even worse side effects. For instance, the DOM looks something like this

<div onClick="toggle collapsable open">
  <div>
    children
  </div>
</div>

Adding expanded indicators to the parent div would cause expanded to be announced not just for the title, but also all children, which is even worse than the current situation.

The DOM would need to be changed to something like

<div>
  <div onClick="toggle collapsable open"></div>
  <div>
    children
  </div>
</div>

[CLAassistant]

All committers have signed the CLA.

[jennifer-shehane]

Thanks for making these changes! I manually ran, looks good so far.

Feel free to make the DOM updates needed for the 'expand' / 'collapse' notification.

It would be nice to have some tests around this. We don't have any accessibility tests atm.

[Neurrone]

@jennifer-shehane done. Would appreciate if you can verify that no unintended changes were introduced to how it looks visually. You should be able to test the keyboard operability by using the tab keys, and using space/enter to expand/collapse.

I figured out a way to make it work with only a change in the DOM structure for Collapsable by introducing an extra <div>, but was able to attach the keyboard listeners and set the attributes needed in the title's <span> in Test.

The more ideal solution would be to use the more semantic <button> element and CSS to style it if starting from scratch.

I happen to be investigating the use of react-axe and eslint-plugin-jsx-a11y for work.

The thing that really helps most is end-user testing, since automated checks could find the lack of programatic labels, but wouldn't be able to tell you that there are no corresponding indicators for info that is only presented visually.

I'll be happy to answer any questions :)

[jennifer-shehane]

I was just going to manually test this, but then I thought -- hey, I cant test this 'enter' and 'space' functionality in Cypress! 😄

Running Cypress tests for the reporter code is still a bit new for us, so I wanted to play with it - but, in the future if you want to write tests for changes to the reporter, you can do so by following the conventions set up in our existing tests found in packages/reporter/cypress/integration. I also added instructions on how to run it to the packages/reporter/README.md

[Neurrone]

Thanks @jennifer-shehane

[Neurrone]

Not sure what the process is - would also be happy to help with the changelog entry.

[jennifer-shehane]

This is good and ready to go in 3.3.0. New docs + changelog can be found here: cypress-io/cypress-documentation#1534

We are still fixing up some issues found in the release unrelated to this PR.

[desfero]

@Neurrone will this also fix this one reported by me #3741?

[Neurrone]

@desfero if you're referring to the expandable nodes in the reporter, then yes. You should be able to tab to it and hit either enter or space to toggle collapsing / expanding.

[jennifer-shehane]

@Neurrone This PR actually only targets accessibility in the Test Runner screen. This one:

This does not address your issue, which is about accessibility within the packages/desktop-gui: #3741

[jennifer-shehane]

Also - another issue related to keyboard support in the packages/reporter is here: #248