javascript - バニラ javascript モーダルでフォーカスをトラップする (アクセシビリティ タブ)

Question

これは非常に単純なはずですが、何らかの理由で機能していません。適切なタイミングで適切な console.logs を取得していますが、フォーカスが正しい場所に移動していません。私の jsfiddle を参照してください

https://jsfiddle.net/bqt0np9d/

function checkTabPress(e) {
    "use strict";
    // pick passed event of global event object
    e = e || event;

    if (e.keyCode === 9) {
        if (e.shiftKey) {
            console.log('back tab pressed');
            firstItem.onblur=function(){
                console.log('last a focus left');
                lastItem.focus();
            };
            e.preventDefault();
        }
        console.log('tab pressed');
        lastItem.onblur=function(){
            console.log('last a focus left');
            firstItem.focus();
        };
        e.preventDefault();
    }
}
modal.addEventListener('keyup', checkTabPress);

Answer 1

keyup問題の 1 つは、代わりに を使用していることですkeydown。キーアップは、タブが既に起動された後にのみ起動されます。ただし、コードにその変更を加えると、キーボードがリンクの 1 つに引っかかってしまいます。コードに欠陥があります。

ここにあなたが望むことをするコードがあります（jQueryを使用）

http://dylanb.github.io/javascripts/periodic-1.1.js

// Add keyboard handling for TAB circling

  $modal.on('keydown', function (e) {
    var cancel = false;
    if (e.ctrlKey || e.metaKey || e.altKey) {
      return;
    }
    switch(e.which) {
      case 27: // ESC
        $modal.hide();
        lastfocus.focus();
        cancel = true;
        break;
      case 9: // TAB
        if (e.shiftKey) {
          if (e.target === links[0]) {
            links[links.length - 1].focus();
            cancel = true;
          }
        } else {
          if (e.target === links[links.length - 1]) {
            links[0].focus();
            cancel = true;
          }
        }
        break;
    }
    if (cancel) {
      e.preventDefault();
    }
  });

ここで、このダイアログの作業バージョンを確認できます

http://dylanb.github.io/periodic-aria11-attributes.html

色付きのボックスのいずれかのテキストをクリックして、ダイアログ ポップアップを表示します。

Answer 2

はイベントe.preventDefault()に影響を与えませんkeyup(既定のブラウザー アクションが既に実行されているため)。

それにもかかわらず、あなたの例は機能します。ただし、モーダルの前後にリンクがある場合のみ

次のように HTML コードを変更すると、モーダルの前に 1 つのリンクを追加し、モーダルの後に 1 つのリンクを追加します。フォーカスがモーダルに閉じ込められていることがわかります。

 <a href="#">other link</a>
 <div id="modal">
     <a href="#">Link One</a>
     <a href="#">Link Two</a>
 </div>
 <a href="#">other link</a>

これは、このような場合に既定のブラウザー アクションがなく、防止するアクションがないためです。