Add consistent nav to accessibility first pages

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web.ex

@@ -44,6 +44,8 @@ defmodule ComponentsGuideWeb do
       alias ComponentsGuideWeb.Router.Helpers, as: Routes
       # import Phoenix.LiveView.Helpers
       import Phoenix.LiveView, only: [live_render: 2, live_render: 3]
+
+      import ComponentsGuideWeb.DownView
       alias ComponentsGuideWeb.StylingHelpers, as: Styling
     end
   end

apps/components_guide_web/lib/components_guide_web/controllers/accessibility_first_controller.ex

@@ -10,8 +10,8 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
     render(conn, "landmarks.html")
   end
 
-  def show(conn, %{"id" => "roles-cheatsheet"}) do
-    render(conn, "roles-cheatsheet.html")
+  def show(conn, %{"id" => "widgets-cheatsheet"}) do
+    render(conn, "widgets-cheatsheet.html")
   end
 
   def show(conn, %{"id" => "properties-cheatsheet"}) do

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/_nav.html.eex

@@ -0,0 +1,27 @@
+<%
+topics = [
+  "Landmarks",
+  {"Widgets", "/accessibility-first/widgets-cheatsheet"},
+  {"Properties", "/accessibility-first/properties-cheatsheet"},
+  "Forms",
+  "Tables",
+  "ARIA",
+  "Keyboard Navigation",
+  "TDD",
+  "BDD with Jest",
+  "Integration Testing",
+  "Atomic Design",
+]
+link_class = "inline-block mx-1 mb-2 px-4 py-2 text-white rounded shadow-xl"
+link_style = "background-color: rgba(255,255,255,0.1)"
+%>
+<nav class="py-2 text-xl text-center">
+  <%= for topic <- topics do
+    case topic do
+      {text, url} ->
+        link(text, to: url, class: link_class, style: link_style)
+      text ->
+        link(text, to: "#", class: link_class, style: link_style)
+    end
+  end %>
+</nav>

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/index.html.eex

@@ -1,42 +1,19 @@
-<%
-topics = [
-  "Landmarks",
-  "Roles",
-  "Widgets",
-  "States",
-  "Forms",
-  "Tables",
-  "ARIA",
-  "Keyboard Navigation",
-  "TDD",
-  "BDD",
-  "Integration Testing",
-  "Jest",
-  "Atomic Design",
-]
-%>
-
 <header class="text-white" style="background: <%= header_background() %>;">
-  <section class="container px-6 pt-12 pb-12">
+  <div class="container px-6 pt-12 pb-12">
     <h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
       <%= "🥇 Accessibility-First Development" %>
     </h1>
     <p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-shadow">
       <%#= "Write simpler, more robust tests using accessibility affordances." %>
       <%= "Write simpler, more robust tests via user-friendly accessibility affordances." %>
     </p>
-    <p class="py-2 text-xl text-center">
-      <span>Topics include:</span>
-      <%= for topic <- topics do %>
-        <a href="#" class="inline-block mx-1 mb-3 px-4 py-2 text-white rounded shadow-xl" style="background-color: rgba(255,255,255,0.1)"><%= topic %></a>
-      <% end  %>
-    </p>
-  </section>
+    <%= render @view_module, "_nav.html" %>
+  </div>
 </header>
 
 <div class="bg-white">
   <%= section "Topics", class: "container pt-8 pb-16 text-2xl" do %>
-    <%= topic_article(title: "Landmarks and roles", link: Routes.accessibility_first_path(@conn, :show, "roles-cheatsheet")) do %>
+    <%= topic_article(title: "Landmarks", link: Routes.accessibility_first_path(@conn, :show, "landmarks")) do %>
       <ul>
         <li><%= link("Orienting web visitors using landmarks", to: "#") %>
       </ul>

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/landmarks.html.eex

@@ -1,6 +1,6 @@
 <%
   theme = %Theme{text_color: "blue"}
-  [h2, h3] = Theme.headings(theme)
+  [h2, h3, h4] = Theme.headings(theme)
 %>
 <header class="text-white" style="background: <%= header_background %>;">
   <section class="container px-6 pt-6 pb-6">

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/properties-cheatsheet.html.eex

@@ -1,18 +1,20 @@
 <%
   theme = %Theme{text_color: "blue"}
-  [h2, h3] = Theme.headings(theme)
+  [h2, h3, h4] = Theme.headings(theme)
 %>
 <header class="text-white" style="background: <%= header_background %>;">
-  <section class="container px-6 pt-6 pb-6">
+  <div class="container px-6 pt-6 pb-6">
     <h1 class="mx-auto max-w-4xl text-4xl text-center font-bold leading-tight text-shadow">
       <%= "Accessible Properties Cheatsheet" %>
     </h1>
-    <p class="mt-4 mx-auto max-w-3xl text-3xl text-center leading-snug italic text-gray-100 text-shadow">
-      <%= "Learn properties." %>
+    <p class="mt-4 text-3xl text-center leading-snug italic text-gray-100 text-shadow">
+      <%= "Learn one way that works for testing, accessibility, and styling." %>
     </p>
-  </section>
+    <%= render @view_module, "_nav.html" %>
+  </div>
 </header>
 
+
 <div class="text-base lg:text-lg flex items-stretch bg-gray-900">
   <nav class="w-48 lg:w-64 bg-gray-100 border-r border-gray-200">
     <h2 class="pt-4 pl-4 italic">I want to make an element:</h2>
@@ -29,66 +31,80 @@
   </nav>
   <div class="mx-auto flex-shrink">
     <section aria-label="Roles Cheatsheet" class="max-w-xl lg:max-w-4xl px-6 pt-8 pb-16 text-white">
-      <article>
+      <article aria-labelledby="hidden" class="space-y-4">
         <%= h2.("I want to hide an element", id: "hidden") %>
 
         <p>You can hide using a large range of techniques. What you first want to ask is, from whom do I want to hide the content?
 
         <ul>
-          <li>Hide to all users.
-          <li>Hide to sighted users, but show to screen reader users.
-          <li>Hide to screen reader users, but show to sighted users.
+          <li><%= down "Hide to **everyone**." %>
+          <li><%= down "**Screen reader affordance:** hide to sighted users, but show to screen reader users." %>
+          <li><%= down "**Visual affordance:** hide to screen reader users, but show to sighted users." %>
         </ul>
 
         <section aria-labelledby="hidden-all-heading">
-          <%= h3.("Hide to all users", id: "hidden-all-heading") %>
+          <%= h3.("Hide to everyone", id: "hidden-all-heading") %>
+          <%= h4.("Test") %>
           <%=
           """
           it("is hidden", () => {
             expect(screen.queryByRole('link', { name: 'Sign In' })).toBeNull();
           })
           """ |> code_block(:js)
           %>
+          <%= h4.("Markup") %>
           <%=
           """
-          {{ if .ShowSignIn }}
-            <a href="/signin">Sign In</a>
-          {{ end }}
+          <a href="/signin" hidden>Sign In</a>
           """ |> code_block(:html)
           %>
+          <%= h4.("Styling") %>
+          <%=
+          """
+          [hidden] {
+            display: none !important;
+          }
+          """ |> code_block(:css)
+          %>
         </section>
 
         <section aria-labelledby="hidden-visually-heading">
-          <%= h3.("Hide only visually", id: "hidden-visually-heading") %>
+          <%= h3.("Screen reader affordance: hide visually", id: "hidden-visually-heading") %>
+          <%= h4.("Test") %>
           <%=
           """
-          it("is shown to non-visual users", () => {
+          it("can still be found by our tests and by screen readers", () => {
             expect(
               screen.getByRole('link', { name: 'Sign In' })
             ).toBeInTheDocument();
           })
           """ |> code_block(:js)
           %>
+          <%= h4.("Markup") %>
           <%=
           """
           <a href="/signin" class="visually-hidden">Sign In</a>
           """ |> code_block(:html)
           %>
+          <%= h4.("Styling") %>
           <%=
           """
           .visually-hidden {
             position: absolute;
             overflow: hidden;
             clip: rect(0 0 0 0);
-            height: 1px; width: 1px;
-            margin: -1px; padding: 0; border: 0;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            border: 0;
           }
           """ |> code_block(:css)
           %>
         </section>
 
         <section aria-labelledby="hidden-screen-heading">
-          <%= h3.("Hide to screen-reader users", id: "hidden-screen-heading") %>
+          <%= h3.("Visual affordance: hide to screen reader users", id: "hidden-screen-heading") %>
           <%=
           """
           it("ignores emoji in accessible name", () => {
@@ -117,6 +133,12 @@
         </section>
       </article>
 
+      <article aria-labelledby="current" class="space-y-4">
+        <%= h2.(down("I want to make an element **current**"), id: "current") %>
+
+        <p>You can hide using a large range of techniques. What you first want to ask is, from whom do I want to hide the content?
+      </article>
+
     </section>
   </div>
 </div>

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/roles-cheatsheet.html.eex renamed to apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/widgets-cheatsheet.html.eex

@@ -1,18 +1,20 @@
 <%
   theme = %Theme{text_color: "blue"}
-  [h2, h3] = Theme.headings(theme)
+  [h2, h3, h4] = Theme.headings(theme)
 %>
 <header class="text-white" style="background: <%= header_background %>;">
-  <section class="container px-6 pt-6 pb-6">
+  <div class="container px-6 pt-6 pb-6">
     <h1 class="mx-auto max-w-4xl text-4xl text-center font-bold leading-tight text-shadow">
-      <%= "Widgets Cheatsheet" %>
+      <%= "Accessible Widgets Cheatsheet" %>
     </h1>
-    <p class="mt-4 mx-auto max-w-3xl text-3xl text-center leading-snug italic text-yellow-100 text-shadow">
+    <p class="mt-4 mx-auto max-w-3xl text-3xl text-center leading-snug italic text-gray-100 text-shadow">
       <%= "UI roles and their pre-written tests." %>
     </p>
-  </section>
+    <%= render @view_module, "_nav.html" %>
+  </div>
 </header>
 
+
 <div class="text-base lg:text-lg flex items-stretch bg-gray-900">
   <nav class="w-48 lg:w-64 bg-gray-100 border-r border-gray-200">
     <ul class="sticky top-0 p-4 pl-6 list-none leading-loose">

apps/components_guide_web/lib/components_guide_web/views/accessibility_first_view.ex

@@ -46,10 +46,16 @@ defmodule ComponentsGuideWeb.AccessibilityFirstView do
       content_tag(:h3, content, [{:class, class} | attrs])
     end
 
+    def h4(theme = %Theme{}, content) do
+      class = "mt-4 mb-2 text-lg leading-normal text-#{theme.text_color}-300"
+      content_tag(:h4, content, [{:class, class}])
+    end
+
     def headings(theme = %Theme{}) do
       [
         fn content, attrs -> h2(theme, content, attrs) end,
-        fn content, attrs -> h3(theme, content, attrs) end
+        fn content, attrs -> h3(theme, content, attrs) end,
+        fn content -> h4(theme, content) end
       ]
     end
   end

apps/components_guide_web/lib/components_guide_web/views/down_view.ex

@@ -1,6 +1,5 @@
+# Paredown: simplified Markdown subset
 defmodule ComponentsGuideWeb.DownView do
-  use ComponentsGuideWeb, :view
-
   defmodule ParserState do
     defstruct html: [], italics: nil, bold: nil, link: nil, link_references: %{}