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.

Built from https://develop.svn.wordpress.org/trunk@44969


git-svn-id: http://core.svn.wordpress.org/trunk@44800 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/media-views.js

@@ -248,6 +248,7 @@ media.view.SiteIconCropper = __webpack_require__( 101 );
 media.view.SiteIconPreview = __webpack_require__( 102 );
 media.view.EditImage = __webpack_require__( 103 );
 media.view.Spinner = __webpack_require__( 104 );
+media.view.Heading = __webpack_require__( 105 );
 
 
 /***/ }),
@@ -7556,6 +7557,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();
 
@@ -7902,6 +7906,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,
@@ -9510,5 +9523,45 @@ var Spinner = wp.media.View.extend(/** @lends wp.media.view.Spinner.prototype */
 module.exports = Spinner;
 
 
+/***/ }),
+/* 105 */
+/***/ (function(module, exports) {
+
+/**
+ * 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;
+
+
 /***/ })
 /******/ ]));

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' ),
 	);
 
 	/**

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.2-alpha-44968';
+$wp_version = '5.2-alpha-44969';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.