Shortcut to collapse current control/section/panel is triggered when it shouldn't be

[westonruter]

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.

[westonruter]

In 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

[westonruter]

@celloexpressions As this relates to the themes section, please review and confirm whether you think this fix is warranted for 4.6.2.

[celloexpressions]

While this is a defect, it could also be considered an enhancement in some aspects, and represents a fairly large change for a minor release. There also haven't been any reports of this in the wild, which would indicate that no one knows that this feature is now available. That means that anyone testing a minor release beta would be unlikely to test that, making the potential for additional or newly-introduced breakage to occur. For those reasons, I think we should target 4.7 for these changes.

I actually just fixed this for the new themes section in the latest patch on #37661 on Saturday, and with the way that the modal there works (and collapsing a section will collapse the panel), 38091.0.diff​ will cause conflicts with the patch. Ideally, if we could revisit this after an initial commit on #37661, that'll be the easiest way to minimize reworking things.

[jorbin]

Some extra eyes on this patch and testing would be good.

[desrosj]

Tested the first two items on the patch successfully. I can't find any examples of TinyMCE toolbars to test the last item though.

[celloexpressions]

This almost certainly needs to be refreshed to account for the related changes in #37661. At a minimum it needs a fresh round of testing.

[westonruter]

Patch refreshed.

[westonruter]

@celloexpressions @desrosj can you please test the latest patch? I want to commit today for Beta2.

[westonruter]

In 39120:

Customize: Prevent collapsing expanded panel/section/control when Esc is pressed on another closable UI element.

Prevents collapsing constructs when hitting Esc on a TinyMCE toolbar, lightbox, or expanded color picker.

See #22237.
Fixes #38091.