Menu Customizer: focus doesn't move to available menu items search

[afercia]

Regression from 4.3. When activating the "Add Items" button, the available menu items panel opens and focus should move to the search field. Instead, it stays on the button:

No JS errors. Reverting r34219 fixes it. I'm not sure why this is happening but maybe worth considering a couple of things:

• never use "all" for CSS transitions unless strictly necessary. The animated property here is "height" and in fact setting the transition only on "height" fixes it
• not sure using a CSS transition on elements that are already animated with JavaScript is a good idea in the first place. CSS transitions take a start and end values and than make a transition between the two values, while JavaScript animations are usually "continuous" so I'm not sure what's really happening here :)

I'd recommend to completely remove the CSS transition, can't see any relevant difference with or without it, unless I'm missing something.

[westonruter]

@tyxla Thoughts on this, given your patch on #33360 introduced the accessibility regression?

[tyxla]

Wow @afercia, that's what I call a good catch.

@westonruter thanks for pinging me on this one :)

I agree with @afercia on the part that the all is unnecessary. It is better if we use a more concrete transition property here.

However I don't think that the transition should be removed. See how it animates the background color of the accordion title smoothly when you expand any of the available items accordions. This animation is consistent with the accordion slide down/up animation. When you remove the transition, the background color no longer animates smoothly.

Solution: for the transition we should not use all, instead we should be using background-color. Patch coming up.

[tyxla]

Using a more concrete transition property for the available menu items accordion section titles.

[westonruter]

@afercia Does 34125.patch​ fix the accessibility issue?

@mrahmadawais Any confirmation on this patch in relation to the original ticket you opened on #33360 would be appreciated.

[afercia]

Replying to westonruter:

@afercia Does 34125.patch​ fix the accessibility issue?

Yes it does. I've completely missed the smooth background animation, nice :) Looks good to me also in relation to the original ticket #33360.

[mrahmadawais]

Replying to westonruter:

@afercia Does 34125.patch​ fix the accessibility issue?

@mrahmadawais Any confirmation on this patch in relation to the original ticket you opened on #33360 would be appreciated.

@westonruter: Just tested it, working perfect at my end.

[westonruter]

In 34829:

Customizer: Fix moving focus to available nav menu items search.

Fixes regression introduced in [34219].

Props tyxla.
See #33360.
Fixes #34125 for trunk.

[westonruter]

In 34830:

Customizer: Fix moving focus to available nav menu items search.

Fixes regression introduced in [34219].

Cherry-picks [34829].

Props tyxla.
See #33360.
Fixes #34125 for 4.3.