Accessibility issue - inputGroup has role="presentation" but child elements have semantic meaning

[emilyuhde]

I set up some accessibility unit tests to test my overrides of the react-time-picker and I started to see this accessibility error. I created a unit test on the react-time-picker straight from the library, with no customizations, and it looks like it's happening on the react-time-picker component. The inputGroup has a role="presentation" set but child elements of it have semantic meaning so that role seems to be inappropriate and is causing the unit test to fail.

(My accessibility unit tests are done with AATT https://github.com/paypal/AATT/blob/master/README.md)

This element's role is "presentation" but contains child elements with semantic meaning. <div class="react-time-picker__inputGroup" role="presentation" ??? input type="time" name="time" step="60" style="..."

https://www.w3.org/TR/WCAG20-TECHS/F92.html

[wojtekmaj]

Hi!
Thanks for the heads up. I wanted to assure you that accessibility is my top concern.

Do you think it would be easy to integrate AATT into our CI tests?

[wojtekmaj]

By the way, I ran Lighthouse Accessibility tests on our test suite and fixed all the issues , so we're now aiming for 100 Accessibility score in Lighthouse.

[emilyuhde]

I think the actual setup was pretty straight forward when we added AATT tests to our unit testing a few months ago. Once the basic imports, etc, were done, we set up a test util file and that gets imported into the unit test files:

https://gist.github.com/emilyuhde/660260027a9ed18a561dbce567c6fa12

Then we only needed to add one test per component for our component library (though you could add more to check things like the disabled state, etc.):

https://gist.github.com/emilyuhde/1f30770860b993f1dad6e5a4430d5ed0

(I keep having issues with code block formatting in Github so I just created some Gists for you.)

Also, I did notice that Lighthouse doesn't find this role issue but AATT did, which seemed strange, but that's probably a good reason to consider adding a11y unit tests. Also, we did find some security issues when running npm audit after installing the library though, so you should be aware of that when you try it out.

[emilyuhde]

I did some research into AATT and I found out that the reason why it is reporting this issue but Axe, Wave, Lighthouse are not is that AATT also uses HTML CodeSniffer. You can add it as a browser bookmark and use it to repro this issue without having to set up the AATT tests.

http:https://squizlabs.github.io/HTML_CodeSniffer/