コンポーネント / navigation

navigation · @awesome-ds/react

Tabs

関連する表示を同じ階層で切り替えるタブ。

関連ルール: rule.a11y.wcag-aa, rule.components.state-matrix

状態マトリクス

選択済み必須

構造

  • タブリスト
  • タブ
  • 選択中のパネル

キーボード操作契約

左右矢印でタブを移動し、Home・Endで端へ移動します。

スクリーンリーダー契約

tablist、選択中のtab、対応するtabpanelの関係を通知します。

コンテンツ規則

  • 短く並列なタブ名を使います。
  • 同じ階層の関連内容だけを切り替えます。

公開API

プロパティ型必須説明
itemsTabItem[]必須表示する項目とその内容。
defaultValuestring—初期選択する項目。
ariaLabelstring—支援技術向けにローカライズした領域名。

環境適応契約

RTL
論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
ハイコントラスト
背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
動きを減らす設定
状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Tabs/arrows-home-end

ライブ表示

ライブ表示

概要の内容

コピー可能な実装例

import { Tabs } from "@awesome-ds/react";

<Tabs items={[{value:'a',label:'A',content:'A'}]} />