All: replace TinyNav.js with collapsibe button for <nav> (#452)

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/>.

Closes gh-452

Author: Krinkle

NOTICE.txt

@@ -42,10 +42,6 @@ with this program; if not, write to the Free Software Foundation, Inc.,
   located at themes/jquery/lib/normalize
   and included in themes/jquery/css/base.css
 
-- TinyNav.js
-  http://tinynav.com/
-  located at themes/jquery/js/plugins.js
-
 - typesense-minibar
   https://github.com/jquery/typesense-minibar
   located at themes/jquery/lib/typesense-minibar

themes/jquery/css/base.css

@@ -1351,9 +1351,6 @@ iframe {
 	border-left: 1px solid rgba(0, 0, 0, 0.347656);
 }
 
-.tinynav-container { display: none; }
-.tinynav { display: none; }
-
 #global-nav nav ul.links {
 	float: right;
 }
@@ -2801,11 +2798,6 @@ footer .books li a cite {
 		font-size: 12px;
 	}
 
-	#logo-events {
-		padding-top: 20px;
-		padding-bottom: 10px;
-	}
-
 	#logo-events aside {
 		display: inline-block;
 		position: relative;
@@ -2821,16 +2813,6 @@ footer .books li a cite {
 		margin-right: auto;
 	}
 
-	nav#main {
-		background-color: rgba(0, 0, 0, 0.0);
-		border-radius: 10px 10px 0 0;
-		border-right: none;
-		border-left: none;
-		border-top: none;
-		box-shadow: none;
-		padding-top: 10px;
-	}
-
 	nav#main .searchform {
 		display: block;
 		float: none;
@@ -2871,11 +2853,6 @@ footer .books li a cite {
 		font-size: 14px;
 	}
 
-	#content-wrapper {
-		border-top-left-radius: 10px;
-		border-top-right-radius: 10px;
-	}
-
 	.content-full.full-width #content,
 	.content-right #content,
 	.content-left #content {
@@ -2942,25 +2919,31 @@ footer .books li a cite {
 		border-top: none !important;
 	}
 
-	.tinynav-container {
-		display: block;
+	.menu-top-container {
+		display: flex;
+		flex-flow: column;
+	}
+
+	.menu-top-container .menu-trigger {
+		display: inline-block !important;
+		align-self: flex-end;
 	}
 
 	#menu-top {
 		display: none;
 	}
 
-	.tinynav {
+	#menu-top.menu-open {
 		display: block;
-		width: 100%;
-		margin: 0 auto 15px;
-		position: relative;
-		top: 6px;
-		left: 0;
+		background-color: rgba(0, 0, 0, 0.18);
+		margin-top: 6px;
 	}
 
 	nav#main {
 		padding: 0;
+		background: none;
+		border: none;
+		box-shadow: none;
 	}
 
 	nav#main .searchform {
@@ -2991,6 +2974,8 @@ footer .books li a cite {
 	}
 
 	#content-wrapper {
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
 		padding-left: 25px;
 		padding-right: 25px;
 	}

themes/jquery/header.php

@@ -23,7 +23,6 @@
 	<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>?v=6">
 
 	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-	<script src="<?php echo get_template_directory_uri(); ?>/js/plugins.js"></script>
 	<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
 <?php
 	if ( get_option( 'thread_comments' ) && comments_open() ) {

themes/jquery/js/main.js

@@ -9,13 +9,19 @@ $(function() {
 		}
 	});
 
-	/*
-	 * Change navigation elements for smaller screens
-	 */
-	(function() {
-		// Collapse the site navigation to a select menu
-		$( "#menu-top" ).tinyNav({ header: "Navigate..." });
-	})();
+	// collapsible navigation for smaller screens
+	$('.menu-trigger').on('click', function (e) {
+		var $btn = $(this),
+			$nav = $(this).next('.menu');
+		if ($nav.hasClass('menu-open')) {
+			$btn.attr('aria-expanded', 'false');
+			$nav.removeClass('menu-open');
+		} else {
+			$btn.attr('aria-expanded', 'true');
+			$nav.addClass('menu-open');
+			$nav.find('a').first().focus();
+		}
+	});
 });
 
 

themes/jquery/js/plugins.js

@@ -118,7 +118,8 @@ function jquery_render_menu( $items ) {
 	$current = trailingslashit( 'https://' . JQUERY_LIVE_SITE . $_SERVER['REQUEST_URI'] );
 	?>
 <div class="menu-top-container">
-	<ul id="menu-top" class="menu">
+	<button hidden id="menu-trigger" class="button menu-trigger" aria-expanded="false" aria-haspopup="menu">Navigation</button>
+	<ul id="menu-top" class="menu" role="menu" aria-labelledby="menu-trigger">
 <?php
 	foreach ( $items as $url => $anchor ) {
 		$class = 'menu-item';