このページは Cloud Translation API によって翻訳されました。

ハウツーコンポーネント – ハウツータブ

Ewa Gasperowicz

Rob Dodson

Surma

概要

<howto-tabs> は、複数のパネルに分割して、表示されるコンテンツを制限します。単独一度に 1 つのパネルを表示し、対応するすべてのタブが常に表示されます。パネルを切り替えるには、対応するタブを選択済みです。

クリックするか矢印キーを使用することで、クリックします。

JavaScript が無効になっている場合は、すべてのパネルがアクセスできます。タブが見出しとして機能するようになりました。

リファレンス

デモ

GitHub のライブデモを見る

使用例

<style>
  howto-tab {
    border: 1px solid black;
    padding: 20px;
  }
  howto-panel {
    padding: 20px;
    background-color: lightgray;
  }
  howto-tab[selected] {
    background-color: bisque;
  }

JavaScript が実行されない場合、要素は :defined と一致しません。タブと前のパネルの間にスペースが追加されます。

  howto-tabs:not(:defined), howto-tab:not(:defined), howto-panel:not(:defined) {
    display: block;
  }
</style>

<howto-tabs>
  <howto-tab role="heading" slot="tab">Tab 1</howto-tab>
  <howto-panel role="region" slot="panel">Content 1</howto-panel>
  <howto-tab role="heading" slot="tab">Tab 2</howto-tab>
  <howto-panel role="region" slot="panel">Content 2</howto-panel>
  <howto-tab role="heading" slot="tab">Tab 3</howto-tab>
  <howto-panel role="region" slot="panel">Content 3</howto-panel>
</howto-tabs>

コード

(function() {

キーボードイベントの処理に役立つキーコードを定義します。

  const KEYCODE = {
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39,
    UP: 38,
    HOME: 36,
    END: 35,
  };

新しいインスタンスごとに .innerHTML でパーサーを呼び出すのを避けるために、Shadow DOM のコンテンツのテンプレートがすべての <howto-tabs> インスタンスによって共有されます。

  const template = document.createElement('template');
  template.innerHTML = `
    <style>
      :host {
        display: flex;
        flex-wrap: wrap;
      }
      ::slotted(howto-panel) {
        flex-basis: 100%;
      }
    </style>
    <slot name="tab"></slot>
    <slot name="panel"></slot>
  `;

HowtoTabs はタブとパネルのコンテナ要素です。

<howto-tabs> の子はすべて <howto-tab> または <howto-tabpanel> にする必要があります。この要素はステートレスです。つまり、値はキャッシュに保存されないため、実行時の作業中に変更されます。

  class HowtoTabs extends HTMLElement {
    constructor() {
      super();

この要素にアタッチされていないイベントハンドラが this にアクセスする必要がある場合は、バインドする必要があります。

      this._onSlotChange = this._onSlotChange.bind(this);

プログレッシブエンハンスメントでは、マークアップをタブとパネルで切り替える必要があります。子を並べ替える要素は、フレームワークではうまく機能しない傾向があります。代わりに、Shadow DOM を使用して、スロットを使用して要素を並べ替えることができます。

      this.attachShadow({ mode: 'open' });

共有テンプレートをインポートして、タブとパネル用のスロットを作成します。

      this.shadowRoot.appendChild(template.content.cloneNode(true));

      this._tabSlot = this.shadowRoot.querySelector('slot[name=tab]');
      this._panelSlot = this.shadowRoot.querySelector('slot[name=panel]');

この要素は、aria-labelledby と aria-controls を使用してタブとパネルを意味的にリンクするため、新しい子に対応する必要があります。新しい子は自動的にスロットされ、slotchange が発生するため、MutationObserver は必要ありません。

      this._tabSlot.addEventListener('slotchange', this._onSlotChange);
      this._panelSlot.addEventListener('slotchange', this._onSlotChange);
    }

connectedCallback() は、タブとパネルを並べ替えてグループ化し、1 つのタブのみアクティブになるようにします。

    connectedCallback() {

矢印キーやホーム / 終了で切り替えられるようにするために、要素で手動入力イベント処理を行う必要があります。

      this.addEventListener('keydown', this._onKeyDown);
      this.addEventListener('click', this._onClick);

      if (!this.hasAttribute('role'))
        this.setAttribute('role', 'tablist');

最近まで、パーサーによって要素がアップグレードされたときに slotchange イベントは発生しませんでした。このため、要素からハンドラを手動で呼び出します。新しい動作がすべてのブラウザで実装されたら、以下のコードは削除できます。

      Promise.all([
        customElements.whenDefined('howto-tab'),
        customElements.whenDefined('howto-panel'),
      ])
        .then(() => this._linkPanels());
    }

disconnectedCallback() は、connectedCallback() が追加したイベントリスナーを削除します。

    disconnectedCallback() {
      this.removeEventListener('keydown', this._onKeyDown);
      this.removeEventListener('click', this._onClick);
    }

_onSlotChange() は、Shadow DOM スロットのいずれかで要素を追加または削除するたびに呼び出されます。

    _onSlotChange() {
      this._linkPanels();
    }

_linkPanels() は、aria-control と aria-labelledby を使用して、タブを隣接するパネルにリンクします。また、このメソッドでは、1 つのタブのみがアクティブになります。

    _linkPanels() {
      const tabs = this._allTabs();

各パネルに、そのパネルを制御するタブを参照する aria-labelledby 属性を設定します。

      tabs.forEach((tab) => {
        const panel = tab.nextElementSibling;
        if (panel.tagName.toLowerCase() !== 'howto-panel') {
          console.error(`Tab #${tab.id} is not a` +
            `sibling of a <howto-panel>`);
          return;
        }

        tab.setAttribute('aria-controls', panel.id);
        panel.setAttribute('aria-labelledby', tab.id);
      });

この要素は、いずれかのタブが選択済みとしてマークされているかどうかを確認します。選択されていない場合は、最初のタブが選択されます。

      const selectedTab =
        tabs.find((tab) => tab.selected) || tabs[0];

次に、選択したタブに切り替えます。_selectTab() は、他のすべてのタブの選択を解除し、他のすべてのパネルを非表示にします。

      this._selectTab(selectedTab);
    }

_allPanels() は、タブパネル内のすべてのパネルを返します。この関数は、DOM クエリがパフォーマンスの問題になった場合に結果を記憶できます。記憶の欠点は、動的に追加されたタブとパネルが処理されないことです。

これはメソッドであり、ゲッターではありません。ゲッターとは、読み取りが安価であることを示唆するからです。

    _allPanels() {
      return Array.from(this.querySelectorAll('howto-panel'));
    }

_allTabs() は、タブパネル内のすべてのタブを返します。

    _allTabs() {
      return Array.from(this.querySelectorAll('howto-tab'));
    }

_panelForTab() は、指定されたタブが制御するパネルを返します。

    _panelForTab(tab) {
      const panelId = tab.getAttribute('aria-controls');
      return this.querySelector(`#${panelId}`);
    }

_prevTab() は、現在選択されているタブより前のタブを返し、最初のタブに到達するとラップアラウンドします。

    _prevTab() {
      const tabs = this._allTabs();

findIndex() を使用して、現在選択されている要素のインデックスを確認し、そのインデックスを引いて前の要素のインデックスを取得します。

      let newIdx = tabs.findIndex((tab) => tab.selected) - 1;

tabs.length を追加してインデックスが正の数になるようにし、必要に応じてラップアラウンドする係数を取得します。

      return tabs[(newIdx + tabs.length) % tabs.length];
    }

_firstTab() は最初のタブを返します。

    _firstTab() {
      const tabs = this._allTabs();
      return tabs[0];
    }

_lastTab() は最後のタブを返します。

    _lastTab() {
      const tabs = this._allTabs();
      return tabs[tabs.length - 1];
    }

_nextTab() は、現在選択されているタブの後に来るタブを取得し、最後のタブに到達するとラップアラウンドします。

    _nextTab() {
      const tabs = this._allTabs();
      let newIdx = tabs.findIndex((tab) => tab.selected) + 1;
      return tabs[newIdx % tabs.length];
    }

reset(): すべてのタブの選択を解除し、すべてのパネルを非表示にします。

    reset() {
      const tabs = this._allTabs();
      const panels = this._allPanels();

      tabs.forEach((tab) => tab.selected = false);
      panels.forEach((panel) => panel.hidden = true);
    }

_selectTab() は、指定したタブを選択済みとしてマークします。また、指定したタブに対応するパネルも再表示されます。

    _selectTab(newTab) {

すべてのタブの選択を解除し、すべてのパネルを非表示にします。

      this.reset();

newTab が関連付けられているパネルを取得します。

      const newPanel = this._panelForTab(newTab);

このパネルが存在しない場合は、中止します。

      if (!newPanel)
        throw new Error(`No panel with id ${newPanelId}`);
      newTab.selected = true;
      newPanel.hidden = false;
      newTab.focus();
    }

_onKeyDown() は、タブパネル内のキーの押下を処理します。

    _onKeyDown(event) {

キー操作がタブ要素自体によるものでない場合は、パネル内または空白スペースでのキー操作です。何もする必要はありません。

      if (event.target.getAttribute('role') !== 'tab')
        return;

支援技術で一般的に使用される修飾ショートカットを処理しません。

      if (event.altKey)
        return;

スイッチケースは、押されたキーに応じて、どのタブをアクティブとしてマークするかを決定します。

      let newTab;
      switch (event.keyCode) {
        case KEYCODE.LEFT:
        case KEYCODE.UP:
          newTab = this._prevTab();
          break;

        case KEYCODE.RIGHT:
        case KEYCODE.DOWN:
          newTab = this._nextTab();
          break;

        case KEYCODE.HOME:
          newTab = this._firstTab();
          break;

        case KEYCODE.END:
          newTab = this._lastTab();
          break;

その他のキー入力はすべて無視され、ブラウザに渡されます。

        default:
          return;
      }

ブラウザには、矢印キーや Home キー、End キーにバインドされたネイティブ機能がある場合があります。要素は preventDefault() を呼び出して、ブラウザが何も実行できないようにします。

      event.preventDefault();

switch-case で決定されている新しいタブを選択します。

      this._selectTab(newTab);
    }

_onClick() はタブパネル内のクリックを処理します。

    _onClick(event) {

クリックがタブ要素そのものをターゲットにしていない場合は、パネル内または空白スペースのクリックに該当します。何もする必要はありません。

      if (event.target.getAttribute('role') !== 'tab')
        return;

タブ要素であった場合は、そのタブを選択します。

      this._selectTab(event.target);
    }
  }

  customElements.define('howto-tabs', HowtoTabs);

howtoTabCounter は、作成された <howto-tab> インスタンスの数をカウントします。この数値は、新しい一意の ID を生成するために使用されます。

  let howtoTabCounter = 0;

HowtoTab は <howto-tabs> タブパネルのタブです。JavaScript が失敗してもセマンティクスを引き続き使用できるように、マークアップで <howto-tab> は常に role="heading" とともに使用する必要があります。

<howto-tab> は、パネルの ID を aria-controls 属性の値として使用することで、どの <howto-panel> に属するかを宣言します。

指定しない場合は、<howto-tab> によって自動的に一意の ID が生成されます。

  class HowtoTab extends HTMLElement {

    static get observedAttributes() {
      return ['selected'];
    }

    constructor() {
      super();
    }

    connectedCallback() {

これを実行すると、JavaScript が動作し、要素のロールが tab に変わります。

      this.setAttribute('role', 'tab');
      if (!this.id)
        this.id = `howto-tab-generated-${howtoTabCounter++}`;

明確に定義された初期状態を設定します。

      this.setAttribute('aria-selected', 'false');
      this.setAttribute('tabindex', -1);
      this._upgradeProperty('selected');
    }

プロパティにインスタンス値があるかどうかを確認します。その場合は値をコピーし、インスタンスプロパティを削除して、クラスプロパティセッターがシャドーイングされないようにします。最後に、値をクラスプロパティセッターに渡して、副作用がトリガーされるようにします。これは、たとえばフレームワークがページに要素を追加してそのプロパティのいずれかに値を設定したが、その定義を遅延読み込みした場合などを防ぐための対策です。このガードがないと、アップグレードされた要素がプロパティを見逃し、インスタンスプロパティによってクラスプロパティセッターが呼び出されなくなります。

    _upgradeProperty(prop) {
      if (this.hasOwnProperty(prop)) {
        let value = this[prop];
        delete this[prop];
        this[prop] = value;
      }
    }

プロパティとそれに対応する属性は、互いにミラーリングする必要があります。そのため、selected のプロパティセッターは truthy/falsy 値を処理し、それらを属性の状態に反映させます。プロパティセッターでは副作用が発生しません。たとえば、セッターは aria-selected を設定しません。その処理は attributeChangedCallback で行われます。原則として、プロパティセッターは非常に扱いにくくなります。また、プロパティや属性の設定で副作用（対応する ARIA 属性の設定など）を発生させる場合は、attributeChangedCallback() で行います。これにより、複雑な属性/プロパティの再入力のシナリオを管理する必要がなくなります。

    attributeChangedCallback() {
      const value = this.hasAttribute('selected');
      this.setAttribute('aria-selected', value);
      this.setAttribute('tabindex', value ? 0 : -1);
    }

    set selected(value) {
      value = Boolean(value);
      if (value)
        this.setAttribute('selected', '');
      else
        this.removeAttribute('selected');
    }

    get selected() {
      return this.hasAttribute('selected');
    }
  }

  customElements.define('howto-tab', HowtoTab);

  let howtoPanelCounter = 0;

HowtoPanel は <howto-tabs> タブパネルのパネルです。

  class HowtoPanel extends HTMLElement {

    constructor() {
      super();
    }

    connectedCallback() {
      this.setAttribute('role', 'tabpanel');
      if (!this.id)
        this.id = `howto-panel-generated-${howtoPanelCounter++}`;
    }
  }

  customElements.define('howto-panel', HowtoPanel);
})();

ハウツー コンポーネント – ハウツータブ

概要

リファレンス

デモ

使用例

コード

ハウツーコンポーネント – ハウツータブ