From e1a070bb87dd4ec27447ec5d9d6d9dc40bc07b74 Mon Sep 17 00:00:00 2001
From: Adam Silverstein <adamsilverstein@git.wordpress.org>
Date: Thu, 21 Mar 2019 21:04:49 +0000
Subject: [PATCH] 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        |  1 +
 src/js/media/views/attachments/browser.js | 12 ++++++++
 src/js/media/views/heading.js             | 34 +++++++++++++++++++++++
 src/wp-includes/media.php                 |  3 ++
 4 files changed, 50 insertions(+)
 create mode 100644 src/js/media/views/heading.js

diff --git a/src/js/_enqueues/wp/media/views.js b/src/js/_enqueues/wp/media/views.js
index 01b8d00c42..76c79e0b63 100644
--- a/src/js/_enqueues/wp/media/views.js
+++ b/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' );
diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js
index 0f4561b062..92f8387ce8 100644
--- a/src/js/media/views/attachments/browser.js
+++ b/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,
diff --git a/src/js/media/views/heading.js b/src/js/media/views/heading.js
new file mode 100644
index 0000000000..9c8c80be5e
--- /dev/null
+++ b/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;
diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index db150ab975..bb2e0b8e27 100644
--- a/src/wp-includes/media.php
+++ b/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' ),
 	);
 
 	/**