Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#34125 closed defect (bug) (fixed)

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

Reported by: afercia's profile afercia Owned by: westonruter's profile westonruter
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.4
Component: Customize Keywords: has-patch needs-testing
Focuses: ui, accessibility Cc:

Description

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:

https://cldup.com/e9lhbhea7Z.png

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.

Attachments (1)

34125.patch (528 bytes) - added by tyxla 9 years ago.
Using a more concrete transition property for the available menu items accordion section titles.

Download all attachments as: .zip

Change History (10)

#1 @westonruter
9 years ago

  • Keywords needs-patch added
  • Version changed from 4.3 to 4.3.1

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

#2 @tyxla
9 years ago

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
9 years ago

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

#3 @tyxla
9 years ago

  • Keywords has-patch added; needs-patch removed

#4 follow-ups: @westonruter
9 years ago

  • Keywords needs-testing added
  • Milestone changed from 4.4 to 4.3.2
  • Version changed from 4.3.1 to trunk

@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.

#5 in reply to: ↑ 4 @afercia
9 years ago

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.

#6 in reply to: ↑ 4 @mrahmadawais
9 years ago

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.

Last edited 9 years ago by mrahmadawais (previous) (diff)

#7 @westonruter
9 years ago

  • Owner set to westonruter
  • Resolution set to fixed
  • Status changed from new to closed

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.

#8 @westonruter
9 years ago

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.

#9 @johnbillion
8 years ago

  • Milestone changed from 4.3.2 to 4.4
Note: See TracTickets for help on using tickets.