Material ui - snackbox 咏叹调标签未被读取

Question

所以我有几个组件都带有 aria 标签或带有标签的 aria 标签，供屏幕 readers 的用户使用。

无论我怎么尝试，我都无法让 aria 标签在 material ui 零食盒上工作。我目前正在使用 NVDA 屏幕 reader，因为这是我们公司的默认设置。

有没有人知道解决方案，或者遇到过同样的问题？

示例代码：（请注意，关闭按钮的 aria 标签工作正常！）

 <Snackbar
        classname='warningSnack'
        anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',
        }}
        open={snackOpen}
        autoHideDuration={8000}
        onClose={handleClose}
        aria-label = {"Please read this"}
       // ContentProps={{
       //   'aria-describedby': 'please read me',
       // }} WONT WORK
        message={'this is my message'}
        action={[
          <IconButton
            key="close"
            aria-label="close"
            color="inherit"
            className={close}
            onClick={handleClose}
          >
            <CloseIcon />
          </IconButton>,
        ]}
      />

Answer 1

除了你像这样使用它 aria-label = { " Please read this" } 而不是 aria-label="Please read this" 我没有看到它。我在小吃店的 MUI API 文档中找不到 aria-label 的任何属性。无论如何尝试使用 inputProps: inputProps={{ "aria-label": "Please read this" }}，或者在消息中使用 <Typography> 或另一个 html 元素并在那里传递 aria-label。

Answer 2

在尝试了所有我能想到的方法之后，我意识到这是因为我没有定义 aria-label 需要的 'role'，只需添加以下内容就可以了：

role = "alert"

Material ui - snackbox 咏叹调标签未被读取

Material ui - snackbox aria label not being read

accessibility

screen-readers

nvda

reactjs

material-ui