Web ページにフォーカス トラップ機(jī)能を?qū)g裝する場合、一般的な問題が発生します。ユーザーが Tab キーを使用してフォーカス可能な最後の要素に移動(dòng)すると、フォーカスは最後の要素を離れた後にループするのではなく、すぐに最初の要素に戻ります。この記事では、この現(xiàn)象を詳しく分析し、その根本原因が「keyup」イベントとブラウザのデフォルト動(dòng)作の間のタイミングの競合であることを指摘します。 「keydown」イベントに切り替えて「e.preventDefault()」を正しく使用することで、フォーカス フローを正確に制御し、スムーズで期待どおりのフォーカス サイクルを?qū)g現(xiàn)することができ、Web アプリケーションのアクセシビリティが大幅に向上します。

フォーカス トラップとその重要性を理解する

モーダル フォーカス管理とも呼ばれるフォーカス トラップは、主に Web アプリケーションのアクセシビリティを強(qiáng)化するために使用される重要なフロントエンド開発テクノロジです。ユーザーがモーダル ダイアログ ボックス、ポップアップ メニュー、または操作に集中力が必要な UI コンポーネントを開くと、フォーカス トラップによってキーボード フォーカスがそのコンポーネントに制限されます。これは、ユーザーが Tab キーまたは Shift Tab キーを使用してコンポーネントの外側(cè)の要素にフォーカスを移動(dòng)できないことを意味し、フォーカスの喪失とユーザー エクスペリエンスの混亂を回避します。これは、キーボード ナビゲーションに依存するユーザー、特にスクリーン リーダーを使用するユーザーにとって重要です。

問題分析: キーアップ イベントとフォーカス ループ間の競合

フォーカス トラップを?qū)g裝する場合の一般的な要件は、フォーカスがコンポーネント內(nèi)の最後のフォーカス可能な要素に到達(dá)した後、再度 Tab キーを押すと、フォーカスが最初のフォーカス可能な要素に戻ることができることです。逆に、最初の要素で Shift Tab キーを押すと、フォーカスが最後の要素に切り替わります。

ただし、よくある問題は、keyup イベントを使用して Tab キーをリッスンし、最後の要素から最初の要素にフォーカスを循環(huán)させようとすると、ユーザーが最後の要素を「離れる」ときにループが発生するのではなく、最後の要素に「著地」した瞬間にフォーカスがすぐに最初の要素に戻ることに気づくことです。

典型的な欠陥のある実裝を見てみましょう。

 const 要素 = document.getElementById("プロンプトダイアログ");
const focusableElements = element.querySelectorAll("span:not([無効])");

const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];

element.addEventListener("keyup", function(e) {
  if (e.key === "タブ") {
    // 最後の要素にフォーカスがある場合 if (document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus();
      e.preventDefault(); // デフォルトの動(dòng)作を阻止しようとしましたが、手遅れです}
  }
});

この問題はなぜ起こるのでしょうか?

問題の根本は、Tab キーを処理する際のブラウザのデフォルト動(dòng)作と keyup イベントのトリガー タイミングにあります。

1. Tab キー ダウン (keydown) : ユーザーが Tab キーを押すと、ブラウザはすぐにデフォルトの動(dòng)作を?qū)g行し、フォーカスを次のフォーカス可能な要素に移動(dòng)します。
2. フォーカス移動(dòng): このとき、現(xiàn)在のフォーカスが最後から 2 番目の要素にある場合、Tab キーを押すと、フォーカスはすぐに最後の要素に移動(dòng)します。
3. Tab キーのリリース (keyup) : keyup イベントは、ユーザーが Tab キーを放したときにのみトリガーされます。
4. イベント処理: この時(shí)點(diǎn)で、document.activeElement はすでに最後の要素を指しています。イベント リスナーはこれを検出し、firstFocusableElement.focus() を?qū)g行して、フォーカスを最初の要素に強(qiáng)制的に戻します。

したがって、ユーザーが観察する現(xiàn)象は、Tab キーが押されるとすぐにフォーカスが最後の要素に到達(dá)し、Tab キーが放されるとすぐにフォーカスが最初の要素に強(qiáng)制的に戻されることです。その結(jié)果、フォーカスが「すぐに戻る」という認(rèn)識が生じ、「最後の要素を離れるまでループしない」という望ましい動(dòng)作と矛盾します。

解決策: キーダウン イベントを利用する

この問題を解決する鍵は、イベント リスニングのタイミングを変更することです。ブラウザが Tab キーによるデフォルトのフォーカス移動(dòng)動(dòng)作を?qū)g行する前に、介入してフォーカスを制御する必要があります。 keydown イベントはまさにこの機(jī)會(huì)を提供します。

keydown イベントを使用すると、Tab キーが押されたときにロジックを?qū)g行できますが、ブラウザーはデフォルトのフォーカス転送動(dòng)作をまだ処理していません。 e.preventDefault() と組み合わせると、ブラウザのデフォルト動(dòng)作を完全に防止し、フォーカスを手動(dòng)で管理できます。

修正されたコードの実裝は次のとおりです。

 const 要素 = document.getElementById("プロンプトダイアログ");
// tabindex を持つ非ネイティブのフォーカス可能な要素を含むすべてのフォーカス可能な要素を必ず取得する const focusableElements = element.querySelectorAll("span[tabindex]:not([disabled]), button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href]:not([無効])");

const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];

element.addEventListener("keydown", function(e) {
  if (e.key === "タブ") {
    // Forward Tab ループ: フォーカスが最後の要素にある場合、Tab キーはフォーカスを最初の要素に移動(dòng)します if (!e.shiftKey && document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus();
      e.preventDefault(); // ブラウザのデフォルトのフォーカス転送を防止します}
    // Reverse Tab ループ: フォーカスが最初の要素にある場合、Shift Tab キーはフォーカスを最後の else に移動(dòng)します if (e.shiftKey && document.activeElement === firstFocusableElement) {
      lastFocusableElement.focus();
      e.preventDefault(); // ブラウザのデフォルトのフォーカス転送を防止します}
  }
});

この改訂版では次のようになります。

1. ユーザーが Tab キーを押すと、keydown イベントがすぐに発生します。
2. document.activeElement が lastFocusableElement で、Shift キーが押されていない場合 (Tab キーを押す)、手動(dòng)でフォーカスを firstFocusableElement に設(shè)定します。
3. 最も重要なのは、e.preventDefault() を呼び出したことです。これにより、ブラウザーはキーダウン イベント後にデフォルトのフォーカス転送動(dòng)作を?qū)g行できなくなります。したがって、フォーカスは、中間の「ジャンプ」を行わずに、ロジックに従って正確に最後の要素から最初の要素にジャンプします。
4. さらに改善するために、Shift Tab 逆ループのサポートも追加しました。フォーカスが最初の要素にあるときに Shift Tab を押すと、最後の要素に移動(dòng)します。

HTML構(gòu)造例

上記の JavaScript コードが適切に動(dòng)作するには、HTML 構(gòu)造にフォーカス可能な要素が含まれている必要があり、イベントをリッスンするためにそれらの要素が親コンテナー內(nèi)に存在する必要があります。例えば：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="PromptsDialog" style="表示: ブロック; ボーダー: 1px ソリッド #ccc; パディング: 20px; 幅: 300px; マージン: 50px auto;">
  <div class="プロンプトタイトルバー">
    <h4 style="margin-top:-4px;">オプション プロンプト</h4>
    <div id="プロンプトコマンド">
      <div style="display: flex; justify-content: space-around; margin-top: 15px;">
        <span type="" tabindex="1" data-toggle="tooltip" data-placement="top" title="保存" class="command-icon" id="btnSaveWindow"><i class="fa fa-save"></i></span>
        <span type="" tabindex="2" data-toggle="tooltip" data-placement="top" title="項(xiàng)目を削除" class="command-icon" id="btnRemoveFromItemsGrid"><i class="fa fa-trash"></i></span>
        <span type="" tabindex="3" data-toggle="tooltip" data-placement="top" title="Close" class="command-icon" id="btnClosePromptDialog"><i class="fa fa-remove"></i></span>
      </div>
    </div>
  </div>
</div>


  .command-icon {
    カーソル: ポインタ;
    パディング: 8px;
    境界線: 1 ピクセルの透明な実線。
    境界半徑: 4px;
    トランジション: すべて 0.2 秒のイーズインアウト。
  }
  .command-icon:focus {
    アウトライン: 2px ソリッド #007bff;
    境界線の色: #007bff;
  }
スタイル>

この HTML 構(gòu)造では、 要素は tabindex 屬性を通じてフォーカス可能になります。これは、カスタム コントロールがフォーカス管理を?qū)g現(xiàn)するために重要です。

注意すべき點(diǎn)とベストプラクティス

1. フォーカス可能な要素を正確に識別する: querySelectorAll のセレクターは、a[href]、button、input、select、textarea、tabindex 屬性を持つ要素など、フォーカスを受け取る可能性のあるすべての要素をカバーする、可能な限り包括的なものである必要があります。
2. 動(dòng)的コンテンツの処理: フォーカス トラップ內(nèi)のコンテンツが動(dòng)的にロードまたは削除される場合は、コンテンツの変更後に focusableElements 配列を更新できるようにする必要があります。
3. WAI-ARIA ロール: モーダル ダイアログ ボックスなどの複雑なコンポーネントの場合は、WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) のロールと屬性 (role="dialog"、aria-modal="true" など) を組み合わせて、支援技術(shù)により豊富なセマンティック情報(bào)を提供することをお?jiǎng)幛幛筏蓼埂?/li>
4. イベント リスナーのクリーニング: モーダル ボックスまたはポップアップ レイヤーが閉じられるとき、メモリ リークや不要なパフォーマンス オーバーヘッドを避けるために、対応するイベント リスナーを削除する必要があります。
5. ブラウザ間の互換性: e.key は最新のブラウザで広くサポートされていますが、古いブラウザをサポートする必要がある場合は、e.keyCode または e.that を検討することをお?jiǎng)幛幛筏蓼埂?/li>

要約する

フォーカス トラップを正しく実裝することは、Web アプリケーションのアクセシビリティを向上させるために重要です。ブラウザーのフォーカス管理におけるキーダウン イベントとキーアップ イベントのタイミングの違いを理解することで、一般的なフォーカス ループの問題を回避できます。イベント リスニングをキーアップからキーダウンに切り替えると、e.preventDefault() と組み合わせることで、フォーカス ループの動(dòng)作を正確に制御し、すべてのユーザーにスムーズで予測可能なキーボード ナビゲーション エクスペリエンスを提供します。

以上がJavaScript フォーカス トラップ: Tab キー サイクルでの即時(shí)ジャンプの問題を解決するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。