Accessible Tabs

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/.

Using the TabSet component

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: uniqueName: (Required) A name for this particular tab. Must also be unique - similar rules and usage as tab sets. content: (Required) A React.ReactNode or JSX.Element object.
options	A configuration object determining the behaviour of the component: useHash: sets the location hash to the tab most recently selected (across all tab sets). Defaults to true useQuery: sets a location search query param (for this tab set specifically) when a tab is selected. Defaults to true hardErrors: throws a show-stopping error when a duplicate slug is used. Defaults to true

React component example

<TabSet
	uniqueName="My tabs"
	tabs={[
		{
			uniqueName: "One",
			content: <p>Goodbye</p>,
			isActive: false,
		},
		{
			uniqueName: "Two",
			content: <p>Hello</p>,
			isActive: true,
		}
	]}
/>

Running component tests

Run npm run test or yarn test to run the full suite of tests for the component.

Notes on real-world accessibility

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.