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.