Can you create an accessible React component?

stereobooster - Jun 2 '19 - - Dev Community

Let's try a fun experiment. In the first post, we talked about how to create React accessible component, in the second one how to test it, in the third one I propose you to try to write accessible component yourself. (Strictly speaking, it doesn't have to be React, but I won't be able to review it otherwise)

We will try to write accessible tabs component. There is WAI-ARIA Authoring Practices 1.1. recommendations.

I created a starter repository with Cypress tests according to recommendations. I tried my best with those test, but they may need some adjustments - it is hard to do test first approach with e2e tests, it works smoothly only for unit tests. There is Travis CI which will run tests.

Tabs component is pretty similar to the accordion component, about which we talked in the first post, so you can use the first example as inspiration. This can be a nice learning experience. I learned thing or two while I created and fixed bugs in the code for the first post.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .