CODEWITHSUNDEEP
reactjsreact-modal
xoux
xoux

Reputation: 3494

Why does react-modal require the prop contentLabel?

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.

Upvotes: 7

Views: 3365

Answers (2)

Fabian Schultz
Fabian Schultz

Reputation: 18556

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.

Upvotes: 12

Codesingh
Codesingh

Reputation: 3384

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.

Upvotes: 0

Related Questions