Stimulusとは
Stimulusとは、JavaScriptで書かれたクライアントサイドのライブラリです。
有名どころだとStack Overflowが採用していたりします。
StimulusはHTMLを中心に考えられていて、JavaScriptで書かれた振る舞いをHTMLから呼び出せるように設計されています。
それゆえ私のようなHTMLコーダー上がりの人間にとっても、とっつきやすいライブラリだと思います。
また、アクセシブルな実装は基本HTMLありきなので、その辺の親和性も高いと思っています。
タブとは
1画面に収まり切らない、または同時に見せるべきではない複数の情報のまとまりを、（画面遷移やスクロールを発生させずに）すばやく表示するため
のUIです。
ソシオメディア | タブの並列切替にて詳細な説明が見れます。
a11yを考慮したタブ
ARIA Authoring Practices Guide (APG)に全ての答えが載っています。
我々はそれに従いただ実装するのみです。
前提として、今回はタブボタンがアクティブになると、関連する内容（タブパネル）が自動で切り替わる「Tabs With Automatic Activation」で考えていきます。
HTMLを書いてみる
<div>
<ul role="tablist">
<li role="presentation">
<button type="button"
role="tab"
aria-selected="true"
aria-controls="tab1-panel"
id="tab1-btn"
tabindex="0"
>タブ1</button>
</li>
<li role="presentation">
<button type="button"
role="tab"
aria-selected="false"
aria-controls="tab2-panel"
id="tab2-btn"
tabindex="-1"
>タブ2</button>
</li>
<li role="presentation">
<button type="button"
role="tab"
aria-selected="false"
aria-controls="tab3-panel"
id="tab3-btn"
tabindex="-1"
>タブ3</button>
</li>
</ul>
<div>
<div role="tabpanel"
aria-labelledby="tab1-btn"
id="tab1-panel"
tabindex="0"
>
<p>あいうえお</p>
</div>
<div role="tabpanel"
aria-labelledby="tab2-btn"
id="tab2-panel"
tabindex="0"
>
<p>かきくけこ</p>
</div>
<div role="tabpanel"
aria-labelledby="tab3-btn"
id="tab3-panel"
tabindex="0"
>
<p>さしすせそ</p>
</div>
</div>
</div>
要素の説明
| 要素 | 属性 | 説明 |
|---|---|---|
<div> |
ラッパー。 | |
<ul> |
role="tablist" |
tabロールの付いた要素の親要素。 |
<li> |
role="presentation" |
<li>要素には暗黙のlistitemロールがデフォルトで付いており、listロールの付いた要素の子要素でなければならない。今回はタブ用に tablistロールを付与しているので、listロールの子要素になれなくなってしまったので、アクセシビリティツリー上意味を持たないpresentationロールを付与している。 |
<button> |
type="button" |
ボタン。 |
role="tab" |
tabpanelロールを制御する。tablistロールの付いた要素の子要素である必要がある。 |
|
aria-selected="boolean" |
制御しているtabpanelロールが開いていればtrue、閉じていればfalse。 |
|
aria-controls="tab1-panel" |
どのtabpanelロールを制御しているか。tabpanelロールの付いた要素のidに紐づく。 |
|
id="tab1-btn" |
ID。tabpanelロールの付いた要素のaria-labelledbyに紐づく。 |
|
tabindex="0|-1" |
開いているパネルのボタンはフォーカス可能（0）、閉じているパネルのボタンはフォーカス不可（-1）。 |
|
<div> |
ラッパー。 | |
<div> |
role="tabpanel" |
メインで見せたい情報。 |
aria-labelledby="tab1-btn" |
どのtabロールにラベリングされているか。tabロールの付いた要素のidに紐づく。 |
|
id="tab1-panel" |
ID。tabロールの付いた要素のaria-cotrolsに紐づく。 |
|
tabindex="0" |
開いているパネルはフォーカス可能。 閉じている（ display: none;された）パネルはそもそもフォーカスできないので、-1にする必要はない。 |
以上で意味的にはアクセシブルなタブの完成です。
次はこれにStimulusで振る舞いをアタッチしていきます。
Tabs Controller
与えたい振る舞いとしてはボタンのクリックやキーボード操作による挙動、それによって連動するパネルの表示非表示です。
タブ全体のラッパーにdata-controller="tabs"を付与して、Tabs Controllerを作ります。
<div data-controller="tabs">
<ul role="tablist">
.
.
.
</ul>
</div>
次に取得したい要素にdata-tabs-target属性を付与します。
今回の対象要素はボタンとパネルなので、<button>と<div role="tabpanel">に付与します。
<button type="button"
role="tab"
data-tabs-target="btn"
>タブ1</button>
<button type="button"
role="tab"
data-tabs-target="btn"
>タブ2</button>
<button type="button"
role="tab"
data-tabs-target="btn"
>タブ3</button>
<div role="tabpanel"
data-tabs-target="panel"
>タブ1の内容</div>
<div role="tabpanel"
data-tabs-target="panel"
>タブ2の内容</div>
<div role="tabpanel"
data-tabs-target="panel"
>タブ3の内容</div>
タブに求められる要件
data-action属性を付与して、要件を満たしていきます。
基本的にはボタンをクリックしたら、該当するパネルが表示される、という振る舞いでOKです。
ここではそれ以外のキーボードインタラクションを見てみます。
| キーボード操作 | 説明 |
|---|---|
Tab |
タブリストにフォーカスが移動すると、アクティブなタブボタンにフォーカスされる。 タブボタンの次はタブパネル全体にフォーカスされる。 Shift + Tabはその逆。 |
| タブボタン上でのキーボード操作 | 説明 |
|---|---|
ArrowRight |
次の（右の）タブボタンにフォーカスを移動する。 最後の（一番右の）タブボタンにフォーカスがある場合、最初の（一番左の）タブボタンにフォーカスを移動する。 |
ArrowLeft |
前の（左の）タブボタンにフォーカスを移動する。 最初の（一番左の）タブボタンにフォーカスがある場合、最後の（一番右の）タブボタンにフォーカスを移動する。 |
| 他はオプションなので省略します。 | |
| 詳しくはTabsのKeyboard Interactionを参照ください。 |
data-action属性の値は{event}->{controller}#{method_name}のフォーマットで記述しますが、今回使うイベントはclickとkeydownの2つでOKです。
Stimulusでの実装例
See the Pen QIITA_STIMULUS_ACCESIBLE_TABS by yoruaki (@yoruaki) on CodePen.
基本的にやっていることは、{name}Targetsで対象要素を取得し、アクティブな要素に必要な属性値を付け替えているだけです。
強いて挙げるとすれば、パネルの非表示をis-hideというクラス名でCSSで制御しているのですが、それをJS側でelm.classList.add('is-hide')みたいに書くのではなく、Class APIを用いてあくまで状態はHTML側が持っているという体にしています。
これは非常に単純な作用に見えますが、非常に奥深く、機能の汎化に役立ちます。
JavaScript内で直に特定のclassの付与してしまっていては、このcontrollerは同名のclassをふる時にしか再利用できませんが、class apiを利用することでHTML側を変えるだけでJavaScriptはそのまま再利用できるという汎用性を手にできるのです。
最後に
Stimulusでa11yを考慮したタブを実装してみました。
アクセシビリティを考慮した実装をするとなると、ランドマークロールやウィジェット属性の付与、キーボード操作などの挙動や場合によってはDOMの見直しなども発生するかもしれません。
そんな中でも学習コストが低く、HTMLに寄り添ったライブラリであるStimulusは、強い味方になってくれるはずです。