Why does react-modal require the prop contentLabel?

Question

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.

Answer 1

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.