new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

tabs/accessibility

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Tabs.Tab without text content needs aria-label

If Tabs.Tab is used without text content (only with an icon), set the `aria-label` prop or use the VisuallyHidden component to provide an accessible label.

Set Tabs.List label with aria-label

Set the `aria-label` prop on Tabs.List to label the tabs list for screen readers. The label will be announced when a tab is focused for the first time.

Tabs.Tab as link overrides link role for accessibility

When Tabs.Tab is rendered as a link (`<a>` tag), the `role="tab"` attribute overrides the implicit link role. Screen readers will announce the element as a "tab", not a "link". This is the expected behavior per the WAI-ARIA specification.

Keyboard interactions for horizontal tabs

For horizontal tabs (orientation="horizontal"): ArrowRight focuses and activates the next tab that is not disabled; ArrowLeft focuses and activates the previous tab that is not disabled.

Keyboard interactions for vertical tabs

For vertical tabs (orientation="vertical"): ArrowDown focuses and activates the next tab that is not disabled; ArrowUp focuses and activates the previous tab that is not disabled.

Home and End keys in tabs navigation

Home key focuses and activates the first tab. End key focuses and activates the last tab. These work for both horizontal and vertical tab orientations.

Tabs icon without text accessibility example

```tsx import { CoinIcon } from '@phosphor-icons/react'; import { Tabs, VisuallyHidden } from '@mantine/core'; function Demo() { return ( <Tabs defaultValue="chat"> <Tabs.List> {/* aria-label is not required, tab is labelled by children */} <Tabs.Tab value="chat">Chat</Tabs.Tab> {/* aria-label is required, tab is not labelled by children */} <Tabs.Tab value="money" aria-label="Get money" leftSection={<CoinIcon size={14} />} /> {/* You can use VisuallyHidden instead of aria-label */} <Tabs.Tab value="money" leftSection={<CoinIcon size={14} />}> <VisuallyHidden>Get money</VisuallyHidden> </Tabs.Tab> </Tabs.List> </Tabs> ); } ``` This example shows how to make icon-only Tabs.Tab components accessible by using aria-label or VisuallyHidden.

Tabs.List aria-label example

```tsx import { Tabs } from '@mantine/core'; function Demo() { return ( <Tabs defaultValue="recent"> {/* Tabs.List aria-label will be announced when tab is focused for the first time */} <Tabs.List aria-label="Chats"> <Tabs.Tab value="recent">Most recent</Tabs.Tab> <Tabs.Tab value="recent">Unanswered</Tabs.Tab> <Tabs.Tab value="archived">Archived</Tabs.Tab> </Tabs.List> </Tabs> ); } ``` This example shows how to set the aria-label on Tabs.List to label the tabs list for screen readers.

Tabs follows WAI-ARIA recommendations

The Tabs component follows WAI-ARIA recommendations on accessibility as specified in https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html.

aria-controls attribute behavior with tabs as links

When using tabs as navigation links without Tabs.Panel components, the `aria-controls` attribute on each tab references a panel element that does not exist in the DOM. This is a minor accessibility consideration – most screen readers handle this gracefully.

Give your agent this brain