Tabs

依存は持ちません

素の HTML にタブはありませんが、作るのに要るのはブラウザが持っているものだけです—— button と、フォーカスの移動と、キーボードの操作。

Tab キーで止まるのは選択中のタブだけです

選択中のタブだけが Tab キーの移動先になります。全部が対象だと、 タブの数だけ Tab キーを押すことになります。

並びの中は矢印キーで移ります。Home で先頭、End で末尾。 端では折り返します——端から端へ戻るのに全部通らずに済みます。

矢印キーで移動すると、その場で中身が切り替わります

activation="manual" を渡すと、押して初めて開きます。

押せないタブは飛ばされます

矢印キーの移動先にもなりません。止まれるのに開けないのは筋が通りません。

名前は利用側が渡します

id から aria-controls と aria-labelledby を作ります。 同じ画面に2つ置くときは別の名前を渡してください。

Tabs が作って配る形にはしていません。利用側が中身を別の場所から指したいときに 名前が分からなくなるためです。

選択していないタブの中身も DOM に置かれます

表示していないだけで、すべてのタブの中身が最初から DOM にあります。 ブラウザのページ内検索で見つかり、印刷にも出ます。

重いコンポーネントを選ばれるまで描きたくない場合は、 中身の側で出し分けてください。 Tabs は出し分けを持ちません。

選択中のタブは、色以外でも見分けられます

下線と文字の濃さで示します。読み上げには aria-selected で伝わります。 色が見分けられない環境でも、どれが選ばれているか分かります。