WordPress.org

Make WordPress Core

Changeset 46375


Ignore:
Timestamp:
10/03/2019 12:09:31 PM (2 weeks 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:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/media/views/attachments/browser.js

    r46239 r46375  
    133133
    134134    createToolbar: function() {
    135         var LibraryViewSwitcher, Filters, toolbarOptions;
     135        var LibraryViewSwitcher, Filters, toolbarOptions,
     136            showFilterByType = -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] );
    136137
    137138        toolbarOptions = {
     
    154155        }) );
    155156
    156         if ( -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] ) ) {
    157             // "Filters" will return a <select>, need to render
    158             // screen reader text before
     157        if ( showFilterByType || this.options.date ) {
     158            /*
     159             * Create a h2 heading before the select elements that filter attachments.
     160             * This heading is visible in the modal and visually hidden in the grid.
     161             */
     162            this.toolbar.set( 'filters-heading', new wp.media.view.Heading( {
     163                priority:   -100,
     164                text:       l10n.filterAttachments,
     165                level:      'h2',
     166                className:  'media-attachments-filter-heading'
     167            }).render() );
     168        }
     169
     170        if ( showFilterByType ) {
     171            // "Filters" is a <select>, a visually hidden label element needs to be rendered before.
    159172            this.toolbar.set( 'filtersLabel', new wp.media.view.Label({
    160173                value: l10n.filterByType,
     
    196209            }).render() );
    197210
    198             // DateFilter is a <select>, screen reader text needs to be rendered before
     211            // DateFilter is a <select>, a visually hidden label element needs to be rendered before.
    199212            this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
    200213                value: l10n.filterByDate,
     
    318331
    319332        } else if ( this.options.date ) {
    320             // DateFilter is a <select>, screen reader text needs to be rendered before
     333            // DateFilter is a <select>, a visually hidden label element needs to be rendered before.
    321334            this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
    322335                value: l10n.filterByDate,
     
    334347
    335348        if ( this.options.search ) {
    336             // Search is an input, screen reader text needs to be rendered before
     349            // Search is an input, a visually hidden label element needs to be rendered before.
    337350            this.toolbar.set( 'searchLabel', new wp.media.view.Label({
    338351                value: l10n.searchMediaLabel,
  • trunk/src/js/media/views/selection.js

    r45524 r46375  
    1 var l10n = wp.media.view.l10n,
     1var _n = wp.i18n._n,
     2    sprintf = wp.i18n.sprintf,
    23    Selection;
    34
     
    6162        this.$el.toggleClass( 'editing', editing );
    6263
    63         this.$('.count').text( l10n.selected.replace('%d', collection.length) );
     64        this.$( '.count' ).text(
     65            /* translators: %s: Number of selected media attachments. */
     66            sprintf( _n( '%s item selected', '%s items selected', collection.length ), collection.length )
     67        );
    6468    },
    6569
  • trunk/src/wp-includes/css/media-views.css

    r46373 r46375  
    269269
    270270.media-modal-content .media-frame select.attachment-filters {
    271     margin-top: 11px;
     271    margin-top: 32px;
    272272    margin-right: 2%;
    273273    width: 42%;
     
    306306    overflow: visible;
    307307    border-top: 1px solid #ddd;
    308 }
    309 
    310 @media screen and (max-width: 782px) {
    311     .media-frame-toolbar .media-toolbar {
    312         bottom: -48px;
    313     }
    314308}
    315309
     
    769763
    770764.media-frame.hide-menu .media-frame-menu,
     765.media-frame.hide-menu .media-frame-menu-heading,
    771766.media-frame.hide-router .media-frame-router,
    772767.media-frame.hide-toolbar .media-frame-toolbar {
     
    779774    line-height: 2.27272727;
    780775    margin: 0;
     776}
     777
     778.media-frame-menu-heading,
     779.media-attachments-filter-heading {
     780    position: absolute;
     781    left: 20px;
     782    top: 22px;
     783    margin: 0;
     784    font-size: 13px;
     785    line-height: 1;
     786    /* Above the media-frame-menu. */
     787    z-index: 151;
     788}
     789
     790.media-attachments-filter-heading {
     791    top: 10px;
     792    left: 16px;
     793}
     794
     795.mode-grid .media-attachments-filter-heading {
     796    top: 0;
     797    left: -9999px;
     798}
     799
     800.mode-grid .media-frame-actions-heading {
     801    display: none;
    781802}
    782803
     
    850871 */
    851872.media-frame .search {
    852     margin-top: 10px;
     873    margin-top: 32px;
    853874    padding: 4px;
    854875    font-size: 13px;
     
    11071128.attachments-browser .media-toolbar {
    11081129    right: 300px;
    1109     height: 50px;
     1130    height: 72px;
     1131    background: #fff;
    11101132}
    11111133
     
    11281150.attachments-browser .uploader-inline {
    11291151    position: absolute;
    1130     top: 50px;
     1152    top: 72px;
    11311153    left: 0;
    11321154    right: 300px;
     
    23312353        z-index: 2000;
    23322354        top: 75px;
    2333         left: 0;
     2355        left: 50%;
     2356        transform: translateX(-50%);
    23342357        right: auto;
    23352358        bottom: auto;
     
    23512374    }
    23522375
     2376    /* Visually hide the menu heading keeping it available to assistive technologies. */
     2377    .media-frame-menu-heading {
     2378        clip: rect(1px, 1px, 1px, 1px);
     2379        -webkit-clip-path: inset(50%);
     2380        clip-path: inset(50%);
     2381        height: 1px;
     2382        overflow: hidden;
     2383        padding: 0;
     2384        width: 1px;
     2385        word-wrap: normal !important;
     2386    }
     2387
     2388    /* Reveal the menu toggle button. */
    23532389    .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
    23542390        display: inline-flex;
    23552391        align-items: center;
    2356         vertical-align: top;
    2357         min-height: 40px;
    2358         margin: -6px 6px 0;
     2392        position: absolute;
     2393        left: 50%;
     2394        transform: translateX(-50%);
     2395        margin: -6px 0 0;
    23592396        padding: 0 2px 0 12px;
    23602397        font-size: 0.875rem;
     
    23622399        text-decoration: none;
    23632400        background: transparent;
     2401        /* Only for IE11 to vertically align text within the inline-flex button */
     2402        height: 0.1%;
     2403        /* Modern browsers */
     2404        min-height: 40px;
    23642405    }
    23652406
     
    25652606        font-size: 16px;
    25662607    }
     2608
     2609    .media-frame .media-toolbar input[type="search"] {
     2610        line-height: 1.625; /* 26px */
     2611    }
     2612}
     2613
     2614@media screen and (max-width: 782px) {
     2615    .attachments-browser .media-toolbar {
     2616        height: 82px;
     2617    }
     2618
     2619    .attachments-browser .attachments,
     2620    .attachments-browser .uploader-inline {
     2621        top: 82px;
     2622    }
     2623
     2624    .media-frame .media-toolbar input[type="search"] {
     2625        line-height: 2.25; /* 36px */
     2626    }
     2627
     2628    .media-frame-toolbar .media-toolbar {
     2629        bottom: -48px;
     2630    }
    25672631}
    25682632
     
    26362700        margin-top: 13px;
    26372701    }
    2638 
    2639     .media-frame.hide-router .media-frame-content {
    2640         top: 40px;
    2641     }
    26422702}
    26432703
  • trunk/src/wp-includes/media-template.php

    r46373 r46375  
    179179    <script type="text/html" id="tmpl-media-frame">
    180180        <div class="media-frame-title" id="media-frame-title"></div>
     181        <h2 class="media-frame-menu-heading"><?php _e( 'Media Types' ); ?></h2>
    181182        <button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
    182183            <?php _e( 'Media Types' ); ?>
     
    188189            <div class="media-frame-content"></div>
    189190        </div>
     191        <h2 class="media-frame-actions-heading screen-reader-text"><?php _e( 'Available actions' ); ?></h2>
    190192        <div class="media-frame-toolbar"></div>
    191193        <div class="media-frame-uploader"></div>
  • trunk/src/wp-includes/media.php

    r46239 r46375  
    39323932
    39333933        // Headings
    3934         'attachmentsList'             => __( 'Attachments list' ),
     3934        'filterAttachments'           => __( 'Filter Media' ),
     3935        'attachmentsList'             => __( 'Media list' ),
    39353936    );
    39363937
  • trunk/src/wp-includes/script-loader.php

    r46364 r46375  
    16181618    // To enqueue media-views or media-editor, call wp_enqueue_media().
    16191619    // Both rely on numerous settings, styles, and templates to operate correctly.
    1620     $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 );
     1620    $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 );
    16211621    $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
    16221622    $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
  • trunk/tests/qunit/index.html

    r46294 r46375  
    4545        <script src="../../build/wp-includes/js/mediaelement/mediaelement-and-player.min.js"></script>
    4646        <script src="../../build/wp-includes/js/mediaelement/wp-mediaelement.js"></script>
     47        <script src="../../build/wp-includes/js/dist/i18n.js"></script>
    4748        <script>
    48             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}};
     49            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}};
    4950        </script>
    5051        <script src="../../build/wp-includes/js/media-views.js"></script>
Note: See TracChangeset for help on using the changeset viewer.