Media: introduce a "Heading" view for improved accessibility.

* Add a new media view: `wp.media.view.Heading` designed to add accessibility friendly headers in the media library/modal.
* Add an initial "Attachments list" heading above the attachments list.

Props afercia.
Fixes #36925.


git-svn-id: https://develop.svn.wordpress.org/trunk@44969 602fd350-edb4-49c9-b593-d223f7449a82

src/js/_enqueues/wp/media/views.js

@@ -151,3 +151,4 @@ media.view.SiteIconCropper = require( '../../../media/views/site-icon-cropper.js
 media.view.SiteIconPreview = require( '../../../media/views/site-icon-preview.js' );
 media.view.EditImage = require( '../../../media/views/edit-image.js' );
 media.view.Spinner = require( '../../../media/views/spinner.js' );
+media.view.Heading = require( '../../../media/views/heading.js' );

src/js/media/views/attachments/browser.js

@@ -61,6 +61,9 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 		 */
 		this.createToolbar();
 
+		// Add a heading before the attachments list.
+		this.createAttachmentsHeading();
+
 		// Create the list of attachments.
 		this.createAttachments();
 
@@ -407,6 +410,15 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 		}
 	},
 
+	createAttachmentsHeading: function() {
+		this.attachmentsHeading = new wp.media.view.Heading( {
+			text: l10n.attachmentsList,
+			level: 'h2',
+			className: 'media-views-heading screen-reader-text'
+		} );
+		this.views.add( this.attachmentsHeading );
+	},
+
 	createSidebar: function() {
 		var options = this.options,
 			selection = options.selection,

src/js/media/views/heading.js

@@ -0,0 +1,34 @@
+/**
+ * wp.media.view.Heading
+ *
+ * A reusable heading component for the media library
+ *
+ * Used to add accessibility friendly headers in the media library/modal.
+ *
+ * @class
+ * @augments wp.media.View
+ * @augments wp.Backbone.View
+ * @augments Backbone.View
+ */
+var Heading = wp.media.View.extend( {
+	tagName: function() {
+		return this.options.level || 'h1';
+	},
+	className: 'media-views-heading',
+
+	initialize: function() {
+
+		if ( this.options.className ) {
+			this.$el.addClass( this.options.className );
+		}
+
+		this.text = this.options.text;
+	},
+
+	render: function() {
+		this.$el.html( this.text );
+		return this;
+	}
+} );
+
+module.exports = Heading;

src/wp-includes/media.php

@@ -3762,6 +3762,9 @@ function wp_enqueue_media( $args = array() ) {
 		'updateVideoPlaylist'         => __( 'Update video playlist' ),
 		'addToVideoPlaylist'          => __( 'Add to video playlist' ),
 		'addToVideoPlaylistTitle'     => __( 'Add to Video Playlist' ),
+
+		// Headings
+		'attachmentsList'             => __( 'Attachments list' ),
 	);
 
 	/**