Tabs
Tabs
is a component for switching between different display areas.
The Tabs
follows the WAI-ARIA - Tabs Pattern for accessibility.
When using only icons in Tab
, set aria-label
for the Tab
.
<Tabs><Tab>フリーザ</Tab><Tab aria-label="Send an email to Freeza"><MailIcon /></Tab><TabPanel>私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……</TabPanel><TabPanel>フリーザ様にメールを送る</TabPanel></Tabs>
Setting aria-label
on TabList
will make it readable by screen readers.
<Tabs tabListProps={{ "aria-label": "DRAGON BALL characters" }}><Tab>孫悟空</Tab><Tab>ベジータ</Tab><Tab>フリーザ</Tab><TabPanel>クリリンのことか……クリリンのことかーーーっ!!!!!</TabPanel><TabPanel>へっ!きたねぇ花火だ</TabPanel><TabPanel>私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……</TabPanel></Tabs>
Or,
<Tabs><TabList aria-label="DRAGON BALL characters"><Tab>孫悟空</Tab><Tab>ベジータ</Tab><Tab>フリーザ</Tab></TabList><TabPanel>クリリンのことか……クリリンのことかーーーっ!!!!!</TabPanel><TabPanel>へっ!きたねぇ花火だ</TabPanel><TabPanel>私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……</TabPanel></Tabs>
Keyboard Navigation
Key | Description | State |
---|---|---|
Tab | When focus moves to the tab list, it focuses the active tab. | - |
ArrowLeft | Focuses and activates the previous tab that is not disabled. | orientation="horizontal" |
ArrowRight | Focuses and activates the next tab that is not disabled. | orientation="horizontal" |
ArrowUp | Focuses and activates the previous tab that is not disabled. | orientation="vertical" |
ArrowDown | Focuses and activates the next tab that is not disabled. | orientation="vertical" |
Space , Enter | Activates the tab that is in focus. | isManual={true} |
Home | Focuses and activates the first tab that is not disabled. | - |
End | Focuses and activates the last tab that is not disabled. | - |
ARIA Roles and Attributes
Component | Roles and Attributes | Usage |
---|---|---|
TabList | role="tablist" | Indicates that it is a tab list. |
aria-orientation | Sets to "horizontal" or "vertical" based on the value of orientation . | |
Tab | role="tab" | Indicates that it is a tab. |
id | The id used to associate with TabPanel . | |
aria-controls | Sets the id of the associated TabPanel . | |
aria-selected | Sets to true if the tab is active, and sets to false for all other tabs. | |
TabPanel | role="tabpanel" | Indicates that it is a tab panel. |
id | The id used to associate with Tab . | |
aria-labelledby | Sets the id of the associated Tab . |
Edit this page on GitHub