如何關注第二個彈出窗口，在第一個彈出窗口中打開angular-ui-bootstrap模態指令時的第一個彈出窗口

Question

我對場景有興趣，我想在彈出窗口中顯示彈出窗口，其中包含可訪問性投訴。

第一個彈出窗口工作正常，如果我從第一個彈出窗口打開第二個彈出窗口仍然是第一個彈出窗口中的焦點，它不會移動到第二個彈出窗口，您可以幫助m對它。

我發現幾個參考，但那些使用jquery bootstrap，但我使用angular-ui-bootstrap。

在此先感謝。

Answer 1

焦點通常會通過可聚焦項目（例如按鈕，鏈接和輸入）按照它們在HTML中呈現的順序移動。這是一個例外，當你用Javascript移動焦點時。

你的設置似乎沒有專注於模態;它到達第一個，因爲它在HTML中是下一個。但是第二種模式的生成方式不同，所以焦點無法找到它，因爲它沒有添加到HTML中（我想;這可能就是Plunker在創建模式時不會更新index.html）。如果您在示例中關閉CSS，則可以更輕鬆地看到實際操作。

因此，第1步將確保內容在HTML中，因此焦點可以達到它。通常這是在Javascript中使用append（）。下一步是將焦點發送到您想要的HTML部分，而不是讓HTML順序控制它。

將焦點發送到需要的地方的最簡單方法是使用鏈接

<a href="#myModal">open popup window</a> 
<a href="#my2ndModal">open me</a> 

然後確保您的div可以使用tabindex屬性獲得焦點。

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="#modalHeading" id="myModal"> 
    <h4 id="modalHeading>Dialog Title</h4> 
    ... content... 
</div> 

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal2Heading" id="my2ndModal"> 
    <h4 id="modal2Heading>2nd Dialog Title</h4> 
    ...content... 
</div> 

下一步是確保重點仍然是目前的模式裏面，而它是開放的，所以也沒有循環回你的「打開引導彈出」按鈕或其他可聚焦的項目，可以不看到。這通常通過keyPress handler完成。

第一個模態div中的「文檔」的ARIA角色是沒有必要的。我認爲這沒有什麼不妥，這只是誤導，因爲它會告訴屏幕閱讀器軟件，您已經從瀏覽應用程序切換到瀏覽頁面。如果你使用role =「dialog」，你也必須有一個aria-labelledby屬性。