如何让 primereact 菜单弹出窗口上的键盘制表符和 aria-labels 起作用？

Question

我希望能够使用键盘在按钮上按下回车键，然后通过相应的弹出菜单选择正确的选项。不幸的是，当我按下按钮上的 enter 键时，它会打开菜单弹出窗口，但不允许我在其中切换。

我的代码如下：

import { Button } from 'primereact/button';
import { Menu } from 'primereact/menu';

function Header() {
  const [menu, setMenu] = useState('');
  const testModelItems = [{label: 'Menu', items: [{label: 'Main 1'}, {label: 'Option 2'}]}];

  return (
    <div className={'menu-button-div'}>
      <Menu model={testModelItems} popup ref={(e) => setMenu(e)} id={'menu'} aria-labelledby={'menu-dropdown'}/>
      <Button aria-expanded={false} aria-labelledby={'menu-dropdown'} aria-controls={'menu'} aria-haspopup label={'Main Menu'} onClick={(e) => menu.toggle(e)}/>
    </div>
  )
}

Answer 1

要在 PrimeReact 菜单弹出窗口上启用键盘制表符和 ARIA 标签，您需要向 Button 和 Menu 组件添加几个属性。首先，对于 Button 组件，您应该添加属性 aria-haspopup="menu" 以指示按钮触发菜单。您还应该添加 aria-expanded 属性并将其值设置为 menu.visible 以指示菜单是打开还是关闭。接下来，对于 Menu 组件，您应该添加 aria-labelledby 属性并将其值设置为描述菜单的元素的 ID，在本例中为 Button 组件的 ID。我们还添加 role 属性并将其值设置为 menu 以指示这是一个菜单，并添加 tabIndex 属性并将其值设置为 0 以使菜单可聚焦

这就是它的样子：

import { Button } from 'primereact/button';
import { Menu } from 'primereact/menu';

function Header() {
  const [menu, setMenu] = useState('');
  const testModelItems = [{label: 'Menu', items: [{label: 'Main 1'}, {label: 'Option 2'}]}];

  return (
    <div className={'menu-button-div'}>
      <Menu model={testModelItems} popup ref={(e) => setMenu(e)} id={'menu'} aria-labelledby={'menu-dropdown'} role={'menu'} tabIndex={0} />
      <Button
        id={'menu-dropdown'}
        aria-haspopup="menu"
        aria-expanded={menu.visible}
        aria-controls={'menu'}
        aria-label={'Main Menu'}
        onClick={(e) => menu.toggle(e)}
      />
    </div>
  )
}

编辑：

试试这个

import { Button } from 'primereact/button';
import { Menu } from 'primereact/menu';

function Header() {
  const [menu, setMenu] = useState(null);
  const testModelItems = [    { label: 'Menu', items: [{ label: 'Main 1' }, { label: 'Option 2' }] },
  ];

  return (
    <div className={'menu-button-div'}>
      <Menu
        model={testModelItems}
        popup
        ref={(e) => setMenu(e)}
        id={'menu'}
        role={'menu'}
        aria-labelledby={'menu-dropdown'}
      >
        {testModelItems[0].items.map((item, index) => (
          <button
            key={index}
            tabIndex={0}
            role={'menuitem'}
            aria-label={item.label}
            onClick={() => menu.hide()}
          >
            {item.label}
          </button>
        ))}
      </Menu>
      <Button
        tabIndex={0}
        aria-haspopup={'true'}
        aria-controls={'menu'}
        aria-expanded={menu ? menu.props.visible : false}
        aria-label={'Main Menu'}
        label={'Main Menu'}
        onClick={(e) => menu.toggle(e)}
      />
    </div>
  );
}