Customizer - Add a Widget - Focus gets lost

[GrahamArmfield]

There are a couple of keyboard focus issues around the Add a Widget button in Customizer > Widgets.

I'm noticing different behaviours on Chrome 35 and Firefox 30 - both running on Windows 7 64 bit.

In Chrome 35:

• Tab to Appearance > Customize > Widgets > Any Widget Area
• Tab to the Add a Widget Button and press Enter
• Focus is now clearly within Search widgets box of the extra panel.
• Press Shift + Tab to tab back to Add a Widget button and Press Enter.
• Focus has now gone somewhere unexpected and then appears at bottom of site page being shown in Customizer

Expected result:
I would expect the focus to stay on the Add a Widget button.

In Firefox, a slightly different result appears.

• Tab to Appearance > Customize > Widgets > Any Widget Area
• Tab to the Add a Widget Button and press Enter
• Focus is now clearly within Search widgets box of the extra panel.
• Press Shift + Tab to tab back to Add a Widget button and Press Enter.
• Focus is now at bottom of site page being shown in Customizer

Expected result:
I would expect the focus to stay on the Add a Widget button.

[celloexpressions]

The add-widgets panel html is at the end of the page, so we'll need to auto-focus when going out of that panel just like we do going into it. Should probably return to the add-widget button from both the top and the bottom of that panel.

[sathishn]

Bug Fix

[sathishn]

Remove console.log and exported patch from src

[sathishn]

Updated spaces to tab

[sathishn]

Fixed formatting of code in the patch

[celloexpressions]

Per IRC, 28835_5.patch​ is good to go. However, the patch may be mis-formatted or something - it doesn't apply for me. Manually merging and testing it, it works as expected.

[SergeyBiryukov]

In 29237:

Customizer: Avoid losing focus when adding widgets via keyboard.

props sathishn.
fixes #28835.