ARIA role="dialog" must have an accessible label

[emmasax]

Describe the issue

It isn't possible to create an accessible dialog/modal using react-overlays.

Why is it an issue?

MDN - ARIA: dialog role

However, adding role="dialog" alone is not sufficient to make a dialog accessible. Additionally, the following needs to be done:

• The dialog must be properly labeled

The current implementation does not allow for additional ARIA props:

react-overlays/src/Modal.tsx

Lines 36 to 43 in 6a56f30

	export interface RenderModalDialogProps {
	style: React.CSSProperties | undefined;
	className: string | undefined;
	tabIndex: number;
	role: string;
	ref: React.RefCallback<Element>;
	'aria-modal': boolean | undefined;
	}

Expected implementation

These two attributes should be added to enable consumers to adhere to the guideline:

• aria-labelledby: reference the ID of an element within the dialog that labels it, i.e. a heading element
• aria-label: simple label of the dialog

Optional:

• aria-describedby: reference the ID of an element within the dialog that describes it

Additional context

Consumers will not be able to get a 100% rating using accessibility checking tools, e.g. this is how axe DevTools flags the issue:

[jquense]

It's expected that you will add the aria-labelledby or other form of labelling. It's not possible for us to do it automatically because the label is generally some content element in your dialog. You need put a title or header in the modal and link them via id

[emmasax]

How would you link that title/heading if there is no aria-labelledby allowed in the role="dialog" element?

[jquense]

you can add whatever props you want to the dialog, that interface is what the Modal injects, it's the minimum props the dialog accepts not the only props.

[dualcyclone]

@jquense I've just tried this by adding aria-label directly onto the Modal component.

import Modal from "react-bootstrap/Modal";

...
<Modal
  aria-label="Navigation Menu"
>
...

And aria-label is not rendered onto the role="dialog" component as described:

<div role="dialog" aria-modal="true">
    <div aria-label="Navigation Menu">
    ....
    </div>
</div>

So this is still an issue and should be reopened, unless I've somehow implemented it incorrectly?