Accessibility: Media: Add more headings in the Media Modal.

Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces.

- adds three new headings within the media modal 
- improves plural form translation for "item selected" by using `wp.i18n`
- horizontally centers the media modal menu in the responsive view

Props kjellr, karmatosed, melchoyce, afercia.
See #47149.
Fixes #47610.


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

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

@@ -132,7 +132,8 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 	},
 
 	createToolbar: function() {
-		var LibraryViewSwitcher, Filters, toolbarOptions;
+		var LibraryViewSwitcher, Filters, toolbarOptions,
+			showFilterByType = -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] );
 
 		toolbarOptions = {
 			controller: this.controller
@@ -153,9 +154,21 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 			priority: -60
 		}) );
 
-		if ( -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] ) ) {
-			// "Filters" will return a <select>, need to render
-			// screen reader text before
+		if ( showFilterByType || this.options.date ) {
+			/*
+			 * Create a h2 heading before the select elements that filter attachments.
+			 * This heading is visible in the modal and visually hidden in the grid.
+			 */
+			this.toolbar.set( 'filters-heading', new wp.media.view.Heading( {
+				priority:   -100,
+				text:       l10n.filterAttachments,
+				level:      'h2',
+				className:  'media-attachments-filter-heading'
+			}).render() );
+		}
+
+		if ( showFilterByType ) {
+			// "Filters" is a <select>, a visually hidden label element needs to be rendered before.
 			this.toolbar.set( 'filtersLabel', new wp.media.view.Label({
 				value: l10n.filterByType,
 				attributes: {
@@ -195,7 +208,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 				priority: -90
 			}).render() );
 
-			// DateFilter is a <select>, screen reader text needs to be rendered before
+			// DateFilter is a <select>, a visually hidden label element needs to be rendered before.
 			this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
 				value: l10n.filterByDate,
 				attributes: {
@@ -317,7 +330,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 			}
 
 		} else if ( this.options.date ) {
-			// DateFilter is a <select>, screen reader text needs to be rendered before
+			// DateFilter is a <select>, a visually hidden label element needs to be rendered before.
 			this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
 				value: l10n.filterByDate,
 				attributes: {
@@ -333,7 +346,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 		}
 
 		if ( this.options.search ) {
-			// Search is an input, screen reader text needs to be rendered before
+			// Search is an input, a visually hidden label element needs to be rendered before.
 			this.toolbar.set( 'searchLabel', new wp.media.view.Label({
 				value: l10n.searchMediaLabel,
 				attributes: {

src/js/media/views/selection.js

@@ -1,4 +1,5 @@
-var l10n = wp.media.view.l10n,
+var _n = wp.i18n._n,
+	sprintf = wp.i18n.sprintf,
 	Selection;
 
 /**
@@ -60,7 +61,10 @@ Selection = wp.media.View.extend(/** @lends wp.media.view.Selection.prototype */
 		this.$el.toggleClass( 'one', 1 === collection.length );
 		this.$el.toggleClass( 'editing', editing );
 
-		this.$('.count').text( l10n.selected.replace('%d', collection.length) );
+		this.$( '.count' ).text(
+			/* translators: %s: Number of selected media attachments. */
+			sprintf( _n( '%s item selected', '%s items selected', collection.length ), collection.length )
+		);
 	},
 
 	edit: function( event ) {