WAI ARIA Compaliant Tabs

This project illustrates a usage of a React tab group component fully compliant with the WAI ARIA specification with details highlighted here https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel.

This is an Automatically Activated tabs component.

Active tabs retain their state in a similar manner to native HTML elements including back/forward navigation and refresh.

It's possible to directly link to any given tab on a page using a query parameter name attached to each tab group with a prop.

The tabs component is fully operational in Chrome, Firefox, Safari and Edge.

How to run this project locally?

In the project directory, you can run:

yarn install

Installs all dependencies required.

yarn start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

yarn test

Launches the test runner in the interactive watch mode.

yarn test:coverage

Launches the test runner and displays code coverage.

I haven't written too many unit tests and have written snapshot test for most components for better coverage.

Technologies

This project was bootstrapped with Create React App.

  • React
  • TypeScript
  • Styled Components
  • React Testing Library