material-ui 选择组件没有正确地将无效状态反映给辅助技术;考虑采用WAI推荐的模式,

pw9qyyiw  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(58)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例

这个问题可以在MUI的Select文档的"其他属性"部分中重现:https://mui.com/material-ui/react-select/#other-props
步骤:

  1. 启用屏幕阅读器
  2. 用活动错误聚焦 <Select/>
  3. 监听(或阅读)屏幕阅读器提供的描述

当前行为 😯

它只是读取该字段存在,没有注意到它是无效状态。

预期行为 🤔

屏幕阅读器(或其他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上的Chrome
npx @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
nhhxz33t

nhhxz33t1#

这与#35586有关。
实现ARIA 1.2规范应该解决这些问题。

相关问题