Changeset 46375

Timestamp:

10/03/2019 12:09:31 PM (5 years ago)

Author:

afercia

Message:

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.

Location:

trunk

Files:

• src/js/media/views/attachments/browser.js (modified) (5 diffs)
• src/js/media/views/selection.js (modified) (2 diffs)
• src/wp-includes/css/media-views.css (modified) (12 diffs)
• src/wp-includes/media-template.php (modified) (2 diffs)
• src/wp-includes/media.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (1 diff)
• tests/qunit/index.html (modified) (1 diff)

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

@@ -133 +133 @@
 
     createToolbar: function() {
-        var LibraryViewSwitcher, Filters, toolbarOptions;
+        var LibraryViewSwitcher, Filters, toolbarOptions,
+            showFilterByType = -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] );
 
         toolbarOptions = {
@@ -154 +155 @@
         }) );
 
-        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,
@@ -196 +209 @@
             }).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,
@@ -318 +331 @@
 
         } 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,
@@ -334 +347 @@
 
         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,

trunk/src/js/media/views/selection.js

@@ -1 @@
-var l10n = wp.media.view.l10n,
+var _n = wp.i18n._n,
+    sprintf = wp.i18n.sprintf,
     Selection;
 
@@ -61 +62 @@
         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 )
+        );
     },
 

trunk/src/wp-includes/css/media-views.css

@@ -269 +269 @@
 
 .media-modal-content .media-frame select.attachment-filters {
-    margin-top: 11px;
+    margin-top: 32px;
     margin-right: 2%;
     width: 42%;
@@ -306 +306 @@
     overflow: visible;
     border-top: 1px solid #ddd;
-}
-
-@media screen and (max-width: 782px) {
-    .media-frame-toolbar .media-toolbar {
-        bottom: -48px;
-    }
 }
 
@@ -769 +763 @@
 
 .media-frame.hide-menu .media-frame-menu,
+.media-frame.hide-menu .media-frame-menu-heading,
 .media-frame.hide-router .media-frame-router,
 .media-frame.hide-toolbar .media-frame-toolbar {
@@ -779 +774 @@
     line-height: 2.27272727;
     margin: 0;
+}
+
+.media-frame-menu-heading,
+.media-attachments-filter-heading {
+    position: absolute;
+    left: 20px;
+    top: 22px;
+    margin: 0;
+    font-size: 13px;
+    line-height: 1;
+    /* Above the media-frame-menu. */
+    z-index: 151;
+}
+
+.media-attachments-filter-heading {
+    top: 10px;
+    left: 16px;
+}
+
+.mode-grid .media-attachments-filter-heading {
+    top: 0;
+    left: -9999px;
+}
+
+.mode-grid .media-frame-actions-heading {
+    display: none;
 }
 
@@ -850 +871 @@
  */
 .media-frame .search {
-    margin-top: 10px;
+    margin-top: 32px;
     padding: 4px;
     font-size: 13px;
@@ -1107 +1128 @@
 .attachments-browser .media-toolbar {
     right: 300px;
-    height: 50px;
+    height: 72px;
+    background: #fff;
 }
 
@@ -1128 +1150 @@
 .attachments-browser .uploader-inline {
     position: absolute;
-    top: 50px;
+    top: 72px;
     left: 0;
     right: 300px;
@@ -2331 +2353 @@
         z-index: 2000;
         top: 75px;
-        left: 0;
+        left: 50%;
+        transform: translateX(-50%);
         right: auto;
         bottom: auto;
@@ -2351 +2374 @@
     }
 
+    /* Visually hide the menu heading keeping it available to assistive technologies. */
+    .media-frame-menu-heading {
+        clip: rect(1px, 1px, 1px, 1px);
+        -webkit-clip-path: inset(50%);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        padding: 0;
+        width: 1px;
+        word-wrap: normal !important;
+    }
+
+    /* Reveal the menu toggle button. */
     .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
         display: inline-flex;
         align-items: center;
-        vertical-align: top;
-        min-height: 40px;
-        margin: -6px 6px 0;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        margin: -6px 0 0;
         padding: 0 2px 0 12px;
         font-size: 0.875rem;
@@ -2362 +2399 @@
         text-decoration: none;
         background: transparent;
+        /* Only for IE11 to vertically align text within the inline-flex button */
+        height: 0.1%;
+        /* Modern browsers */
+        min-height: 40px;
     }
 
@@ -2565 +2606 @@
         font-size: 16px;
     }
+
+    .media-frame .media-toolbar input[type="search"] {
+        line-height: 1.625; /* 26px */
+    }
+}
+
+@media screen and (max-width: 782px) {
+    .attachments-browser .media-toolbar {
+        height: 82px;
+    }
+
+    .attachments-browser .attachments,
+    .attachments-browser .uploader-inline {
+        top: 82px;
+    }
+
+    .media-frame .media-toolbar input[type="search"] {
+        line-height: 2.25; /* 36px */
+    }
+
+    .media-frame-toolbar .media-toolbar {
+        bottom: -48px;
+    }
 }
 
@@ -2636 +2700 @@
         margin-top: 13px;
     }
-
-    .media-frame.hide-router .media-frame-content {
-        top: 40px;
-    }
 }
 

trunk/src/wp-includes/media-template.php

@@ -179 +179 @@
     <script type="text/html" id="tmpl-media-frame">
         <div class="media-frame-title" id="media-frame-title"></div>
+        <h2 class="media-frame-menu-heading"><?php _e( 'Media Types' ); ?></h2>
         <button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
             <?php _e( 'Media Types' ); ?>
@@ -188 +189 @@
             <div class="media-frame-content"></div>
         </div>
+        <h2 class="media-frame-actions-heading screen-reader-text"><?php _e( 'Available actions' ); ?></h2>
         <div class="media-frame-toolbar"></div>
         <div class="media-frame-uploader"></div>

trunk/src/wp-includes/media.php

@@ -3932 +3932 @@
 
         // Headings
-        'attachmentsList'             => __( 'Attachments list' ),
+        'filterAttachments'           => __( 'Filter Media' ),
+        'attachmentsList'             => __( 'Media list' ),
     );
 

trunk/src/wp-includes/script-loader.php

@@ -1618 +1618 @@
     // To enqueue media-views or media-editor, call wp_enqueue_media().
     // Both rely on numerous settings, styles, and templates to operate correctly.
-    $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y' ), false, 1 );
+    $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y', 'wp-i18n' ), false, 1 );
     $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
     $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );

trunk/tests/qunit/index.html

@@ -45 +45 @@
         <script src="../../build/wp-includes/js/mediaelement/mediaelement-and-player.min.js"></script>
         <script src="../../build/wp-includes/js/mediaelement/wp-mediaelement.js"></script>
+        <script src="../../build/wp-includes/js/dist/i18n.js"></script>
         <script>
-            window._wpMediaViewsL10n = {"url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Add Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","mine":"Mine","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n  'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","trashSelected":"Move to Trash","restoreSelected":"Restore from Trash","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions: %1$s by %2$s pixels.","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":{"tabs":[],"tabUrl":"http:\/\/src.wordpress-develop.test\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video"},"captions":true,"nonce":{"sendToEditor":"68dd6db760"},"post":{"id":0},"defaultProps":{"link":"none","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"oEmbedProxyUrl":"http:\/\/src.wordpress-develop.test\/wp-json\/oembed\/1.0\/proxy","embedExts":["mp3","ogg","flac","m4a","wav","mp4","m4v","webm","ogv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","flac":"audio\/flac","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","flv":"video\/x-flv"},"contentWidth":640,"months":[{"year":"2018","month":"11","text":"November 2018"},{"year":"2018","month":"10","text":"October 2018"},{"year":"2018","month":"7","text":"July 2018"},{"year":"2014","month":"1","text":"January 2014"},{"year":"2013","month":"12","text":"December 2013"},{"year":"2013","month":"9","text":"September 2013"},{"year":"2013","month":"4","text":"April 2013"},{"year":"2013","month":"3","text":"March 2013"},{"year":"2012","month":"7","text":"July 2012"},{"year":"2012","month":"6","text":"June 2012"},{"year":"2011","month":"7","text":"July 2011"},{"year":"2011","month":"1","text":"January 2011"}],"mediaTrash":0}};
+            window._wpMediaViewsL10n = {"mediaFrameDefaultTitle":"Media","url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Add Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","mine":"Mine","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n  'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","trashSelected":"Move to Trash","restoreSelected":"Restore from Trash","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","mediaFound":"Number of media items found: %d","mediaFoundHasMoreResults":"Number of media items displayed: %d. Scroll the page for more results.","noMedia":"No media items found.","noMediaTryNewSearch":"No media items found. Try a different search.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions: %1$s by %2$s pixels.","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","filterAttachments":"Filter Media","attachmentsList":"Media list","settings":{"tabs":[],"tabUrl":"http:\/\/build.wordpress-develop.test\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video","application\/msword,application\/vnd.openxmlformats-officedocument.wordprocessingml.document,application\/vnd.ms-word.document.macroEnabled.12,application\/vnd.ms-word.template.macroEnabled.12,application\/vnd.oasis.opendocument.text,application\/vnd.apple.pages,application\/pdf,application\/vnd.ms-xpsdocument,application\/oxps,application\/rtf,application\/wordperfect,application\/octet-stream":"Documents","application\/vnd.apple.numbers,application\/vnd.oasis.opendocument.spreadsheet,application\/vnd.ms-excel,application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application\/vnd.ms-excel.sheet.macroEnabled.12,application\/vnd.ms-excel.sheet.binary.macroEnabled.12":"Spreadsheets","application\/x-gzip,application\/rar,application\/x-tar,application\/zip,application\/x-7z-compressed":"Archives"},"captions":true,"nonce":{"sendToEditor":"078fccea44"},"post":{"id":7734,"nonce":"b81d45d05c","featuredImageId":-1},"defaultProps":{"link":"","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"oEmbedProxyUrl":"http:\/\/build.wordpress-develop.test\/wp-json\/oembed\/1.0\/proxy","embedExts":["mp3","ogg","flac","m4a","wav","mp4","m4v","webm","ogv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","flac":"audio\/flac","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","flv":"video\/x-flv"},"contentWidth":580,"months":[{"year":"2019","month":"10","text":"October 2019"},{"year":"2019","month":"9","text":"September 2019"},{"year":"2019","month":"7","text":"July 2019"},{"year":"2019","month":"6","text":"June 2019"},{"year":"2014","month":"1","text":"January 2014"},{"year":"2013","month":"12","text":"December 2013"},{"year":"2013","month":"9","text":"September 2013"},{"year":"2013","month":"4","text":"April 2013"},{"year":"2013","month":"3","text":"March 2013"},{"year":"2012","month":"7","text":"July 2012"},{"year":"2012","month":"6","text":"June 2012"},{"year":"2011","month":"7","text":"July 2011"},{"year":"2011","month":"1","text":"January 2011"}],"mediaTrash":0}};
         </script>
         <script src="../../build/wp-includes/js/media-views.js"></script>