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