React：如何制作可访问的菜单？

Posted 2023-02-19

【中文标题】React：如何制作可访问的菜单？

【英文标题】：React: How to make an accessible menu?

【发布时间】：2022-01-20 19:38:18

【问题描述】：

这是我的代码框链接：https://codesandbox.io/s/accessible-menu-ejzte

我有一个菜单，当您单击按钮时会弹出。它很实用，但我注意到它与我在网上找到的示例不同。

Menu.tsx 只是一个有孩子的ul：

    <Container
      role="menu"
      id=id
      ref=menu_ref
      is_visible=open
      onKeyDown=handleKeyPress
      onClick=(e: React.MouseEvent) => 
        e.stopPropagation();
        onClose();
      
      ...rest
    >
      children
    </Container>

MenuItem.tsx 是一个带有按钮的li：

const MenuItem = ( start_text, onClick : MenuItemProps) => (
  <Container role="none">
    <ClickableWrapper
      onClick=(e: React.MouseEvent) => onClick && onClick(e)
      role="menuitem"
    >
      <TextContainer>
        start_text && <StartText>start_text</StartText>
      </TextContainer>
    </ClickableWrapper>
  </Container>
);

但是，当我查看其他网站时，他们的菜单与我的不同：

https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html https://mui.com/components/menus/

我注意到了这些差异：

当您通过切换到按钮并按Enter 打开菜单时，第一个菜单项会自动聚焦 如果菜单打开并且您按下Esc，菜单将关闭并且按钮获得焦点

此功能是否来自 javascript？还是正确构建的菜单的默认行为？

我认为可访问的元素都可以通过原生 HTML 实现，但到目前为止我找不到我的 HTML 标记和上面 2 个示例之间的任何差异，所以这让我认为这只能通过 JS 来实现。

【参考方案1】：

您提供的示例使用的是 JS。

w3 示例： 要关闭 ESC，请参阅此文件：

https://www.w3.org/TR/wai-aria-practices/examples/menu-button/js/MenuItemLinks.js 并搜索“ESC”

要关注第一个孩子，请查看这两个文件并搜索“setFocusToFirstItem”：

https://www.w3.org/TR/wai-aria-practices/examples/menu-button/js/MenuItemLinks.js https://www.w3.org/TR/wai-aria-practices/examples/menu-button/js/PopupMenuLinks.js

对于 MUI 示例，您可以搜索源代码： https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/MenuList/MenuList.js

您必须更新您的沙箱，因为关闭 ESC 正在工作（通过 JS）。

【讨论】：

非常感谢您的链接！是的，关闭 ESC 是有效的，但它不像我给出的 2 个示例那样自动关注“打开”按钮。对我来说，如果我按 ESC，它会关闭菜单但没有任何焦点

没问题。是的，这里按下ESC时有一些JS关注按钮：w3.org/TR/wai-aria-practices/examples/menu-button/js/…。搜索 setFocusToController，该函数定义在这里：w3.org/TR/wai-aria-practices/examples/menu-button/js/…