TypeScript React中Modal遮罩层的正确role及相关属性配置

你遇到的是eslint-plugin-jsx-a11y的无障碍校验规则报错，不要给遮罩层设置button这类交互角色，不符合遮罩的实际语义，正确配置有两种可选：

方案1（更符合语义，推荐） #

给遮罩div添加以下属性即可完全符合校验规则：

• role="presentation"：声明该元素仅用于展示，无额外交互语义，不会被识别为控件，从根源避免交互类校验规则触发
• aria-hidden="true"：告知屏幕阅读器忽略该元素，它本身对无障碍用户没有感知价值
• 额外补充逻辑：给模态框内容容器绑定onClick={(e) => e.stopPropagation()}，避免点击内容区误触发遮罩的关闭事件

示例代码：

// 遮罩层
<div
  className="modal-backdrop"
  onClick={onClose}
  role="presentation"
  aria-hidden="true"
>
  {/* 模态框内容容器 */}
  <div className="modal-content" onClick={(e) => e.stopPropagation()}>
    {/* 模态框内容 */}
  </div>
</div>

方案2（声明为交互控件场景） #

如果你确实希望把遮罩层声明为可点击的交互控件，需要补全button角色对应的所有无障碍属性：

• role="button"：声明为按钮控件
• aria-label="关闭模态框"：给控件添加无障碍文本标签，解决标签关联报错
• tabIndex="-1"：声明元素可聚焦，但不会通过Tab键被选中，解决可聚焦报错，同时不会干扰正常的键盘焦点逻辑
• 可选补充：如果需要支持键盘操作关闭，可以加onKeyDown监听回车、空格键触发onClose，一般遮罩层不需要支持键盘操作，可忽略该配置

示例代码：

<div
  className="modal-backdrop"
  onClick={onClose}
  role="button"
  aria-label="关闭模态框"
  tabIndex={-1}
>
  <div className="modal-content" onClick={(e) => e.stopPropagation()}>
    {/* 模态框内容 */}
  </div>
</div>

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