7

I started getting this warning on my react-modal components:

Warning: Failed propType: Required prop contentLabel was not specified in Modal.

It doesn't prevent the modal from working correctly, I just see the warning in the dev tools console. I can pass this prop in by specifying some random string, but I do not understand what this is actually used for, and why it is required.

evianpring
  • 3,316
  • 1
  • 25
  • 54

2 Answers2

12

contentLabel improves accessibility. You probably don't notice it, but in certain situations this prop can help your users understand what the modal is about. From their repository:

The Modal object has two required props:

  • isOpen to render its children.
  • contentLabel to improve a11y, since v1.6.0.

The value of contentLabel is set as an aria-label on the modal element. This helps assistive technology, like screen readers, to add a label to an element that would otherwise be anonymous. People with visual impairment for example can make more sense out of your modal when added.

Fabian Schultz
  • 18,138
  • 5
  • 49
  • 56
  • Yes, I saw that piece of documentation, but it does not exactly explain why it is required. So it is some sort of aid to users. I imagined that it did somehow, and no I did not notice it, so the question is, how does it help precisely? – evianpring Dec 27 '16 at 13:19
  • In what situations does it help? I saw the documentation but it does not say anything other than what you pasted above. – evianpring Dec 27 '16 at 13:22
  • Updated my answer. – Fabian Schultz Dec 27 '16 at 13:28
0

In thishttps://github.com/reactjs/react-modal/blob/master/dist/react-modal.js contentLabel and isOpen is set required like this contentLabel: React.PropTypes.string.isRequired if you remove .isRequired then you can use modal without defining contentLabel prop.

Codesingh
  • 3,316
  • 1
  • 11
  • 18
  • I am aware I can go to the actual package and modify it, but I don't want to modify it, I just want to understand what the logic was of making it required. I don't believe it was required in older versions of react-modal. – evianpring Dec 27 '16 at 13:21
  • This is because of arial lable. aria-label does much the same thing like lable, but it's for those cases where it isn't practical or desirable to have a label on screen. – Codesingh Dec 27 '16 at 13:29