重复问题
- 我搜索了现有的问题
最新版本
- 我测试了最新版本
重现步骤 🕹
链接到实时示例
这个问题可以在MUI的Select文档的"其他属性"部分中重现:https://mui.com/material-ui/react-select/#other-props
步骤:
- 启用屏幕阅读器
- 用活动错误聚焦
<Select/>
- 监听(或阅读)屏幕阅读器提供的描述
当前行为 😯
它只是读取该字段存在,没有注意到它是无效状态。
预期行为 🤔
屏幕阅读器(或其他AT)应该提供反映控件无效状态的反馈。
上下文 🔦
在单元测试中,我试图使用 Testing Library 验证控件在预期时被标记为无效。 <TextField/>
元素正确地反映了它们是无效的,但 <Select/>
元素没有。
值得注意的是,在一个相关的开放问题中,有人指出这是由于 <Select/>
在底层使用了 role="button"
,而后者不能接受 aria-invalid
属性。 这里可能重要的是 WAI's ARIA Authoring Practices Guide has a "Select-only combox" pattern ;如果遵循,它 应该显示并像样式化的 <select/>
一样行为,同时为AT用户提供所有预期的可访问性钩子。
你的环境 🌎
使用MacOS上的Chromenpx @mui/envinfo
System:
OS: macOS 12.6
Binaries:
Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.13.0/bin/yarn
npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
Browsers:
Chrome: 111.0.5563.110
Edge: Not Found
Firefox: 110.0
Safari: 15.6.1
npmPackages:
@emotion/react: ^11.9.3 => 11.10.5
@emotion/styled: ^11.9.3 => 11.10.5
@mui/base: 5.0.0-alpha.113
@mui/core-downloads-tracker: 5.11.4
@mui/icons-material: ^5.8.3 => 5.11.0
@mui/material: ^5.8.3 => 5.11.4
@mui/private-theming: 5.11.2
@mui/styled-engine: 5.11.0
@mui/system: 5.11.4
@mui/types: 7.2.3
@mui/utils: ^5.10.3 => 5.11.2
@mui/x-data-grid: ^5.12.2 => 5.17.18
@mui/x-date-pickers: ^5.0.7 => 5.0.13
@types/react: ^18.0.12 => 18.0.26
react: ^18.1.0 => 18.2.0
react-dom: ^18.1.0 => 18.2.0
typescript: ^4.7.3 => 4.9.4
1条答案
按热度按时间nhhxz33t1#
这与#35586有关。
实现ARIA 1.2规范应该解决这些问题。