It's important for the modal to have a label. If you're using the Modal's title prop, it will automatically be used as the label.
If you use a custom title, you can use the aria prop to wire things up yourself:
<Modal
aria={{
labelledby:'modal-title',
}}
>
<Titleid="modal-title">My Modal Title</Title>
</Modal>
Development
<Modal>
The underlying react-modal library needs to know the root of your application so it can hide it via the aria-hidden attribute when the modal is open. This "app element" is automatically set to #main, so you shouldn't need to change this when working in normal React apps. However, if you're working in other contexts like Storybook, you may wish to change this app element:
If you are writing component tests, you may need to have the tests run inside an HTML wrapper with id="main" set for the modal to render correctly in context.