[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:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Customize     |    Version:
 Severity:  normal        |   Keywords:  has-screenshots
  Focuses:  ui            |
--------------------------+-----------------------------
 The search fields for available menu items and available widgets look
 similar, even if behind the scenes they do very different things. But from
 a user perspective they are very similar.

 I'd propose to improve a bit the UI. In the Menus, the search field has a
 `type=text` attribute while in the widgets has a `type=search` attribute.
 This introduces some inconsistency, both from a visual and functional
 perspective.

 Worth reminding not all browsers display a control to clear the input
 field when it has a `type=search` attribute. See in the screenshots below:

 [[Image(https://cldup.com/dhC-gbR15a.png)]]

 At the very least, I'd propose for the Menu items search:
 - increase the "Clear results" clickable area
 - use some right padding on the input field since when the search terms
 are very long, the text goes behind the spinner and the "Clear Results"
 control
 - IE11 and Edge display a native "clear" control also for `type=text`
 input fields that should be removed, see screenshot below

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

 Not sure about the widgets search field, ideally it would be great to pair
 it with the menu items search and implement the same custom control to
 clear the field.

 See also #36903 which proposes to use a `button` element for the Menus
 search field.

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