2

I'm struggling with adding 'aria-required' property to Material-UI component. Does anybody have experience with it ? I didn't tried anything because the docs don't talk about it. Thank you.

1 Answers1

0

Can't you just do this?

<Button aria-required="true" variant="contained" color="primary">
  Hello World
</Button>

If you have the attribute stored in a variable:

const myAttributes = {
  "aria-required": "true"
};
return (
  <Button {...myAttributes} variant="contained" color="primary">
    Hello World
  </Button>
);

EDIT: To add the attribute to the <Select /> component

<Select
  // add the attribute to the container
  aria-required="true"
  // add the attribute to the input element
  inputProps={{
    "aria-required": "true"
  }}
>
  {...}
</Select>

Live Demo

Edit 64414078/how-to-add-aria-required-to-material-ui-select-component

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
  • Hi, unfortunately your solution is not working for me. I'm trying to add aria-required to Select component. –  Oct 19 '20 at 07:23
  • I tried to add it directly to the component and to inputProps and they both not worked for me –  Oct 19 '20 at 07:24
  • @NetanelVaknin See my updated answer, if it doesn't work for you, please add the problematic code to the question and also your `@material-ui/core` version. – NearHuscarl Oct 19 '20 at 07:57
  • Thank you for your reply! My @material-ui/core version is 4.9.13 I did exactly the way you sent over here and I can see that the attribute aria-required="true" is added when I inspect element in the browser. Anyway, my screen reader is not reading that for me. –  Oct 19 '20 at 08:53
  • I don't use screen reader so I don't know how to debug it besides inspecting the dom element. See [this](https://stackoverflow.com/a/37975985/9449426) answer to see if it can help you. @NetanelVaknin – NearHuscarl Oct 19 '20 at 09:29