模态背景元素的正确 HTML 角色和其他相关属性 (TypeScript React)
The correct HTML role and the other related attributes for a modal backdrop element (TypeScript React)
我正在尝试使用 React 和 TypeScript 制作一个模态组件，它具有“点击外部关闭”功能；我试图通过制作一个背景元素来实现它：一个灰色的 HTML div 元素作为背景，它有一个调用 onClose 方法的 onClick 事件。
问题是，当我在背景元素上分配一个 onClick 事件时，出现了 linting 错误：Static HTML elements with event handlers require a role.
当我给它一个交互元素的角色时，例如 button，我得到了这些其他错误：
A control must be associated with a text label.Elements with the 'button' interactive role must be focusable.
所以我的问题是，赋予背景元素的正确作用是什么，其他相关属性应该是什么？
P.S。我对禁用 linting 规则不感兴趣。
我认为您的问题源于可访问性。屏幕阅读器等需要信息来识别可点击的元素。
要绕过它，您可以将其设置为 aria-hidden。
比较：
（第 23 行（使用 div）、第 44 行（aria-hidden）和第 52 行（onClick 在这里滑动）
根据 w3 规范，角色 presentation 似乎足以作为背景（纯粹是表象）：
https://www.w3.org/TR/wai-aria-1.1/#presentation
添加角色 presentation 应该可以解决 lint 错误，无需任何其他修改。
但是，我建议为“单击外部”功能探索一种不同的方法。有一种方法可以通过向文档添加点击侦听器并检查点击目标是否不包含在您的模态中来观察模态外的实际点击。这个答案有一个合理的解决方案：
.
这样您就可以避免将交互性添加到本应纯粹展示的元素中。 a11y linter 和工具会更快乐。
我正在尝试使用 React 和 TypeScript 制作一个模态组件，它具有“点击外部关闭”功能；我试图通过制作一个背景元素来实现它：一个灰色的 HTML div 元素作为背景，它有一个调用 onClose 方法的 onClick 事件。
问题是，当我在背景元素上分配一个 onClick 事件时，出现了 linting 错误：Static HTML elements with event handlers require a role.
当我给它一个交互元素的角色时，例如 button，我得到了这些其他错误：
A control must be associated with a text label.Elements with the 'button' interactive role must be focusable.
所以我的问题是，赋予背景元素的正确作用是什么，其他相关属性应该是什么？
P.S。我对禁用 linting 规则不感兴趣。
我认为您的问题源于可访问性。屏幕阅读器等需要信息来识别可点击的元素。
要绕过它，您可以将其设置为 aria-hidden。
比较：
（第 23 行（使用 div）、第 44 行（aria-hidden）和第 52 行（onClick 在这里滑动）
根据 w3 规范，角色 presentation 似乎足以作为背景（纯粹是表象）：
https://www.w3.org/TR/wai-aria-1.1/#presentation
添加角色 presentation 应该可以解决 lint 错误，无需任何其他修改。
但是，我建议为“单击外部”功能探索一种不同的方法。有一种方法可以通过向文档添加点击侦听器并检查点击目标是否不包含在您的模态中来观察模态外的实际点击。这个答案有一个合理的解决方案：
这样您就可以避免将交互性添加到本应纯粹展示的元素中。 a11y linter 和工具会更快乐。