reactjs - 模态背景元素的正确 HTML 角色及其他相关属性（TypeScript React）

我正在尝试使用 React 和 TypeScript 创建一个 Modal 组件，该组件具有“点击外部关闭”的功能；我正尝试通过制作一个背景元素来实现这一点：一个灰色的 HTML div 元素作为背景，并且该元素有一个 onClick 事件，用于调用 onClose 方法。

问题是，当我在 backdrop 元素上分配 onClick 事件时，我会收到 lint 错误：带有事件处理程序的静态 HTML 元素需要一个 role。

当我给它一个交互元素的角色时，比如 button，我会得到这些其他错误：

• A control must be associated with a text label.

• Elements with the 'button' interactive role must be focusable.

所以我的问题是，应该给背景元素分配什么正确的角色，其他相关属性应该是什么？

附言：我对禁用这个代码检查规则不感兴趣。

答案＃1

根据 w3 规范，角色 presentation 似乎适合用于背景（纯粹用于展示的内容）：https://www.w3.org/TR/wai-aria-1.1/#presentation

添加角色 presentation 应该可以解决 lint 错误，而无需进行任何额外的修改。

但是，我建议探索一种不同的方法来实现“点击外部”功能。可以通过在文档中添加点击监听器并检查点击目标是否不包含在你的模态框中来观察实际的模态框外点击。这篇回答有一个合理的解决方案：检测 React 组件外的点击。

这样你就可以避免为本应纯粹用于展示的元素添加交互性。无障碍审查工具和相关工具也会更满意。

答案＃2

我认为你的问题源于可访问性。屏幕阅读器之类的工具需要信息来识别可点击的元素。

要绕过这个，您可以将其设置为 aria-hidden。

比较：https://stackoverflow.com/a/64022904/17519505

以及 https://github.com/mui-org/material-ui/blob/42ce3598db2c19956d9cd852b43d0c96f61f697b/packages/mui-base/src/BackdropUnstyled/BackdropUnstyled.js#L18

(第23行（使用div）、第44行（aria-hidden）和第52行（onClick在这里滑入）)