Twenty Thirteen: Menu not accessible in "mobile" size

[rclations]

This is the same issue reported by @artychan in Twenty Twelve (#28224) - making a new ticket for Twenty Thirteen

"When the screen gets narrow enough that the menu is just a button-looking "Menu", the keyboard and screen readers cannot access the links inside the menu."

Similar issues:
#27147 on Twenty Fourteen
#28224 on Twenty Twelve

[rclations]

Implemented the same type of patch used in #27147 and #28224

Not sure we need any :focus styles here since we already have a carrot next to the menu, but I'm happy to add it in if we should.

[lancewillett]

Thanks for the report. I'd love a second opinion on the focus styles.

[DavidTheMachine]

Google Chrome still doesn't have a focus-caret feature, so an outline on :focus would be a good addition.

[DrewAPicture]

With 28293.diff​ I'm seeing a jarring jump on clicking the mobile menu in both FF and Chrome. Seems like a bordered focus style might be a better option, though I'm sure the accessibility folks would have a better-formed idea of what's called for here.

[obenland]

Needs a new patch, addressing the buttons styles and missing :focus styles in the mobile menu.

[rclations]

Thanks for the feedback - this more what we're looking for?

[davidakennedy]

Replying to DrewAPicture:

With 28293.diff​ I'm seeing a jarring jump on clicking the mobile menu in both FF and Chrome. Seems like a bordered focus style might be a better option, though I'm sure the accessibility folks would have a better-formed idea of what's called for here.

I started a patch for this and then found this ticket. :)

I've tested this and it's solid from an accessibility standpoint. Good job, rclations!

I also wanted to mention the source order of the toggle and skip link, since it came up in #28224. Here's what I said there:

Ideally, from an accessibility standpoint, we'd do something like to Underscores: ​https://github.com/Automattic/_s/blob/master/header.php#L23-L34

The issue here is similar to what obenland described. If you're on a touch device and moving around, listening for feedback, it's pretty easy for that Skip to Content link to get in the way of getting to the menu items because of source order.

However, I would hate to break themes for people. That's not cool. The skip link/toggle position isn't perfect, but not bad either. The skip link does come before the actual menu items. I'd say leave it, but make the effort to improve change things in default themes from here on out.

A big bug was fixed here and that's the important part.

[obenland]

rclations, patch is almost there, nice!

A couple of things to add:
Color should be #141412 rather than #000. We should probably pull the padding: 12px 0 12px 20px; from the .menu-toggle selector to the next one, so it applies to all states. We used outline: thin dotted; for focused links, let's do that for the menu toggle too. And we need focus styles for child elements, along the lines of:

.toggled-on .nav-menu > li a:focus,
.toggled-on .nav-menu > ul a:focus {
        background-color: #220e10;
        color: #fff;
}

Could you test it with both, assigned menus and the fallback?

[rclations]

Definitely - thanks for the feedback!

[lancewillett]

Is this still pending? Needs a new patch, or?

[rclations]

Yeah, sorry about that - I've been delinquent about adding another patch. I'll get that wrapped up today

[rclations]

Rerolled the patch with the easy stuff mixed in

---

@obenland which selector were you thinking for the padding? It's on the main .menu-toggle already, I only added to :active to override

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	padding: 10px 24px 11px;
}

I can add the child element styles you recommend, but I think they're already covered by

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
	background-color: #220e10;
	color: #fff;
}

let me know if I'm missing anything or what I can do to get this one wrapped up

[obenland]

@rclations: 28293.4.diff​ was what I had in mind. Would you mind double-checking it?

[rclations]

I see what you mean - looks good to me. Tested with assigned & fallback menus

[lancewillett]

In 29181:

Twenty Thirteen: make small-screen menu accessible to keyboard commands and voice-driven software by using a focusable button element rather than h3 for the toggle element. Fixes #28293, props rclations and obenland.