Mobile menu toggle is not a real control — not keyboard-focusable, zero ARIA attributes #70

Summary

The mobile menu toggle is rendered as a plain <h3> element instead of a real interactive control. It has no role, no tabindex, no aria-expanded, no aria-controls — and is not keyboard-focusable at all, so keyboard-only visitors cannot open the mobile menu.

Where

header.php:

<h3 class="menu-toggle"><?php _e( 'Menu', 'accelerate' ); ?></h3>

This relies entirely on a JS click handler bound to a non-interactive element, which browsers do not include in the default tab order.

Steps to reproduce

1. Load any page on a mobile viewport (≤767px, where the toggle is shown instead of the desktop nav).
2. Try to reach the menu toggle using only the Tab key (no mouse/touch).

Or, via console:

document.querySelector('.menu-toggle').focus();
document.activeElement // still <body>, not the toggle

Actual result

The element cannot receive focus. A keyboard-only visitor has no way to open the mobile navigation menu.

Expected result

The toggle should be a real, focusable control: either a native <button> (preferred) or a <h3>/<span> with role="button" tabindex="0", plus aria-expanded (reflecting open/closed state) and aria-controls pointing at the menu it toggles.

Suggested fix

Change the markup to <button type="button" class="menu-toggle" aria-expanded="false" aria-controls="[menu id]">Menu</button>, and update the JS to toggle aria-expanded alongside the existing show/hide logic.

Environment

Accelerate 1.5.4 (identical pattern in Accelerate Pro — filed separately as themegrill/accelerate-pro#25)

Found during a cross-product QA pass; live-verified via element.focus() in-browser on this theme, confirming the toggle cannot receive keyboard focus. Zakra's own tickets this cycle (ZAK-232, ZAK-233) independently flagged the milder symptoms of the same underlying problem on their own toggle.