<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> modallyupdateButton.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 buttonselectEl.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 标签中添加了对话框，它起作用了。

示例代码：

 <div>

   <Transition.Root show={true} as={Fragment}>

     <Dialog as="div">

       <Transition.Child></Transition.Child>

     </Dialog as="div"> 

   </Transition.Root show={true} as={Fragment}>  

</div>