OK

• ✓role="tablist" / role="tab"、選択は aria-selected="true"。
• ✓variant は solid / line から選ぶ。

NG

• ✕ページ遷移リンクの並びに使わない → 同一ページ内の表示切替に使う。
• ✕選択状態をクラスだけで示さない → aria-selected を使う。

同じ画面で内容を切り替える用途に role="tab" を使う。

<div role="tablist">
  <button role="tab" aria-selected="true">概要</button>
</div>

別ページへの遷移に tab を使わない。ナビゲーションは menu / link を使う。

<a class="tab tab-solid" href="/page-a">ページA</a>  <!-- 遷移に流用 -->

選択タブだけ aria-selected="true"。SR に選択が伝わる。

<button role="tab" aria-selected="true">すべて</button>
<button role="tab" aria-selected="false">未読</button>

role／aria-selected が無いと、ただのボタンの並びで選択状態が伝わらない。

<button class="tab tab-line">すべて</button>  <!-- role/aria-selected なし -->