Make WordPress Core

Changeset 46418


Ignore:
Timestamp:
10/07/2019 12:41:50 PM (5 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.