Search code examples
reactjsmaterial-uiaccessibilityscreen-readersnvda

Material ui - snackbox aria label not being read


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

Solution

  • 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"