Media: Fix ARIA labelling and list semantics in the media views.

The media modal labelled itself with a fixed `media-frame-title` ID that
was set on the frame's heading container. In the Media Library grid that
ID is claimed by the manage frame's empty heading, so the Edit attachment
dialog had no accessible name, and any page that opened more than one
media frame ended up with duplicate IDs.

Generate the ID on the modal instance, set it directly on the frame's H1
heading, and reference it from the dialog element.

Also set `role="group"` on the attachments list. Its `li` children carry
`role="checkbox"`, and ARIA in HTML only allows that if the role of the
list itself is changed as well.

Fixes #66025.

Author: itzmekhokan

src/js/media/views/attachments.js

@@ -8,6 +8,7 @@ Attachments = View.extend(/** @lends wp.media.view.Attachments.prototype */{
 	className: 'attachments',
 
 	attributes: {
+		role:     'group',
 		tabIndex: -1
 	},
 

src/js/media/views/media-frame.js

@@ -164,9 +164,11 @@ MediaFrame = Frame.extend(/** @lends wp.media.view.MediaFrame.prototype */{
 	 * @this wp.media.controller.Region
 	 */
 	createTitle: function( title ) {
+		// A modal's dialog element points `aria-labelledby` at its frame heading.
 		title.view = new wp.media.View({
 			controller: this,
-			tagName: 'h1'
+			tagName: 'h1',
+			attributes: this.modal ? { id: this.modal.titleId } : {}
 		});
 	},
 	/**

src/js/media/views/modal.js

@@ -32,19 +32,24 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
 			hasCloseButton: true
 		});
 
+		this.titleId = _.uniqueId( 'media-frame-title-' );
+
 		this.focusManager = new wp.media.view.FocusManager({
 			el: this.el
 		});
 	},
 	/**
 	 * Prepares the data for the modal template.
 	 *
+	 * @since 7.2.0 Added the `titleId` property.
+	 *
 	 * @return {Object} The prepared data.
 	 */
 	prepare: function() {
 		return {
 			title:          this.options.title,
-			hasCloseButton: this.options.hasCloseButton
+			hasCloseButton: this.options.hasCloseButton,
+			titleId:        this.titleId
 		};
 	},
 

src/wp-includes/media-template.php

@@ -178,7 +178,7 @@ function wp_print_media_templates() {
 
 	<?php // Template for the media frame: used both in the media grid and in the media modal. ?>
 	<script type="text/html" id="tmpl-media-frame">
-		<div class="media-frame-title" id="media-frame-title"></div>
+		<div class="media-frame-title"></div>
 		<h2 class="media-frame-menu-heading"><?php _ex( 'Actions', 'media modal menu actions' ); ?></h2>
 		<button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
 			<?php _ex( 'Menu', 'media modal menu' ); ?>
@@ -201,7 +201,7 @@ function wp_print_media_templates() {
 
 	<?php // Template for the media modal. ?>
 	<script type="text/html" id="tmpl-media-modal">
-		<div id="wp-media-modal" tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
+		<div id="wp-media-modal" tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="{{ data.titleId }}">
 			<# if ( data.hasCloseButton ) { #>
 				<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">
 					<?php