This accessible tabs component runs within a Next.js/React application.
To begin, run either npm install or yarn to install all the package dependencies.
Then run npm run dev or yarn dev to start the local development environment at http://localhost:3000/.
The TabSet component was built with full Typescript support. It accepts the following properties:
| Prop | Purpose |
|---|---|
uniqueName |
(Required) A name for this particular instance of the tab set. This should be unique, as it is turned into a "slug" which will become the unique identifier used in URLs. |
tabs |
(Required) An array of tab objects, each with the following properties:
|
options |
A configuration object determining the behaviour of the component:
|
<TabSet
uniqueName="My tabs"
tabs={[
{
uniqueName: "One",
content: <p>Goodbye</p>,
isActive: false,
},
{
uniqueName: "Two",
content: <p>Hello</p>,
isActive: true,
}
]}
/>Run npm run test or yarn test to run the full suite of tests for the component.
According to this article from https://simplyaccessible.com/article/danger-aria-tabs/, the ARIA accessibility attributes may not be as useful as we might assume. However, that post was written 5 years ago, so it may no longer be relevant. Any assumptions should be tested with real users.
For the sake of this exercise, I will proceed on the assumption that the attributes are indeed useful now in 2021.