vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 22:30:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Media: Improve the search media field labelling.

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@46418 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-10-07 12:41:50 +00:00
parent 5c91f0d75b
commit 42ef147e5d
8 changed files with 76 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/wp-admin/css/common.css
View File

@@ -3985,6 +3985,10 @@ img {
#screen-meta-links {
margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
}
.wp-filter .search-form input[type="search"] {
font-size: 1rem;
}
}
/* Smartphone */

11
src/wp-admin/css/media.css
View File

@@ -538,7 +538,6 @@ border color while dragging a file over the uploader drop area */
.media-frame.mode-grid .media-toolbar select {
margin: 0 10px 0 0;
font-size: 14px;
}
.media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
@@ -555,8 +554,14 @@ border color while dragging a file over the uploader drop area */
margin-top: 0;
}
.media-frame.mode-grid .spinner {
margin-top: 16px;
.media-search-input-label {
margin: 0 .2em 0 0;
vertical-align: baseline;
}
.media-frame.mode-grid .media-search-input-label {
position: static;
margin: 0 .5em 0 0;
}
.attachments-browser .media-toolbar-secondary > .media-button {

4
src/wp-admin/includes/class-wp-media-list-table.php
View File

@@ -270,8 +270,8 @@ class WP_Media_List_Table extends WP_List_Table {
</div>
<div class="search-form">
<label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label>
<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>
<label for="media-search-input" class="media-search-input-label"><?php esc_html_e( 'Search' ); ?></label>
<input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
</div>
<?php
}