使用 React Hooks 建立可存取的導覽功能表欄

不小心發佈了！請稍後回來了解更多！

介紹

建立可存取的 Web 應用程式不僅是一種好的做法，而且現在是一種必要。最近，我有機會建立一個專注於 a11y 的導覽功能表列。當我進行研究時，我意識到大多數功能表列都不符合 ARIA 模式。例如，您是否知道應該使用箭頭鍵導覽功能表列並管理自己的焦點，而不是透過選項卡瀏覽選單項目？

雖然我確實找到了一些教程，但我最終沒有完全遵循它們。我寫這篇文章是因為我認為我最終構建的內容值得分享 - 如果您也對小型組件和自定義掛鉤有興趣。

雖然我將透過一些開發步驟來建立這個博客，但我的目標不是編寫逐步指南。我相信您了解 React 基礎知識以及自訂鉤子的工作原理。

我現在只分享關鍵的實作細節，但我計劃將來當我有更多時間時用程式碼沙箱範例更新本文。

我們正在建設什麼？

對於這個博客，我們正在建立一個導航功能表欄，就像您在許多網路應用程式的頂部或側面看到的那樣。在此選單列中，某些選單項目可能有子選單，這些子選單將在滑鼠進入/離開時開啟/關閉。

HTML 標記

首先，語意 HTML 和適當的角色以及 ARIA 屬性對於可訪問性至關重要。對於功能表列模式，您可以在此處閱讀官方文件的更多內容。

以下是適當 HTML 標籤的範例：

<nav aria-label="Accessible Menubar">
  <menu role="menubar">
    <li role="none">
      <a role="menuitem" href="/">Home</a>
    </li>
    <li role="none">
      <a role="menuitem" href="/about">About</a>
    </li>
    <li role="none">
      <button 
        role="menuitem" 
        aria-haspopup="true"
        aria-expanded="false"
      >
        Expand Me!
      </button>
      <menu role="menu">
        <li role="none">
          <a role="menuitem" href="/sub-item-1">Sub Menu Item 1</a>
        </li>
        <li role="none">
          <a role="menuitem" href="/sub-item-2">Sub Menu Item 2</a>
        </li>
      </menu>
    </li>
  </menu>
</nav>

請注意，我們正在使用語意 HTML 的按鈕標籤。該按鈕還應該有 aria-haspopup 來提醒螢幕閱讀器。最後，應根據選單狀態指派適當的 aria-expanded 屬性。

成分

讓我們來看看我們需要的組件。顯然，我們需要一個整體選單元件，以及一個選單項目元件。

有些選單項目有子選單，有些則沒有。帶有子選單的選單項目需要管理其狀態，以便在懸停和鍵盤事件時開啟/關閉子選單。所以它需要有自己的組件。

子選單也需要是它自己的組件。儘管子選單也只是選單項目的容器，但它們不管理其狀態或處理鍵盤事件。這將它們與頂級導航選單區分開來。

我最後寫了這些元件：

• NavMenu 用於選單列的最外層。
• MenuItem 用於單一選單項目。
  • 選單項目連結
  • 選單項目與子選單
• SubMenu 用於展開的子選單。 MenuItem 可以遞歸巢狀在子選單中。

焦點管理

簡單來說，「焦點管理」只是意味著元件需要知道哪個子元件擁有焦點。因此，當使用者的焦點離開並返回時，先前聚焦的子級將重新聚焦。

焦點管理的常用技術是“Roving Tab Index”，其中群組中焦點元素的 Tab 索引為 0，其他元素的 Tab 索引為 -1。這樣，當使用者返回焦點群組時，選項卡索引為 0 的元素將自動獲得焦點。

NavMenu 的第一個實作可能如下：

export function NavMenu ({ menuItems }) {
  // state for the currently focused index
  const [focusedIndex, setFocusedIndex] = useState(0);

  // functions to update focused index
  const goToStart = () => setCurrentIndex(0);
  const goToEnd = () => setCurrentIndex(menuItems.length - 1);
  const goToPrev = () => {
    const index = currentIndex === 0 ? menuItems.length - 1 : currentIndex - 1;
    setCurrentIndex(index);
  };
  const goToNext = () => {
    const index = currentIndex === menuItems.length - 1 ? 0 : currentIndex + 1;
    setCurrentIndex(index);
  };

  // key down handler according to aria specification
  const handleKeyDown = (e) => {
    e.stopPropagation();
    switch (e.code) {
      case "ArrowLeft":
      case "ArrowUp":
        e.preventDefault();
        goToPrev();
        break;
      case "ArrowRight":
      case "ArrowDown": 
        e.preventDefault();
        goToNext();
        break;
      case "End":
        e.preventDefault();
        goToEnd();
        break;
      case "Home":
        e.preventDefault();
        goToStart();
        break;
      default:
        break;
    }
  }

  return (
    <nav>
      <menu role="menubar" onKeyDown={handleKeyDown}>
        {menuItems.map((item, index) => 
          <MenuItem
            key={item.label}
            item={item}
            index={index}
            focusedIndex={focusedIndex}
            setFocusedIndex={setFocusedIndex}
          />
        )}
      </menu>
    </nav>
  );
}

e.preventDefault() 的作用是防止 ArrowDown 滾動頁面之類的事情。

這是 MenuItem 元件。讓我們暫時忽略帶有子選單的項目。當 focusIndex 改變時，我們使用 useEffect、usePrevious 和 element.focus() 來聚焦於元素：

export function MenuItem ({ item, index, focusedIndex, setFocusedIndex }) {
  const linkRef = useRef(null);
  const prevFocusedIndex = usePrevious(focusedIndex);
  const isFocused = index === focusedIndex;

  useEffect(() => {
    if (linkRef.current 
      && prevFocusedIndex !== currentIndex 
      && isFocused) {
      linkRef.current.focus()
    }
  }, [isFocused, prevFocusedIndex, focusedIndex]);

  const handleFocus = () => {
    if (focusedIndex !== index) {
      setFocusedIndex(index);
    }
  };

  return (
    <li role="none">
      <a 
        ref={linkRef} 
        role="menuitem"
        tabIndex={isFocused ? 0 : -1}
        onFocus={handleFocus}
      >
        {item.label}
      </a>
    </li>
  );
}

請注意，a 標籤應該具有 ref （帶有子選單的選單項目的按鈕），因此當它們被聚焦時，預設鍵盤行為將按預期啟動，例如 Enter 上的導航。此外，根據焦點元素正確分配選項卡索引。

我們正在為焦點事件新增一個事件處理程序，以防焦點事件不是來自按鍵/滑鼠事件。以下是網頁文檔中的引用：

不要假設所有焦點變更都將透過按鍵和滑鼠事件實現：螢幕閱讀器等輔助技術可以將焦點設定到任何可聚焦元素。

調整#1

如果您遵循上述 useEffect，您會發現即使使用者沒有使用鍵盤進行導航，第一個元素也會獲得焦點。為了解決這個問題，我們可以檢查活動元素，並且僅在使用者啟動某些鍵盤事件時調用 focus() ，這會將焦點從主體上移開。

  useEffect(() => {
    if (linkRef.current 
      && document.activeElement !== document.body // only call focus when user uses keyboard navigation
      && prevFocusedIndex !== focusedIndex
      && isCurrent) {
      linkRef.current.focus();
    }
  }, [isCurrent, focusedIndex, prevFocusedIndex]);

Logic Reuse and Custom Hook

So far, we have functional NavMenu and MenuItemLink components. Let's move on to menu item with sub menus.

As I was quickly building it out, I realized that this menu item will share the majority of the logic

以上是使用 React Hooks 建立可存取的導覽功能表欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！