All: replace TinyNav.js with collapsibe button for <nav>
#452
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
* Focus first item on menu open,
as per <https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/>.
mgol
approved these changes
Jan 16, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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/.