Material UI Popover内按钮获Tab焦点时NVDA无法朗读的解决求助

问题核心原因 #

1. 手动给Material-UI Button添加了冗余的role="button"和tabIndex={0}，干扰了组件原生的无障碍语义与焦点行为
2. Popover打开后未主动将焦点转移至内部按钮，导致NVDA未触发焦点变化的自动朗读逻辑

解决方案 #

按以下步骤调整代码即可解决：

1. 移除Button上的冗余属性

Material-UI的Button组件默认渲染为原生<button>元素，自带可聚焦性和标准按钮语义，无需手动添加role="button"和tabIndex={0}。

2. Popover打开时自动聚焦内部按钮

使用React的useRef获取按钮实例，在Popover打开的时机主动设置焦点——这是无障碍弹窗的标准实现，能触发NVDA自动朗读聚焦元素。

3. 补充必要的ARIA属性

给Popover添加aria-modal="true"标记其为模态弹窗，配合aria-labelledby关联弹窗上下文标题，帮助屏幕阅读器准确识别弹窗场景。

修改后的代码示例 #

import { useRef, useEffect, useState } from 'react';
import Popover from '@mui/material/Popover';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

export default function AccessiblePopover() {
  const [open, setOpen] = useState(false);
  const anchorTriggerRef = useRef<HTMLButtonElement>(null);
  const editButtonRef = useRef<HTMLButtonElement>(null);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
    // 关闭弹窗后将焦点返回触发按钮，保证导航连贯性
    anchorTriggerRef.current?.focus();
  };

  // Popover打开时自动聚焦内部编辑按钮
  useEffect(() => {
    if (open && editButtonRef.current) {
      editButtonRef.current.focus();
    }
  }, [open]);

  return (
    <div>
      <Button ref={anchorTriggerRef} onClick={handleOpen}>
        打开编辑弹窗
      </Button>
      <Popover
        id="yoo"
        open={open}
        anchorEl={anchorTriggerRef.current}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center"
        }}
        aria-modal="true"
        aria-labelledby="popover-accessible-title"
      >
        {/* 隐藏的标题，用于屏幕阅读器识别弹窗用途 */}
        <Typography id="popover-accessible-title" sx={{ display: 'none' }}>
          编辑操作选项
        </Typography>
        <Button 
          ref={editButtonRef}
          onClick={() => console.log("hello")}
        >
          <Typography>edit</Typography>
        </Button>
      </Popover>
    </div>
  );
}

关键逻辑说明 #

• aria-modal="true"：告知屏幕阅读器当前弹窗为模态状态，会屏蔽背景内容的交互与朗读，聚焦弹窗上下文
• 自动聚焦逻辑：弹窗打开时将焦点转移至内部按钮，NVDA会在焦点发生变化时自动朗读按钮文本
• 关闭后焦点返回：将焦点送回触发弹窗的按钮，符合无障碍导航的连贯性要求

内容的提问来源于stack exchange，提问作者Gowtham Manthena