[wp-trac] [WordPress Trac] #38091: Shortcut to collapse current control/section/panel is triggered when it shouldn't be

[WordPress Trac]

#38091: Shortcut to collapse current control/section/panel is triggered when it
shouldn't be
--------------------------+--------------------------
 Reporter:  westonruter   |       Owner:  westonruter
     Type:  defect (bug)  |      Status:  accepted
 Priority:  normal        |   Milestone:  4.6.2
Component:  Customize     |     Version:  4.6
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:
--------------------------+--------------------------
Changes (by westonruter):

 * keywords:   => has-patch


Old description:

> In #22237 a keyboard shortcut ESC was added to collapse the currently-
> expanded control, section, or panel. This feature turns out to exhibit
> some unexpected behaviors when attempting to use the ESC key to collapse
> the color picker: it causes the entire section to collapse, not just the
> color picker. Also, if there are any custom modal dialogs or other
> elements (like TinyMCE toolbars) that don't trap the ESC `keydown` event,
> hitting ESC will not only cause the modal/toolbar to close but also
> collapse the current control or section.

New description:

 In #22237 a keyboard shortcut ESC was added to collapse the currently-
 expanded control, section, or panel. This feature turns out to exhibit
 some unexpected behaviors when attempting to use the ESC key to collapse
 the a `ThemesSection` modal, where closing the modal with ESC also causes
 the themes section to collapse unexpectedly, before then re-expanding to
 focus on the theme control.

 Also for the color picker, I expected that hitting ESC would close the
 color picker, but instead it causes the entire section to collapse, not
 just the color picker.

 Lastly, if there are any custom modal dialogs or other elements (like
 TinyMCE toolbars) that don't trap the ESC `keydown` event, hitting ESC
 will not only cause the modal/toolbar to close but also collapse the
 current control or section.

--

Comment:

 In [attachment:38091.0.diff]:

 * On `keydown` events for `ESC` that reach the `body`, abort if the target
 element not the body and is not inside of `#customize-controls`. Such
 events are being triggered on modals and other such elements that are not
 inside of the customizer controls and so they should not cause the current
 control/section/panel to collapse.
 * Let `ThemesSection` listen for `keydown` instead of `keyup`, and let it
 listen to events on the section `container` instead of the `body`. Ensure
 that the `keydown` event for `ESC` has its propagation stopped so that the
 themes section is not then collapsed.
 * Improve color picker by adding support to close the picker when the
 `ESC` key is pressed. When closing the picker, the focus is then added to
 the link that opens the picker. When `ESC` is pressed again, then the
 section is collapsed.

 This is a defect in a new feature added in 4.6 so it could be part of
 4.6.2

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