[wp-trac] [WordPress Trac] #36903: Customizer menus search "clear results" should be a button

[WordPress Trac]

#36903: Customizer menus search "clear results" should be a button
-------------------------------------------+-----------------------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Customize                      |    Version:
 Severity:  normal                         |   Keywords:
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 See #33184.

 For accessibility, UI controls should preferably be native controls.
 During the Menu Customizer development many controls initially implemented
 with `<span>` or `<div>` elements were changed in `<button>` elements
 except the "clear results" control that appears in the menu items search.
 That was because of an issue with JavaScript events discussed in #33184
 and there was no solution/consensus so this control is still a `<span>`
 element.

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

 The "clear results" control is inside a `.accordion-section-title`
 container and `accordion.js` adds one `click` and one `keydown` events on
 this container even if it is not used as a real accordion.
 When changing the "clear results" span in a button and removing the
 `keydown` event from it, this caused a conflict with events bound on the
 container. Specifically, the new button didn't work when pressing Enter.

 I'd propose a simpler approach: just move this control outside from
 `.accordion-section-title`. This way, the `accordion.js` jQuery selector
 won't target the new button and events won't conflict.

 The new button should have a type="button" attribute so there's no need to
 use `preventDefault()`. Also, buttons need just one `click` event and this
 would allow to simplify and clean-up the JS part.

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