Ticket #36925: 36925.3.diff

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

@@ -151 +151 @@
 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 +61 @@
                  */
                 this.createToolbar();
 
+                // Add a heading before the attachments list.
+                this.createAttachmentsHeading();
+
                 // Create the list of attachments.
                 this.createAttachments();
 
@@ -407 +410 @@
                 }
         },
 
+        createAttachmentsHeading: function() {
+                this.attachmentsHeading = new wp.media.view.Heading( {
+                        text: l10n.attachmentsList,
+                        level: 'h2',
+                        className: 'screen-reader-text'
+                } );
+                this.views.add( this.attachmentsHeading );
+        },
+
         createSidebar: function() {
                 var options = this.options,
                         selection = options.selection,

new file src/js/media/views/heading.js

@@ +1 @@
+/**
+ * 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 +3762 @@
                 'updateVideoPlaylist'         => __( 'Update video playlist' ),
                 'addToVideoPlaylist'          => __( 'Add to video playlist' ),
                 'addToVideoPlaylistTitle'     => __( 'Add to Video Playlist' ),
+
+                // Headings
+                'attachmentsList'             => __( 'Attachments list' ),
         );
 
         /**