Add Media Button missing aria-haspopup and aria-controls

[alh0319]

In the classic editor, above the TinyMCE editor, there is an "Add Media" button which, when clicked, triggers the media library to open in a dialog.

This is the current code for that button:

<button type="button" id="insert-media-button" class="button insert-media add_media" data-editor="content"><span class="wp-media-buttons-icon"></span> Add Media</button>

Screen reader users are not warned that triggering this button will open a modal dialog.

For WCAG conformance the following attributes need to be added to this button:

• aria-haspopup="dialog"
• aria-controls referncing the ID of the modal being opened

For additional information see:

• ​MDN ARIA: aria-haspopup attribute
• ​MDN ARIA: aria-controls attribute

[joedolson]

I'm attributing this to version 4.3, when the control was changed to a button; though in practical truth I don't think that aria-haspopup was widely supported at the time.

See #32969.

[joedolson]

Tested. This has no significant potential for side-effects; the only plausible side-effect is in the case that an extender has added the id wp-media-modal somewhere in the editor admin.

There are no themes or plugins that return a positive test for that string in ​https://wpdirectory.net, so I think it's a safe bet that's not a significant concern.

[joedolson]

In 60786:

Editor: A11y: Set aria-haspopup on Add Media button.

Add the aria-haspopup attribute and aria-controls on the Add Media button in the classic editor, so that screen reader users are notified about the behavior of the button.

Props alh0319, rishabhwp, joedolson.
Fixes #63973.