我正试图了解<dialog>html元素和MDN在这里列出的示例。
当我从中运行代码时…
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模态示例所述。他们说当用户按下标签键时：
当焦点在对话框中最后一个可聚焦元素上时，移动焦点到对话框中的第一个可聚焦元素。
然而对话框元素的MDN示例允许用户"；tab out"；并进入浏览器框架。在我的情况下，使用chrome，在确认按钮后按下选项卡将聚焦"；查看站点信息"；按钮，然后在文档区域外的地址栏上。
这里发生了什么。MDN的例子不完整吗？web开发人员是否需要编写额外的JS代码来真正关注陷阱，以便在生产中使用<dialog>元素？或者是"；"可接受"；从可访问性的角度来看，允许模态部分捕获焦点，如示例中所示，其中按下选项卡上的键可以临时转义到浏览器UI元素。
我发现当对话框打开时，焦点并没有完全"陷阱"；如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文档只是一个描述HTML规范中dialog的文档。
web开发人员是否需要编写额外的JS代码来真正聚焦陷阱，以便在生产中使用该元素？或者是"；"可接受"；从可访问性的角度来看，允许模态部分捕获焦点，如示例中所示，其中按下选项卡上的键可以临时转义到浏览器UI元素。
我想这取决于您和您的产品用户。大多数情况下，从可访问性的角度来看，建议将用户注意力集中在对话框中，并允许通过转义键、关闭按钮和取消按钮关闭对话框。
是的，您将不得不添加鼠标捕捉的自定义代码，无论是在javascript中还是在HTML中，通过添加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>