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

Customize: Improve the widgets and menu items search.

Browse Source 
- adds a "search" icon into the search fields
- adds a hidden description for the widget search field, targeted by `aria-describedby`
- adds the "clear-results" button to the widgets search
- removes the `change` and `search` events bound on the widget search, for these "live searches" WordPress should standardize on `input` (+ `keyup` when needed)
- adds property and function to keep track and update the number of the widgets search results
- the widgets search results are now announced via `wp.a11y.speak()`
- adds a visible and audible message when there are no widgets search results
- moves some CSS to `customize-controls.css`

Props ryankienstra, melchoyce, afercia.
Fixes #36908.


git-svn-id: https://develop.svn.wordpress.org/trunk@38709 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2016-10-03 16:27:55 +00:00
parent bcf50fedcd
commit 395823c9cd
6 changed files with 178 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/customize-controls.css
+107 -7
View File
@@ -1409,6 +1409,11 @@ body.adding-widget .add-new-widget:before,
overflow: auto;
bottom: 0;
width: 100%;
border-top: 1px solid #ddd;
}
.no-widgets-found #available-widgets-list {
border-top: none;
}
#available-widgets-filter {
@@ -1417,13 +1422,12 @@ body.adding-widget .add-new-widget:before,
z-index: 1;
width: 300px;
background: #eee;
border-bottom: 1px solid #e5e5e5;
}
/* search field container */
#available-widgets-filter,
#available-menu-items-search .accordion-section-title {
padding: 12px 15px;
padding: 13px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -1431,8 +1435,101 @@ body.adding-widget .add-new-widget:before,
#available-widgets-filter input,
#available-menu-items-search input {
padding: 6px 10px;
width: 100%;
height: 32px;
margin: 1px 0;
padding: 6px 30px;
}
#available-widgets-filter input::-ms-clear,
#available-menu-items-search input::-ms-clear {
display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
}
#available-menu-items-search .search-icon,
#available-widgets-filter .search-icon {
display: block;
position: absolute;
top: 15px; /* 13 container padding +1 input margin +1 input border */
left: 16px;
width: 30px;
height: 30px;
line-height: 28px;
text-align: center;
color: #72777c;
}
#available-widgets-filter .clear-results,
#available-menu-items-search .clear-results {
position: absolute;
top: 15px; /* 13 container padding +1 input margin +1 input border */
right: 16px;
width: 30px;
height: 30px;
padding: 0;
border: 0;
cursor: pointer;
background: none;
color: #a00;
text-decoration: none;
outline: 0;
}
#available-widgets-filter .clear-results,
#available-menu-items-search .clear-results,
#available-menu-items-search.loading .clear-results.is-visible {
display: none;
}
#available-widgets-filter .clear-results.is-visible,
#available-menu-items-search .clear-results.is-visible {
display: block;
}
#available-widgets-filter .clear-results:before,
#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;
}
#available-widgets-filter .clear-results:hover,
#available-widgets-filter .clear-results:focus,
#available-menu-items-search .clear-results:hover,
#available-menu-items-search .clear-results:focus {
color: #dc3232;
}
#available-widgets-filter .clear-results:focus,
#available-menu-items-search .clear-results:focus {
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
#available-menu-items-search .search-icon:after,
#available-widgets-filter .search-icon:after {
content: "\f179";
font: normal 20px/1 dashicons;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.no-widgets-found-message {
display: none;
margin: 0;
padding: 0 15px;
line-height: inherit;
}
.no-widgets-found .no-widgets-found-message {
display: block;
}
#available-widgets .widget-top,
@@ -1450,7 +1547,7 @@ body.adding-widget .add-new-widget:before,
position: relative;
padding: 20px 15px 20px 60px;
background: #fff;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid #ddd;
border-left: 4px solid #fff;
cursor: pointer;
display: none;
@@ -1628,12 +1725,15 @@ body.adding-widget .add-new-widget:before,
#available-widgets-filter {
position: relative;
width: 100%;
background: #fff;
height: auto;
padding: 10px 15px;
}
#available-widgets-list {
top: 140px;
top: 130px;
}
#available-menu-items-search .clear-results,
#available-menu-items-search .search-icon {
top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */
}
}
src/wp-admin/css/customize-nav-menus.css
+9 -55
View File
@@ -688,58 +688,17 @@
margin: 0 20px;
}
#available-menu-items-search .clear-results {
position: absolute;
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,
#available-menu-items-search.loading .clear-results.is-visible {
display: none;
}
#available-menu-items-search .clear-results.is-visible {
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;
}
#available-menu-items-search .clear-results:hover,
#available-menu-items-search .clear-results:focus {
color: #f00;
}
#available-menu-items-search .spinner {
position: absolute;
top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( ( 28 input height - 20 button height ) / 2 ) */
right: 20px;
top: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */
right: 21px;
margin: 0 !important;
}
/* search results list */
#available-menu-items #available-menu-items-search .accordion-section-content {
position: absolute;
left: 1px;
left: 0;
top: 60px; /* below title div / search input */
bottom: 0px; /* 100% height that still triggers lazy load */
max-height: none;
@@ -750,6 +709,11 @@
box-sizing: border-box;
}
#available-menu-items-search .nothing-found {
/* Compensate the 1px top padding of the container. */
margin-top: -1px;
}
#available-menu-items-search .accordion-section-title:after {
display: none;
}
@@ -920,7 +884,6 @@ li.assigned-to-menu-location .add-new-menu-item {
.customize-screen-options-toggle:focus:before,
#customize-controls .customize-info .customize-help-toggle:focus:before,
.wp-customizer button:focus .toggle-indicator:after,
#available-menu-items-search .clear-results:focus,
.menu-delete:focus,
.menu-item-bar .item-delete:focus:before,
#available-menu-items .item-add:focus:before {
@@ -937,19 +900,10 @@ 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 ) */
top: 130px;
}
}