[wp-trac] [WordPress Trac] #36908: Customizer menus and widgets "search" usability and visual improvements

[WordPress Trac]

#36908: Customizer menus and widgets "search" usability and visual improvements
---------------------------------------+--------------------------------
 Reporter:  afercia                    |       Owner:  afercia
     Type:  defect (bug)               |      Status:  reviewing
 Priority:  normal                     |   Milestone:  4.7
Component:  Customize                  |     Version:  4.3
 Severity:  normal                     |  Resolution:
 Keywords:  has-screenshots has-patch  |     Focuses:  ui, accessibility
---------------------------------------+--------------------------------
Changes (by afercia):

 * focuses:  ui => ui, accessibility


Comment:

 Starting from @ryankienstra patch (thanks!) I've tried to do my best to
 pair the search widgets functionality with the menu items one. Trying to
 summarise:

 - because of native fonts, the input fields have a different height
 depending on the platform/browser used; this complicates the positioning
 of the icons and there's the need to have a fixed, predictable, height of
 the input field
 - other elements sizes and positions depend on font sizes, line heights,
 etc., so they should (ideally) be the same
 - adjusted the positioning of the elements below the search fields, should
 be consistent between widgets and menus now
 - all the input fields in WordPress have a 1px margin by default, so in
 order to correctly center the search fields one option is to reset at
 least the left and right margins; maybe worth considering to do this
 globally in the Customizer
 - moved some CSS to `customize-controls.css`, this could be further
 improved see #37873
 - the search icon color is now `#72777c` /cc @melchoyce
 - under a 640px viewport the widgets search field container background
 color is now the same of the menu items search (was white)
 - the widget search field is now of type "text" (was "search")
 - added a hidden description for the widget search field, targeted by
 `aria-describedby`
 - added the `clear-results` button to the widgets search
 - removed the `change` and `search` events bound on the widget search, for
 this "live searches" WordPress should standardize on `input` (+ `keyup`
 when needed)
 - added property and function to keep track and update the number of
 available widgets search results
 - the widgets search results are now announced via `wp.a11y.speak()`
 - added a visible and audible message when there are no widgets search
 results
 - some JS refactoring to "cache" jQuery elements

 Some testing would be nice :) @celloexpressions any feedback about the CSS
 changes welcome!

 Screenshots while testing the icons position, backgrounds are for testing
 purposes:

 [[Image(https://cldup.com/4j5MQg7ajg.png)]]

 [[Image(https://cldup.com/D0d-ea3L6q.png)]]

 [[Image(https://cldup.com/LFrPWkIg8b.png)]]

 The aria-live message in action:

 [[Image(https://cldup.com/hERsuPTNsd.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/36908#comment:14>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform