Add landmarks

Author: RoyalIcing

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

@@ -1,11 +1,20 @@
 defmodule ComponentsGuideWeb.AccessibilityFirstController do
   use ComponentsGuideWeb, :controller
+  require Logger
 
   def index(conn, _params) do
     render(conn, "index.html")
   end
 
-  def show(conn, _params) do
+  def show(conn, %{"id" => "landmarks"}) do
+    render(conn, "landmarks.html")
+  end
+
+  def show(conn, %{"id" => "roles-cheatsheet"}) do
     render(conn, "roles-cheatsheet.html")
   end
+
+  def show(conn, _params) do
+    raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
+  end
 end

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

@@ -19,9 +19,9 @@ topics = [
 <header class="text-white" style="background: <%= header_background() %>;">
   <section 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 Testing" %>
+      <%= "🥇 Accessibility-First Development" %>
     </h1>
-    <p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-yellow-100 text-shadow">
+    <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>
@@ -37,6 +37,9 @@ topics = [
 <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 %>
+      <ul>
+        <li><%= link("Orienting web visitors using landmarks", to: "#") %>
+      </ul>
       <p>Define what your elements are using a clear standard. Let your users quickly jump around the key parts of your page (better UX), and leverage those in your tests (better DX).</p>
     <% end %>
     <%= topic_article(title: "Widgets, Attributes & States") do %>

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

@@ -0,0 +1,17 @@
+<%
+  theme = %Theme{text_color: "blue"}
+  [h2, h3] = Theme.headings(theme)
+%>
+<header class="text-white" style="background: <%= header_background %>;">
+  <section class="container px-6 pt-6 pb-6">
+    <h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
+      <%= "Landmarks" %>
+    </h1>
+  </section>
+</header>
+
+<div class="text-base lg:text-lg bg-gray-900">
+  <article class="container">
+    <%= h2.("Orienting web visitors using landmarks", id: "landmarks-royal-icing") %>
+  </article>
+</div>

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

@@ -13,7 +13,7 @@
   </section>
 </header>
 
-<div class="text-base lg:text-xl flex items-stretch bg-gray-900">
+<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">
       <li><%= link "Link", to: "#link" %>
@@ -227,4 +227,4 @@
 
     </section>
   </div>
-</div>
+</div>

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

@@ -82,7 +82,7 @@ subhead = "Learn more of the why than the how."
     <%= stack_list([
       %{ title: "Landmarks", description: "Ensure your web pages have these familiar regions.", to: "#", color: "indigo" },
       %{ title: "Widgets", description: "Buttons, links, tabs, comboboxes, and more.", to: "#", color: "orange" },
-      %{ title: "Accessibility-First TDD", description: "Use accessibility affordances to write robust tests.", to: "/accessibility-first", color: "green" },
+      %{ title: "Accessibility-First TDD", description: "Use accessibility affordances to write robust tests.", to: "/accessibility-first/roles-cheatsheet", color: "green" },
       %{ title: "Keyboard Navigation Acceptance Tests", description: "Ensure your forms are keyboard accessibility.", to: "/accessibility-first", color: "blue" },
     ]) %>
   </section>

apps/components_guide_web/lib/components_guide_web/views/layout_view.ex

@@ -18,7 +18,7 @@ defmodule ComponentsGuideWeb.LayoutView do
     ~E"""
     <li>
       <form role=search action="/research" class="flex h-full px-2 items-center">
-        <input type=text name=q placeholder="Search specs" class="w-full py-1 px-2 bg-white text-black">
+        <input type=text name=q placeholder="Search specs, libraries, blog posts" class="w-full py-1 px-2 bg-white text-black">
       </form>
     """
   end