WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#24839 closed defect (bug) (fixed)

Twenty Twelve and Thirteen: submenu item not visible when parent item is focused

Reported by: dannydehaan Owned by: lancewillett
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.6
Component: Bundled Theme Keywords: has-patch dev-feedback
Focuses: ui, accessibility Cc:
PR Number:

Description

Hi All,

When i create a menu with a submenu, the submenu isn't showing when i've the focus on the parent element.

Especially for visually impaired people this is a big issue i think.

To reproduce, create a menu with submenu and navigate using the TAB button to the menu. You'll see that the submenu doesn't show up.

Attachments (9)

24839-twentytwelve.diff (1.4 KB) - added by dannydehaan 6 years ago.
24839-twentythirteen.diff (833 bytes) - added by dannydehaan 6 years ago.
24839.diff (1.5 KB) - added by joedolson 6 years ago.
Update to Twenty-Twelve patch
24839.twenty-thirteen.2.diff (1.8 KB) - added by joedolson 6 years ago.
Update to Twenty-Thirteen patch
24839.twenty-twelve.2.diff (3.2 KB) - added by lancewillett 6 years ago.
Move IE styles, better JS to avoid breaking layout
24839.twenty-twelve.3.diff (3.9 KB) - added by lancewillett 6 years ago.
Better :focus styles for maximum usability
24839.twenty-thirteen.3.diff (2.3 KB) - added by lancewillett 6 years ago.
Move IE styles, move JS block into existing menu area
24839.twenty-thirteen.4.diff (4.8 KB) - added by lancewillett 6 years ago.
Bump JS version, JS fixes
24839.twenty-twelve.4.diff (4.3 KB) - added by lancewillett 6 years ago.
More JS fixes, namespace the events

Download all attachments as: .zip

Change History (26)

#1 @SergeyBiryukov
6 years ago

  • Summary changed from Submenu not showing when parent item is focussed to Submenu not showing when parent item is focused

I guess it depends on the theme, however I can reproduce in all the bundled themes.

#2 @dannydehaan
6 years ago

This can only be done with Javascript. Unfortunately, we don't have the CSS4 subject selector yet. I've created a little piece of code that does exactly what we want.

As you can see, i've created 2 patches. 1 for Twenty Twelve and 1 for Twenty Thirteen because those are pached with 3.6. If this should be different, please tell me, i'll create another patch with all the changes.

#3 @grahamarmfield
6 years ago

This is working correctly in 2014 in trunk now. But it would still be useful if it was corrected in 2012 and 2013 too for those people who have used those themes or created child themes from them.

Hope to test soon so that it can be included in 3.8.

#4 @nacin
6 years ago

  • Component changed from Accessibility to Bundled Theme
  • Focuses accessibility added

#5 @jond3r
6 years ago

Possibly related: #27039

This ticket was mentioned in IRC in #wordpress-ui by grahamarmfield. View the logs.


6 years ago

@joedolson
6 years ago

Update to Twenty-Twelve patch

@joedolson
6 years ago

Update to Twenty-Thirteen patch

#7 @joedolson
6 years ago

Refreshed both Twenty-Twelve and Twenty-Thirteen patches, on Twenty-Thirteen, also added :focus highlighting for menu.

#8 @joedolson
6 years ago

  • Keywords has-patch added

#9 @lancewillett
6 years ago

  • Focuses ui added
  • Milestone changed from Awaiting Review to 3.9
  • Summary changed from Submenu not showing when parent item is focused to Twenty Twelve and Thirteen: submenu item not visible when parent item is focused

#10 @lancewillett
6 years ago

  • Keywords dev-feedback added

Also related: #27011. We can probably close it and #27039 as duplicates of this ticket.

#11 @lancewillett
6 years ago

#27039 was marked as a duplicate.

#12 @lancewillett
6 years ago

#27011 was marked as a duplicate.

This ticket was mentioned in IRC in #wordpress-themes by lancewillett. View the logs.


6 years ago

#14 @lancewillett
6 years ago

Twenty Twelve patch needs some work -- the "focus" on all parent elements isn't ideal because it breaks the layout a bit (entire menu moves to center). It'd also be super cool to not use jQuery here as the rest of the file is plain JavaScript.

I'll attach a patch shortly, but it's just part-way there.

Last edited 6 years ago by lancewillett (previous) (diff)

@lancewillett
6 years ago

Move IE styles, better JS to avoid breaking layout

@lancewillett
6 years ago

Better :focus styles for maximum usability

@lancewillett
6 years ago

Move IE styles, move JS block into existing menu area

@lancewillett
6 years ago

Bump JS version, JS fixes

@lancewillett
6 years ago

More JS fixes, namespace the events

#15 @lancewillett
6 years ago

In 27606:

Twenty Twelve: improve menu navigation for keyboard and voice-over interactions by properly focusing on submenu items when they are open. See #24839, props dannydehaan, joedolson, lancewillett.

#16 @lancewillett
6 years ago

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

In 27607:

Twenty Thirteen: improve menu navigation for keyboard and voice-over interactions by properly focusing on submenu items when they are open. Closes #24839, props dannydehaan, joedolson, lancewillett, Frank Klein.

#17 @TomasM
6 years ago

Hello, I'm trying to implement this fix to my theme (Tiny Forge) that is based on Twenty Twelve, but I don't know if navigation.js jQuery code works. How can I test it to see the addition of .focus css class? Thank you!

Note: See TracTickets for help on using tickets.