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. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
51814d68af
commit
1f3d583825
|
|
@ -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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -538,7 +538,6 @@ border color while dragging a file over the uploader drop area */
|
|||
|
||||
.media-frame.mode-grid .media-toolbar select {
|
||||
margin: 0 0 0 10px;
|
||||
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 0 0 .2em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.media-frame.mode-grid .media-search-input-label {
|
||||
position: static;
|
||||
margin: 0 0 0 .5em;
|
||||
}
|
||||
|
||||
.attachments-browser .media-toolbar-secondary > .media-button {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -310,6 +310,7 @@
|
|||
.media-toolbar-primary {
|
||||
float: left;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media-toolbar-secondary {
|
||||
|
|
@ -870,7 +871,7 @@
|
|||
* Search
|
||||
*/
|
||||
.media-frame .search {
|
||||
margin-top: 32px;
|
||||
margin: 32px 0 0;
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
|
|
@ -882,6 +883,14 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.media-frame .media-search-input-label {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attachments
|
||||
*/
|
||||
|
|
@ -1165,6 +1174,15 @@
|
|||
max-width: 33%;
|
||||
}
|
||||
|
||||
.mode-grid .attachments-browser .media-toolbar-primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.attachments-browser .media-toolbar-secondary {
|
||||
max-width: 66%;
|
||||
}
|
||||
|
|
@ -1650,12 +1668,20 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.media-frame .spinner.is-active {
|
||||
visibility: visible;
|
||||
.media-frame.mode-grid .spinner {
|
||||
margin: 0;
|
||||
float: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.media-toolbar .spinner {
|
||||
margin-top: 14px;
|
||||
.media-modal .media-toolbar .spinner {
|
||||
float: none;
|
||||
vertical-align: bottom;
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.media-frame .spinner.is-active {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2493,6 +2519,10 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 2.25; /* 36px */
|
||||
}
|
||||
|
||||
.media-sidebar .setting select.columns,
|
||||
.attachment-details .setting select.columns {
|
||||
width: auto;
|
||||
|
|
@ -2504,6 +2534,13 @@
|
|||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
.wp-admin .media-frame select {
|
||||
min-height: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 1.625;
|
||||
padding: 5px 8px 5px 24px;
|
||||
}
|
||||
|
||||
.image-details .column-image {
|
||||
width: 30%;
|
||||
right: 70%;
|
||||
|
|
@ -2590,10 +2627,6 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.media-modal .attachments-browser .media-toolbar .spinner {
|
||||
margin: 14px 2px 0;
|
||||
}
|
||||
|
||||
/* Text inputs need to be 16px, or they force zooming on iOS */
|
||||
.media-frame input[type="text"],
|
||||
.media-frame input[type="password"],
|
||||
|
|
@ -2607,7 +2640,11 @@
|
|||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 1.625; /* 26px */
|
||||
line-height: 2.3755; /* 38px */
|
||||
}
|
||||
|
||||
.media-modal .media-toolbar .spinner {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2621,15 +2658,17 @@
|
|||
top: 82px;
|
||||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 2.25; /* 36px */
|
||||
}
|
||||
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
bottom: -48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.mode-grid .attachments-browser .media-toolbar-primary {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive on portrait and landscape */
|
||||
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
|
||||
/* Full-bleed modal */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -310,6 +310,7 @@
|
|||
.media-toolbar-primary {
|
||||
float: right;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media-toolbar-secondary {
|
||||
|
|
@ -870,7 +871,7 @@
|
|||
* Search
|
||||
*/
|
||||
.media-frame .search {
|
||||
margin-top: 32px;
|
||||
margin: 32px 0 0;
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
|
|
@ -882,6 +883,14 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.media-frame .media-search-input-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attachments
|
||||
*/
|
||||
|
|
@ -1165,6 +1174,15 @@
|
|||
max-width: 33%;
|
||||
}
|
||||
|
||||
.mode-grid .attachments-browser .media-toolbar-primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.attachments-browser .media-toolbar-secondary {
|
||||
max-width: 66%;
|
||||
}
|
||||
|
|
@ -1650,12 +1668,20 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.media-frame .spinner.is-active {
|
||||
visibility: visible;
|
||||
.media-frame.mode-grid .spinner {
|
||||
margin: 0;
|
||||
float: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.media-toolbar .spinner {
|
||||
margin-top: 14px;
|
||||
.media-modal .media-toolbar .spinner {
|
||||
float: none;
|
||||
vertical-align: bottom;
|
||||
margin: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.media-frame .spinner.is-active {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2493,6 +2519,10 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 2.25; /* 36px */
|
||||
}
|
||||
|
||||
.media-sidebar .setting select.columns,
|
||||
.attachment-details .setting select.columns {
|
||||
width: auto;
|
||||
|
|
@ -2504,6 +2534,13 @@
|
|||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
.wp-admin .media-frame select {
|
||||
min-height: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 1.625;
|
||||
padding: 5px 24px 5px 8px;
|
||||
}
|
||||
|
||||
.image-details .column-image {
|
||||
width: 30%;
|
||||
left: 70%;
|
||||
|
|
@ -2590,10 +2627,6 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.media-modal .attachments-browser .media-toolbar .spinner {
|
||||
margin: 14px 2px 0;
|
||||
}
|
||||
|
||||
/* Text inputs need to be 16px, or they force zooming on iOS */
|
||||
.media-frame input[type="text"],
|
||||
.media-frame input[type="password"],
|
||||
|
|
@ -2607,7 +2640,11 @@
|
|||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 1.625; /* 26px */
|
||||
line-height: 2.3755; /* 38px */
|
||||
}
|
||||
|
||||
.media-modal .media-toolbar .spinner {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2621,15 +2658,17 @@
|
|||
top: 82px;
|
||||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 2.25; /* 36px */
|
||||
}
|
||||
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
bottom: -48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.mode-grid .attachments-browser .media-toolbar-primary {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive on portrait and landscape */
|
||||
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
|
||||
/* Full-bleed modal */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -965,6 +965,7 @@ SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto
|
|||
} );
|
||||
children.not( '.spinner, .media-button' ).hide();
|
||||
this.$el.show();
|
||||
toolbar.$el.addClass( 'media-toolbar-mode-select' );
|
||||
toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
|
||||
} else {
|
||||
this.model.set( {
|
||||
|
|
@ -973,6 +974,7 @@ SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto
|
|||
} );
|
||||
this.controller.content.get().$el.removeClass( 'fixed' );
|
||||
toolbar.$el.css( 'width', '' );
|
||||
toolbar.$el.removeClass( 'media-toolbar-mode-select' );
|
||||
toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
|
||||
children.not( '.media-button' ).show();
|
||||
this.controller.state().get( 'selection' ).reset();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7578,8 +7578,7 @@ module.exports = Attachments;
|
|||
/* 77 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
var l10n = wp.media.view.l10n,
|
||||
Search;
|
||||
var Search;
|
||||
|
||||
/**
|
||||
* wp.media.view.Search
|
||||
|
|
@ -7597,8 +7596,7 @@ Search = wp.media.View.extend(/** @lends wp.media.view.Search.prototype */{
|
|||
id: 'media-search-input',
|
||||
|
||||
attributes: {
|
||||
type: 'search',
|
||||
placeholder: l10n.searchMediaPlaceholder
|
||||
type: 'search'
|
||||
},
|
||||
|
||||
events: {
|
||||
|
|
@ -8310,7 +8308,8 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
|
|||
if ( this.options.search ) {
|
||||
// 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,
|
||||
value: l10n.searchLabel,
|
||||
className: 'media-search-input-label',
|
||||
attributes: {
|
||||
'for': 'media-search-input'
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3848,8 +3848,9 @@ function wp_enqueue_media( $args = array() ) {
|
|||
'apply' => __( 'Apply' ),
|
||||
'filterByDate' => __( 'Filter by date' ),
|
||||
'filterByType' => __( 'Filter by type' ),
|
||||
'searchMediaLabel' => __( 'Search Media' ),
|
||||
'searchMediaPlaceholder' => __( 'Search media items...' ), // placeholder (no ellipsis)
|
||||
'searchLabel' => __( 'Search' ),
|
||||
'searchMediaLabel' => __( 'Search Media' ), // backwards compatibility pre-5.3
|
||||
'searchMediaPlaceholder' => __( 'Search media items...' ), // placeholder (no ellipsis), backwards compatibility pre-5.3
|
||||
'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.' ),
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.3-beta2-46417';
|
||||
$wp_version = '5.3-beta2-46418';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue