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

[dannydehaan]

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.

[SergeyBiryukov]

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

[dannydehaan]

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.

[grahamarmfield]

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.

[jond3r]

Possibly related: #27039

[joedolson]

Update to Twenty-Twelve patch

[joedolson]

Update to Twenty-Thirteen patch

[joedolson]

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

[lancewillett]

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

[lancewillett]

#27039 was marked as a duplicate.

[lancewillett]

#27011 was marked as a duplicate.

[lancewillett]

Twenty Twelve patch needs some work -- the "focus" on all parent elements isn't idea 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.

[lancewillett]

Move IE styles, better JS to avoid breaking layout

[lancewillett]

Better :focus styles for maximum usability

[lancewillett]

Move IE styles, move JS block into existing menu area

[lancewillett]

Bump JS version, JS fixes

[lancewillett]

More JS fixes, namespace the events

[lancewillett]

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.

[lancewillett]

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.

[TomasM]

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!