<dialog> 上的焦点陷阱不是绝对的，焦点转义到浏览器 UI 元素

Question

当我从中运行代码时......

var updateButton = document.getElementById('updateDetails');

var favDialog = document.getElementById('favDialog');

var outputBox = document.querySelector('output');

var selectEl = document.querySelector('select');

var confirmBtn = document.getElementById('confirmBtn');

// "Update details" button opens the <dialog> modally

updateButton.addEventListener('click', function onOpen() {

  if (typeof favDialog.showModal === "function") {

    favDialog.showModal();

  } else {

    alert("The <dialog> API is not supported by this browser");

  }

});

// "Favorite animal" input sets the value of the submit button

selectEl.addEventListener('change', function onSelect(e) {

  confirmBtn.value = selectEl.value;

});

// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]

favDialog.addEventListener('close', function onClose() {

  outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();

});

<!-- Simple pop-up dialog box containing a form -->

<dialog id="favDialog">

  <form method="dialog">

    <p><label>Favorite animal:

      <select>

        <option></option>

        <option>Brine shrimp</option>

        <option>Red panda</option>

        <option>Spider monkey</option>

      </select>

    </label></p>

    <menu>

      <button value="cancel">Cancel</button>

      <button id="confirmBtn" value="default">Confirm</button>

    </menu>

  </form>

</dialog>

<menu>

  <button id="updateDetails">Update details</button>

</menu>

<output aria-live="polite"></output>

...我发现当对话框打开时，焦点并不像ARIA 模式示例描述的那样完全&ldquo;陷入&rdquo;。他们说当用户按下 Tab 键时：

当焦点位于对话框中最后一个可聚焦元素上时，将焦点移动到对话框中第一个可聚焦元素。

然而，对话框元素的 MDN 示例允许用户&ldquo;跳出&rdquo;模式并进入浏览器框架。就我而言，使用 Chrome，在确认按钮按下选项卡后，将聚焦于&ldquo;查看站点信息&rdquo;按钮，然后聚焦于文档区域之外的地址栏。

这里发生了什么。MDN 的示例不完整吗？为了<dialog>在生产中使用该元素，Web 开发人员是否需要编写额外的 JS 代码来真正聚焦陷阱？或者从可访问性的角度来看，允许模式部分捕获焦点（如示例中所示）是否&ldquo;可接受&rdquo;，其中选项卡上的按键可以暂时转义到浏览器 UI 元素。

Answer 1

我发现当对话框打开时，焦点并不像ARIA 模式示例描述的那样完全“陷入”。这是因为 W3 指南上的示例确实有自定义 javascript来捕获对话框上的使用焦点。您可以看到评论中也提到了同样的内容：...// Bracket the dialog node with two invisible, focusable nodes.// While this dialog is open, we use these to make sure that focus never// leaves the document even if dialogNode is the first or last node.var preDiv = document.createElement('div');this.preNode = this.dialogNode.parentNode.insertBefore(preDiv, this.dialogNode);this.preNode.tabIndex = 0;var postDiv = document.createElement('div');this.postNode = this.dialogNode.parentNode.insertBefore(postDiv, this.dialogNode.nextSibling);this.postNode.tabIndex = 0;...这里发生了什么。MDN 的示例不完整吗？我不会说它不完整，但是两个指南都针对不同的受众，您提到的 w3 文档是可访问性指南，而 MDN 文档只是dialogHTML 规范中描述的文档。为了在生产中使用该元素，Web 开发人员是否需要编写额外的 JS 代码来真正聚焦陷阱？或者从可访问性的角度来看，允许模式部分捕获焦点（如示例中所示）是否“可接受”，其中选项卡上的按键可以暂时转义到浏览器 UI 元素。我想这取决于您和您的产品用户。大多数情况下，从可访问性的角度来看，建议将用户焦点捕获在对话框内，并允许通过转义键、关闭按钮和取消按钮来关闭对话框。是的，您必须添加用于鼠标捕获的自定义代码，无论是在 JavaScript 中还是在 HTML 中，方法是添加 2 个可聚焦元素，如您提到的辅助功能指南页面的示例中所示。

Answer 2

我只是在 div 标签中添加了对话框，它起作用了。示例代码：&nbsp;<div>&nbsp; &nbsp;<Transition.Root show={true} as={Fragment}>&nbsp; &nbsp; &nbsp;<Dialog as="div">&nbsp; &nbsp; &nbsp; &nbsp;<Transition.Child></Transition.Child>&nbsp; &nbsp; &nbsp;</Dialog as="div">&nbsp;&nbsp; &nbsp;</Transition.Root show={true} as={Fragment}>&nbsp;&nbsp;</div>