Voice Over user can't access Attachment Details after adding an image

[rianrietveld]

After uploading an image in Add Media -> Insert image, the focus is placed at the URL from Link to Media File.

A Voice Over user can't reach the Attachment Details by tabbing backwards (up). This might be caused by the fact the attachment details are placed within a div with the role "checkbox"

<div tabindex="0" role="checkbox" aria-label="image-alt" aria-checked="false" data-id="69" class="attachment-details save-ready">
		<h3>
			Attachment Details

The screen reader NVDA can reach the field, Voice Over can't.

Cyndy Otty (@ceo) gives a demo ​https://files.slack.com/files-pri/T024MFP4J-F0311N8AC/insert_media_with_voiceover__wp_4.1-beta1_.mov

[ceo]

It's worth noting this is an issue that started with and exists in 4.0. (I used the beta for the demo mostly because of the convenience since I didn't have any plugins, etc. enabled on my test site to create any potential conflicts.)

[afercia]

Worth nothing the Attachment Details div has role="checkbox" tabindex="0" so it's focusable and announced as "checkbox" but of course is not "checkable". This is exactly what @ceo video shows: VoiceOver focuses that div while seems NVDA doesn't.
Anyway, as far as I can see, that div was meant to provide some information about the image currently being edited since it has an aria-label attribute with the image title or image file name.
That would be probably more appropriate on the h3 heading using screen-reader-text, something like

<h3>Attachment Details <span class="screen-reader-text">{image title or image filename}</span>
	<span class="settings-save-status">
		<span class="spinner"></span>
		<span class="saved">Saved.</span>
	</span>
</h3>

[helen]

This affects two things: the attachment details sidebar when in the insert media modal, and the whole modal when in the standalone media library (that is, the one that is accessed from the main admin menu). Worth testing both, before and after the patch. tabindex and the data-id remain, can add/remove attributes as needed.

[ceo]

Tested patch and I can now see the Attachment Details heading and get inside of the form fields when uploading new media from the post screen.

In the Media Library itself (via the main navigation), I can get to the form fields as well and edit things, which was not possible before the patch (and one of the main reasons I never used the Media Library because it was all but unusable with a screen-reader).

I also went through and tested the nightly and patch using the Media Uploader from the main navigation (which I did because I read the comment wrong initially, oops), but for what it's worth I can access the form fields when editing the media from there. It's not an altogether easy process.

Anyway, thank you @helen!

[helen]

In 30483:

Media a11y: Don't set role=checkbox for the attachment details view.

Some unnecessary attributes were inherited from the attachment view, which created difficulties with screen readers.

fixes #30390.