WordPress.org
Get WordPress

Make WordPress Core

Changeset 46418


Ignore:
Timestamp:
10/07/2019 12:41:50 PM (7 years ago)
Author:
afercia
Message:

Accessibility: Media: Improve the search media field labelling.

Visible <label> elements benefit all users. The placeholder attribute should not be used as a replacement for visible labels.
Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format.

Screen readers may not announce a placeholder attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example:

  • users with cognitive disabilities may have trouble remembering what the filled field does
  • speech recognition users cannot see the name they can speak to set focus on the field
  • low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input

Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia.
See #40331.
Fixes #47138.

Location:
trunk/src
Files:
8 edited

Legend:

Unmodified
Added
Removed

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

    r46375 r46418  
    349349                        // Search is an input, a visually hidden label element needs to be rendered before.
    350350                        this.toolbar.set( 'searchLabel', new wp.media.view.Label({
    351                                 value: l10n.searchMediaLabel,
     351                                value: l10n.searchLabel,
     352                                className: 'media-search-input-label',
    352353                                attributes: {
    353354                                        'for': 'media-search-input'

  • trunk/src/js/media/views/button/select-mode-toggle.js

    r45147 r46418  
    5858                        children.not( '.spinner, .media-button' ).hide();
    5959                        this.$el.show();
     60                        toolbar.$el.addClass( 'media-toolbar-mode-select' );
    6061                        toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
    6162                } else {
    … …  
    6667                        this.controller.content.get().$el.removeClass( 'fixed' );
    6768                        toolbar.$el.css( 'width', '' );
     69                        toolbar.$el.removeClass( 'media-toolbar-mode-select' );
    6870                        toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
    6971                        children.not( '.media-button' ).show();

  • trunk/src/js/media/views/search.js

    r46239 r46418  
    1 var l10n = wp.media.view.l10n,
    2         Search;
     1var Search;
    32
    43/**
    … …  
    1817
    1918        attributes: {
    20                 type:        'search',
    21                 placeholder: l10n.searchMediaPlaceholder
     19                type: 'search'
    2220        },
    2321

  • trunk/src/wp-admin/css/common.css

    r46411 r46418  
    39863986                margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
    39873987        }
     3988
     3989        .wp-filter .search-form input[type="search"] {
     3990                font-size: 1rem;
     3991        }
    39883992}
    39893993

  • trunk/src/wp-admin/css/media.css

    r46359 r46418  
    539539.media-frame.mode-grid .media-toolbar select {
    540540        margin: 0 10px 0 0;
    541         font-size: 14px;
    542541}
    543542
    … …  
    556555}
    557556
    558 .media-frame.mode-grid .spinner {
    559         margin-top: 16px;
     557.media-search-input-label {
     558        margin: 0 .2em 0 0;
     559        vertical-align: baseline;
     560}
     561
     562.media-frame.mode-grid .media-search-input-label {
     563        position: static;
     564        margin: 0 .5em 0 0;
    560565}
    561566

  • trunk/src/wp-admin/includes/class-wp-media-list-table.php

    r45932 r46418  
    271271
    272272        <div class="search-form">
    273                 <label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label>
    274                 <input type="search" placeholder="<?php esc_attr_e( 'Search media items...' ); ?>" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
     273                <label for="media-search-input" class="media-search-input-label"><?php esc_html_e( 'Search' ); ?></label>
     274                <input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
    275275        </div>
    276276                <?php

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

    r46375 r46418  
    311311        float: right;
    312312        height: 100%;
     313        position: relative;
    313314}
    314315
    … …  
    871872 */
    872873.media-frame .search {
    873         margin-top: 32px;
     874        margin: 32px 0 0;
    874875        padding: 4px;
    875876        font-size: 13px;
    … …  
    881882.media-toolbar-primary .search {
    882883        max-width: 100%;
     884}
     885
     886.media-frame .media-search-input-label {
     887        position: absolute;
     888        left: 0;
     889        top: 10px;
     890        margin: 0;
     891        line-height: 1;
    883892}
    884893
    … …  
    11661175}
    11671176
     1177.mode-grid .attachments-browser .media-toolbar-primary {
     1178        display: flex;
     1179        align-items: center;
     1180}
     1181
     1182.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
     1183        display: none;
     1184}
     1185
    11681186.attachments-browser .media-toolbar-secondary {
    11691187        max-width: 66%;
    … …  
    16511669}
    16521670
     1671.media-frame.mode-grid .spinner {
     1672        margin: 0;
     1673        float: none;
     1674        vertical-align: middle;
     1675}
     1676
     1677.media-modal .media-toolbar .spinner {
     1678        float: none;
     1679        vertical-align: bottom;
     1680        margin: 0 0 5px 5px;
     1681}
     1682
    16531683.media-frame .spinner.is-active {
    16541684        visibility: visible;
    1655 }
    1656 
    1657 .media-toolbar .spinner {
    1658         margin-top: 14px;
    16591685}
    16601686
    … …  
    24942520        }
    24952521
     2522        .media-frame .media-toolbar input[type="search"] {
     2523                line-height: 2.25; /* 36px */
     2524        }
     2525
    24962526        .media-sidebar .setting select.columns,
    24972527        .attachment-details .setting select.columns {
    … …  
    25032533        .media-frame .search {
    25042534                padding: 3px 6px;
     2535        }
     2536
     2537        .wp-admin .media-frame select {
     2538                min-height: 40px;
     2539                font-size: 16px;
     2540                line-height: 1.625;
     2541                padding: 5px 24px 5px 8px;
    25052542        }
    25062543
    … …  
    25892626        .media-modal .attachments-browser .media-toolbar .attachment-filters {
    25902627                height: auto;
    2591         }
    2592 
    2593         .media-modal .attachments-browser .media-toolbar .spinner {
    2594                 margin: 14px 2px 0;
    25952628        }
    25962629
    … …  
    26082641
    26092642        .media-frame .media-toolbar input[type="search"] {
    2610                 line-height: 1.625; /* 26px */
     2643                line-height: 2.3755; /* 38px */
     2644        }
     2645
     2646        .media-modal .media-toolbar .spinner {
     2647                margin-bottom: 10px;
    26112648        }
    26122649}
    … …  
    26222659        }
    26232660
    2624         .media-frame .media-toolbar input[type="search"] {
    2625                 line-height: 2.25; /* 36px */
    2626         }
    2627 
    26282661        .media-frame-toolbar .media-toolbar {
    26292662                bottom: -48px;
     2663        }
     2664}
     2665
     2666@media screen and (max-width: 782px) {
     2667        .mode-grid .attachments-browser .media-toolbar-primary {
     2668                display: block;
    26302669        }
    26312670}

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

    r46376 r46418  
    38493849                'filterByDate'                => __( 'Filter by date' ),
    38503850                'filterByType'                => __( 'Filter by type' ),
    3851                 'searchMediaLabel'            => __( 'Search Media' ),
    3852                 'searchMediaPlaceholder'      => __( 'Search media items...' ), // placeholder (no ellipsis)
     3851                'searchLabel'                 => __( 'Search' ),
     3852                'searchMediaLabel'            => __( 'Search Media' ), // backwards compatibility pre-5.3
     3853                'searchMediaPlaceholder'      => __( 'Search media items...' ), // placeholder (no ellipsis), backwards compatibility pre-5.3
    38533854                'mediaFound'                  => __( 'Number of media items found: %d' ),
    38543855                'mediaFoundHasMoreResults'    => __( 'Number of media items displayed: %d. Scroll the page for more results.' ),
Note: See TracChangeset for help on using the changeset viewer.