Material ui - snackbox aria label not being read

Question

So I have several components all with aria labels or aria labelled by tags attached to them for users with screenreaders.

No matter what I try, I can't get the aria label to work on material ui snack boxes. I'm currently using NVDA screen reader as that is our company default.

Does anyone know a solution, or have had the same problem with this?

Example code: (Note that the aria label for the close button works fine!)

 <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>,
        ]}
      />

ImInYourCode · Answer 1 · 2019-08-16T13:59:51.063

0

Apart from you using it like this aria-label = { " Please read this" } instead of aria-label="Please read this" I don't see it. I couldn't find any property for aria-label in MUI API docs for snackbar. Anyway try to use inputProps: inputProps={{ "aria-label": "Please read this" }}, or maybe use a <Typography> or another html element in the message and pass aria-label there.

edited Aug 16 '19 at 13:59

answered Aug 16 '19 at 13:42

ImInYourCode

567
1
7
19

unfortunately that doesn't work either. No matter how I format the aria-label, or aria-labelledby, or aria-describledby, it doesn't read out the snackbar. But it does read out the button to close the snackbar funnily enough – Uciebila Aug 19 '19 at 10:57
Try to put a button, since the other button works, in the message just to check if it's because of the components I told you not having aria-label or if it's really about the screen reader not being able to read snackbar message. – ImInYourCode Aug 19 '19 at 11:04
I found an example in MUI Docs that uses `aria-describedby`, [here](https://material-ui.com/components/snackbars/#CustomizedSnackbars.js). The `SnackbarContent`. See if it helps. – ImInYourCode Aug 19 '19 at 11:09

score 0 · Accepted Answer · answered Aug 21 '19 at 10:34

0

After trying everything I could think of, I realised that it was because I had not defined a 'role' which the aria-label needs, simply adding the following got it working:

role = "alert"

answered Aug 21 '19 at 10:34

Uciebila

481
2
9
27

Material ui - snackbox aria label not being read

2 Answers2