sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Accessibility: Customizer, make the menu items "clear search results" a button.

Browse Source 
For Web standards and accessibility, always prefer native controls instead of
`span` or `div` elements.

Fixes #36903.

git-svn-id: https://develop.svn.wordpress.org/trunk@37679 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2016-06-10 21:21:09 +00:00
parent 0d020faa68
commit a177094f56
3 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/wp-admin/css/customize-nav-menus.css
View File

@ -607,13 +607,17 @@
#available-menu-items-search .clear-results {
position: absolute;
top: 20px;
top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( 4 is ( 28 input height - 20 button height ) / 2 ) */
right: 20px;
width: 20px;
height: 20px;
padding: 0;
border: 0;
cursor: pointer;
background: none;
color: #a00;
text-decoration: none;
outline: 0;
}
#available-menu-items-search .clear-results,
@ -625,9 +629,14 @@
display: block;
}
.ie8 #available-menu-items-search.loading .clear-results:before {
content: ""; /* help IE8 redraw the pseudo element */
}
#available-menu-items-search .clear-results:before {
content: "\f335";
font: normal 20px/1 dashicons;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@ -639,9 +648,9 @@
#available-menu-items-search .spinner {
position: absolute;
top: 20px;
margin: 0 !important;
top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( ( 28 input height - 20 button height ) / 2 ) */
right: 20px;
margin: 0 !important;
}
/* search results list */
@ -840,10 +849,19 @@ li.assigned-to-menu-location .add-new-menu-item {
#available-menu-items #available-menu-items-search .accordion-section-content {
top: 63px;
}
#available-menu-items-search .spinner,
#available-menu-items-search .clear-results {
top: 20px; /* 12 container padding +1 input margin +1 input border +5.5 ( 5.5 rounded to 6 is ( 31 input height - 20 button height ) / 2 ) */
}
}
@media screen and ( max-width: 640px ) {
#available-menu-items #available-menu-items-search .accordion-section-content {
top: 133px;
}
#available-menu-items-search .clear-results {
top: 90px; /* 70 section title height + 12 container padding +1 input margin +1 input border +5.5 ( 5.5 rounded to 6 is ( 31 input height - 20 button height ) / 2 ) */
}
}

20
src/wp-admin/js/customize-nav-menus.js
View File

@ -142,16 +142,8 @@
} );
// Clear the search results.
$( '.clear-results' ).on( 'click keydown', function( event ) {
if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only
return;
}
event.preventDefault();
$( '#menu-items-search' ).val( '' ).focus();
event.target.value = '';
self.search( event );
$( '.clear-results' ).on( 'click', function() {
self.$search.val( '' ).focus().trigger( 'keyup' );
} );
this.$el.on( 'input', '#custom-menu-item-name.invalid, #custom-menu-item-url.invalid', function() {
@ -208,15 +200,11 @@
$otherSections.fadeOut( 100 );
$searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
$searchSection.addClass( 'open' );
$searchSection.find( '.clear-results' )
.prop( 'tabIndex', 0 )
.addClass( 'is-visible' );
$searchSection.find( '.clear-results' ).addClass( 'is-visible' );
} else if ( '' === event.target.value ) {
$searchSection.removeClass( 'open' );
$otherSections.show();
$searchSection.find( '.clear-results' )
.prop( 'tabIndex', -1 )
.removeClass( 'is-visible' );
$searchSection.find( '.clear-results' ).removeClass( 'is-visible' );
}
this.searchTerm = event.target.value;

2
src/wp-includes/class-wp-customize-nav-menus.php
View File

@ -761,8 +761,8 @@ final class WP_Customize_Nav_Menus {
<input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" aria-describedby="menu-items-search-desc" />
<p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
<span class="spinner"></span>
<span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span>
</div>
<button type="button" class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button>
<ul class="accordion-section-content" data-type="search"></ul>
</div>
<div id="new-custom-menu-item" class="accordion-section">