Changeset 44969

Timestamp:

03/21/2019 09:04:49 PM (6 years ago)

Author:

adamsilverstein

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/wp/media/views.js (modified) (1 diff)
• js/media/views/attachments/browser.js (modified) (2 diffs)
• js/media/views/heading.js (added)
• wp-includes/media.php (modified) (1 diff)

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

@@ -152 +152 @@
 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' );

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

@@ -62 +62 @@
         this.createToolbar();
 
+        // Add a heading before the attachments list.
+        this.createAttachmentsHeading();
+
         // Create the list of attachments.
         this.createAttachments();
@@ -408 +411 @@
     },
 
+    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,

trunk/src/wp-includes/media.php

@@ -3763 +3763 @@
         'addToVideoPlaylist'          => __( 'Add to video playlist' ),
         'addToVideoPlaylistTitle'     => __( 'Add to Video Playlist' ),
+
+        // Headings
+        'attachmentsList'             => __( 'Attachments list' ),
     );