如何为material-ui表启用键盘导航答案

【问题标题】：How to enable keyboard navigation for material-ui table如何为material-ui表启用键盘导航
【发布时间】：2020-12-07 08:58:06
【问题描述】：

我有一个使用 Material-UI 创建的反应应用程序。用户已要求为整个网站启用键盘导航。我无法在此网站上使用键盘导航表格。我的桌子看起来像https://material-ui.com/components/tables/#fixed-header。我想在键盘上按“向上箭头”和“向下箭头”上下一行。如何启用此功能？

【问题讨论】：

欢迎来到 SO。请阅读stackoverflow.com/help/mcve 并编辑您的帖子。
"我想在键盘上按“向上箭头”和“向下箭头”时上下一行。要在数据表中导航，您需要一个可选择的数据表，即可选择的行。您的示例中没有行选择功能。
这能回答你的问题吗？ Navigate a material-ui list with arrow keys

标签： reactjs material-ui accessibility

【解决方案1】：

键盘导航通常是指仅使用键盘控件就能够专注于并触发交互式元素，如链接、按钮、日期选择器、模式等。表格不是交互式元素，因此无法通过键盘获得焦点。

您的用户请求可能旨在确保网站符合Web Content Accessibility Guidelines。 Material UI 表格在语义上被标记为带有表格标题行的表格，因此满足此标准的基础知识已经存在。

如果您激活屏幕阅读器（如 Mac 上的 VoiceOver 或 Windows 上的 NVDA），您将能够使用箭头键在表格中导航，屏幕阅读器将宣布每个单元格。

https://webaim.org/techniques/tables/data

【讨论】：