Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.8

Tabs

Tabsは、異なる表示領域を切り替えるコンポーネントです。

ソース@yamada-ui/tabs

Tabsは、アクセシビリティに関してWAI-ARIA - Tabs Patternに従います。

Tabにアイコンのみを使用する場合は、Tabにaria-labelを設定します。

<Tabs>
  <Tab>フリーザ</Tab>
  <Tab aria-label="Send an email to Freeza">
    <MailIcon />
  </Tab>


  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
  <TabPanel>フリーザ様にメールを送る</TabPanel>
</Tabs>
Copied!

TabListにaria-labelを設定すると、スクリーンリーダーによって読み上げられます。

<Tabs tabListProps={{ "aria-label": "DRAGON BALL characters" }}>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>


  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>
Copied!

または、

<Tabs>
  <TabList aria-label="DRAGON BALL characters">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>
  </TabList>


  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>
Copied!

キーボード操作

キー説明状態
Tabフォーカスがタブリストに移動すると、アクティブなタブをフォーカスします。-
ArrowLeft無効ではない前のタブをフォーカスしてアクティブにします。orientation="horizontal"
ArrowRight無効ではない次のタブをフォーカスしてアクティブにします。orientation="horizontal"
ArrowUp無効ではない前のタブをフォーカスしてアクティブにします。orientation="vertical"
ArrowDown無効ではない次のタブをフォーカスしてアクティブにします。orientation="vertical"
Space, Enterフォーカスしているタブをアクティブにします。isManual={true}
Home無効ではない最初のタブをフォーカスしてアクティブにします。-
End無効ではない最後のタブをフォーカスしてアクティブにします。-

ARIAロールと属性

コンポーネントロールと属性使い方
TabListrole="tablist"タブリストであることを示します。
aria-orientationorientationの値に基づいて"horizontal"または"vertical"を設定します。
Tabrole="tab"タブであることを示します。
idTabPanelと関連付けるために使用するid。
aria-controls関連したTabPanelのidを設定します。
aria-selectedタブがアクティブの場合はtrueを設定し、他のすべてのタブはfalseを設定します。
TabPanelrole="tabpanel"タブパネルであることを示します。
idTabと関連付けるために使用するid。
aria-labelledby関連したTabのidを設定します。

GitHubでこのページを編集する

前Accordion次Tree