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.
In the project directory, you can run:
Installs all dependencies required.
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
Launches the test runner in the interactive watch mode.
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.
This project was bootstrapped with Create React App.
- React
- TypeScript
- Styled Components
- React Testing Library