按下按鈕時如何專注於特定元素

Question

我有一個關閉畫布菜單（ #mobile-menu ），當單擊或按下按鈕/觸發器（ .mobile-menu-toggle ）等時它會打開。

菜單在鍵盤按下時可以正常打開，但它不會聚焦在菜單內，而是聚焦在文檔流中的下一個元素 - 菜單實際上位於文檔中的“觸發器”之前。

所以我正在尋找一種方法來在關閉畫布菜單時設置焦點。

我已經嘗試了很多變體，但沒有任何反應，焦點仍然是下一個元素，而不是我指定的元素：

$(document).on("keyup",".mobile-menu-toggle",function(e) {
    if (e.which == 13) {
        $("#mobile-menu ul").focus();
    }
});

這是 html 的簡化版本：

 <nav id="mobile-menu" aria-label="Main Mobile Navigation">
    <div class="content">
            
        <a href="#" aria-label="Mobile Homepage Link">... LOGO IMG ...</a>

        <span class="heading">Navigation</span>

        <ul class="page-navigation">
            ... NAV LINKS ...
        </ul>

    </div>
 </nav>
                    
<div id="mobile-nav-trigger">
    <button class="mobile-menu-toggle" aria-label="Open Menu"></button>
</div>

我還發現，如果我嘗試在移動菜單中的任何位置添加 tabindex，觸發器將不再在按鍵時打開它。

我怎樣才能讓觸發器打開菜單時焦點位於#mobile-menu 元素內？

Answer 1

嘗試在這里找到的解決方案后：stackoverflow.com/a/15338848/1783695，這給了我一些想法......這個解決方案有效，但它也通過鼠標點擊將焦點放在了這里，我只想把焦點放在鍵盤上按。

所以我最終得到了這個，它完全按照我的需要工作：

var input = document.getElementById("mobile-menu-toggle");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        $('.heading.focusable')[0].focus();
    }
});

注意：我將類“focusable”和 tabindex 添加到“導航”標題（我們有多個“標題”元素），因此它可以集中在那里：

<span class="heading focusable" tabindex="0">Navigation</span>

Answer 2

一種選擇是為鼠標用戶關閉焦點指示器並為鍵盤 (TAB) 用戶打開它們。

您需要將以下類添加到樣式表中：

body.focusIndicatorOff :focus { outline: 0; }

此樣式隱藏正文中具有焦點的任何元素的焦點指示符。 接下來，添加以下內容：

1. 將上面顯示的.focusIndicatorOff類樣式添加到您的樣式表中。
2. 將focusIndicatorOff類添加到body元素。 當您的頁面加載時，所有元素的焦點指示器都將隱藏。
3. 將按鍵偵聽器添加到偵聽 TAB 按下的body 。
4. 將鼠標單擊偵聽器添加到偵聽鼠標單擊的body 。
5. 當檢測到 TAB 按下時，從body刪除focusIndicatorOff類。 這將使焦點指示器可見。
6. 當檢測到鼠標單擊時，將focusIndicatorOff類添加到body 。 這將隱藏焦點指示器。

有了這個實現，更新你的菜單按鈕點擊事件以簡單地將焦點強制到“導航”菜單標題。 您不必擔心聽到按鍵上的按鍵，只需移動焦點即可。 我上面描述的代碼將檢測用戶是使用鼠標還是鍵盤，並隱藏或顯示焦點指示器以滿足他們的需要。

最后一項：我建議您在“導航”標題上使用tabindex="-1" 。 使用“-1”可以強制重心的元素，但不會將其添加到自然的Tab鍵順序。