當我從中運行代碼時......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>...我發(fā)現(xiàn)當對話框打開時，焦點并不像ARIA 模式示例描述的那樣完全&ldquo;陷入&rdquo;。他們說當用戶按下 Tab 鍵時：當焦點位于對話框中最后一個可聚焦元素上時，將焦點移動到對話框中第一個可聚焦元素。然而，對話框元素的 MDN 示例允許用戶&ldquo;跳出&rdquo;模式并進入瀏覽器框架。就我而言，使用 Chrome，在確認按鈕按下選項卡后，將聚焦于&ldquo;查看站點信息&rdquo;按鈕，然后聚焦于文檔區(qū)域之外的地址欄。這里發(fā)生了什么。MDN 的示例不完整嗎？為了<dialog>在生產(chǎn)中使用該元素，Web 開發(fā)人員是否需要編寫額外的 JS 代碼來真正聚焦陷阱？或者從可訪問性的角度來看，允許模式部分捕獲焦點（如示例中所示）是否&ldquo;可接受&rdquo;，其中選項卡上的按鍵可以暫時轉義到瀏覽器 UI 元素。