Vanilla javascript Trap 模式中的焦点（辅助功能选项卡）

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而不是keydown. keyup 仅在选项卡已触发后才会触发。但是，对代码进行更改会导致键盘被困在其中一个链接上。该代码有缺陷。

这是一些可以实现您想要的功能的代码（使用 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

单击彩色框中之一中的文本即可看到弹出的对话框。