Instead of lazily generating a <select> element and replacing the menu with it, instead add a <button> to the server-rendered menu, that is only visible on narrow viewports, and let it control display of the main <nav> element as-is.
Changes:
Under 480px:
Let the menu be visible when open.
Give each menu item full width (the styles for these already existed in base.css but became unused many years ago when TinyNav was added).
Give each menu item a dark background shade, to give it a clear tappable area. This is the same shade we use for the menu on desktop.
Between 480-700px was now the only viewport where the menu doesn't feature any dark shade. To avoid this viewport appearing like the menu items hang "loose" in the top-level document, let it inherit the default dark background shade we give to the menu, thus removing the previous overrides that made the menu transparent <700px. Also, to ensure layout consistenty, move the top corner rounding for #content-wrapper from <700px to <480px as otherwise these round corners would bump against the square outline of the menu darkening.
Instead of lazily generating a
<select>element and replacing the menu with it, instead add a<button>to the server-rendered menu, that is only visible on narrow viewports, and let it control display of the main<nav>element as-is.Changes:
Under 480px:
Between 480-700px was now the only viewport where the menu doesn't feature any dark shade. To avoid this viewport appearing like the menu items hang "loose" in the top-level document, let it inherit the default dark background shade we give to the menu, thus removing the previous overrides that made the menu transparent <700px. Also, to ensure layout consistenty, move the top corner rounding for #content-wrapper from <700px to <480px as otherwise these round corners would bump against the square outline of the menu darkening.
Focus first item on menu open, as per https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/.