材料 ui - 零食盒咏叹调标签未被读取答案

【问题标题】：Material ui - snackbox aria label not being read材料 ui - 零食盒咏叹调标签未被读取
【发布时间】：2019-08-16 13:29:45
【问题描述】：

所以我有几个组件都带有 aria 标签或 aria 由附加到它们的标签标记，供具有屏幕阅读器的用户使用。

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

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

示例代码：（注意关闭按钮的 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>,
        ]}
      />

【问题讨论】：

标签： reactjs material-ui accessibility screen-readers nvda

【解决方案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。

【讨论】：

不幸的是，这也不起作用。无论我如何格式化 aria-label、或 aria-labelledby 或 aria-describledby，它都不会读出快餐栏。但它确实读出了关闭快餐栏的按钮，很有趣
尝试在消息中放置一个按钮，因为另一个按钮可以工作，只是为了检查它是否是因为我告诉你的组件没有 aria-label 或者它是否真的是关于屏幕阅读器没有能够阅读小吃店消息。
我在 MUI Docs 中找到了一个使用 aria-describedby、here 的示例。 SnackbarContent。看看有没有帮助。

【解决方案2】：

在尝试了我能想到的一切之后，我意识到这是因为我没有定义 aria-label 需要的“角色”，只需添加以下内容即可：

role = "alert"

【讨论】：