Make WordPress Core

Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#24839 closed defect (bug) (fixed)

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

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

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

Download all attachments as: .zip

Change History (26)

#1 @SergeyBiryukov
11 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
11 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
11 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
10 years ago

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

#5 @jond3r
10 years ago

Possibly related: #27039

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


10 years ago

@joedolson
10 years ago

Update to Twenty-Twelve patch

@joedolson
10 years ago

Update to Twenty-Thirteen patch

#7 @joedolson
10 years ago

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

#8 @joedolson
10 years ago

  • Keywords has-patch added

#9 @lancewillett
10 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
10 years ago

  • Keywords dev-feedback added

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

#11 @lancewillett
10 years ago

#27039 was marked as a duplicate.

#12 @lancewillett
10 years ago

#27011 was marked as a duplicate.

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


10 years ago

#14 @lancewillett
10 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 10 years ago by lancewillett (previous) (diff)

@lancewillett
10 years ago

Move IE styles, better JS to avoid breaking layout

@lancewillett
10 years ago

Better :focus styles for maximum usability

@lancewillett
10 years ago

Move IE styles, move JS block into existing menu area

@lancewillett
10 years ago

Bump JS version, JS fixes

@lancewillett
10 years ago

More JS fixes, namespace the events

#15 @lancewillett
10 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
10 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
10 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.