Improve quick links nav menu

Author: RoyalIcing

apps/components_guide_web/assets/css/app.css

@@ -259,6 +259,30 @@ ol:not([class]) {
   padding-left: 1em;
 }
 
+/* GitHub Elements */
+
+/* https://github.com/github/details-menu-element */
+summary[aria-haspopup="menu"] {
+  display: list-item;
+  list-style: none;
+}
+summary[aria-haspopup="menu"]:before, summary[aria-haspopup="menu"]::-webkit-details-marker {
+  display: none; 
+}
+/* Makes menu buttons take over the entire viewport when open, allowing easy taps */
+details[open] summary[aria-haspopup="menu"]:before {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 80;
+  display: block;
+  cursor: default;
+  content: " ";
+  background: transparent;
+}
+
 /* Navigation links */
 a[aria-current="page"][class*="hover\:border-"] {
   border-color: currentColor;

apps/components_guide_web/assets/package.json

@@ -3,7 +3,7 @@
   "license": "MIT",
   "scripts": {
     "deploy": "webpack --mode production",
-    "watch": "webpack --mode development --watch"
+    "watch": "NODE_ENV=development webpack --mode development --watch"
   },
   "dependencies": {
     "@hotwired/turbo": "^7.0.0-beta.4",

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/refactoring-accessibility.html.md

@@ -0,0 +1,96 @@
+# Refactoring Accessibility
+
+<script type=module>
+import * as DOMTesting from "https://cdn.skypack.dev/@testing-library/dom";
+
+function* surroundingSourceElements(el) {
+  let prev = el;
+  while (prev = prev.previousElementSibling) {
+    if (prev.matches('h1, h2, h3, h4')) break;
+    if (prev.matches('pre.language-html')) yield { type: 'html', code: prev.textContent, el: prev };
+    if (prev.matches('pre.language-javascript')) yield { type: 'javascript', code: prev.textContent, el: prev };
+  }
+  
+  let next = el;
+  while (next = next.nextElementSibling) {
+    if (next.matches('h1, h2, h3, h4')) break;
+    if (next.matches('pre.language-html')) yield { type: 'html', code: next.textContent, el: next };
+    if (next.matches('pre.language-javascript')) yield { type: 'javascript', code: next.textContent, el: next };
+  }
+}
+
+const outputEls = document.querySelectorAll('article output');
+
+function classNamesFor(index) {
+  return ['border-yellow-500', 'border-green-500 border-dotted', 'border-purple-500 border-double'][index].split(' ');
+}
+
+for (const outputEl of outputEls.values()) {
+  const div = outputEl.appendChild(document.createElement('div'));
+  div.classList.add('p-4');
+    
+  let javascriptIndex = 0;
+  const sources = surroundingSourceElements(outputEl);
+  for (const source of sources) {
+    const { type, code, el } = source;
+    
+    console.log('source', source);
+    
+    if (type === 'html') {
+      div.innerHTML = code;
+    }
+    
+    if (type === 'javascript') {
+      const classNames = classNamesFor(javascriptIndex);
+      
+      el.classList.add('border-l-4', ...classNames);
+      
+      const screen = DOMTesting.within(div);
+      const testFunction = new Function('screen', `return ${code}`);
+      [].concat(testFunction(screen)).forEach(el => el.classList.add('border-4', ...classNames));
+      
+      javascriptIndex++;
+    }
+  }
+}
+</script>
+
+## Headings
+
+- When to use `<h1>`?
+- Examples from news websites of their hierarchy
+
+Here’s an example from The Economist:
+
+```html
+<header>
+  <h1>
+    <span>
+      Silent sigh
+    </span>
+    <br>
+    <span itemprop="headline">
+      South Korea is pushing America for new talks with the North
+    </span>
+  </h1>
+  <p itemprop="description">
+    The 70-year stalemate between the two Koreas is unlikely to break without fresh diplomacy
+  </p>
+</header>
+```
+
+<output></output>
+
+```javascript
+screen.getByRole('heading');
+```
+
+## Navigation
+
+- Before: `class="current"`
+- After: `aria-current="page"`
+
+## Tooltip
+
+- Before: interactive tooltip that appears only after clicking a very small target
+- After: description hint text that is always shown, with `aria-describedby`

apps/components_guide_web/lib/components_guide_web/templates/layout/_banner.html.eex

@@ -8,14 +8,14 @@
       <%= search_form() %>
     </div>
     <hr class="mx-auto">
-    <details class="relative" data-links="block p-3">
-      <summary>Jump to</summary>
-      <ul class="absolute top-full right-0 flex flex-col bg-gray-900">
-        <li><%= link("Accessibility First", to: '/accessibility-first') %>
-        <li><%= link("React + TypeScript", to: '/react+typescript') %>
-        <li><%= link("React + TypeScript", to: '/react+typescript') %>
-        <li><%= link("Composable Systems", to: '/composable-systems') %>
-      </ul>
+    <details class="relative" data-links="block p-3 underline-on-hover">
+      <summary>Quick links</summary>
+      <details-menu role="menu" class="absolute top-full right-0 flex flex-col text-sm whitespace-nowrap bg-gray-900 rounded shadow-lg">
+        <%= link("Accessibility First", to: '/accessibility-first') %>
+        <%= link("React + TypeScript", to: '/react+typescript') %>
+        <%= link("Web Standards", to: '/web-standards') %>
+        <%= link("Composable Systems", to: '/composable-systems') %>
+      </details-menu>
     </details>
     <ul class="h-full grid grid-rows-2 md:grid-cols-3 flex flex-col md:flex-row justify-around items-stretch tracking-wide">
       <% if false do %>

apps/components_guide_web/lib/components_guide_web/templates/layout/root.html.leex

@@ -8,6 +8,10 @@
     <%= live_title_tag assigns[:page_title] || "Guides to React, Accessibility, Modern CSS, TypeScript", suffix: " · Components.Guide" %>
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/RoyalIcing/tela@2d421cafc1ea99fab91aa4fcbf3b554160bcada5/tela.css"/>
+    
+    <script type="module">
+      import githubDetailsMenuElement from 'https://cdn.skypack.dev/@github/details-menu-element';
+    </script>
 
     <%= if @conn.path_info == [] do %>
     <meta property="og:type" content="website">

config/dev.exs

@@ -14,11 +14,9 @@ config :components_guide_web, ComponentsGuideWeb.Endpoint,
   reloadable_apps: [:components_guide, :components_guide_web],
   check_origin: false,
   watchers: [
-    node: [
-      "node_modules/webpack/bin/webpack.js",
-      "--mode",
-      "development",
-      "--watch-options-stdin",
+    npm: [
+      "run",
+      "watch",
       cd: Path.expand("../apps/components_guide_web/assets", __DIR__)
     ]
   ]