Improve concepts, accessibility first

Author: RoyalIcing

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

@@ -42,7 +42,7 @@ topics = [
       </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 %>
+    <%= topic_article(title: "Widgets, Attributes & States", link: Routes.accessibility_first_path(@conn, :show, "properties-cheatsheet")) do %>
       <p>Learn the standards for interactive widgets usable by touch, mouse, and keyboard. Let users know which page is current or which sub-control is selected.</p>
     <% end %>
     <%= topic_article(title: "BDD with Jest & React Testing Library") do %>

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

@@ -5,24 +5,30 @@
 <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-4xl text-center font-bold leading-tight text-shadow">
-      <%= "Properties Cheatsheet" %>
+      <%= "Accessible Properties Cheatsheet" %>
     </h1>
-    <p class="mt-4 mx-auto max-w-3xl text-3xl text-center leading-snug italic text-yellow-100 text-shadow">
-      <%= "UI roles and their pre-written tests." %>
+    <p class="mt-4 mx-auto max-w-3xl text-3xl text-center leading-snug italic text-gray-100 text-shadow">
+      <%= "Learn properties." %>
     </p>
   </section>
 </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">
+    <h2 class="pt-4 pl-4">I want to:</h2>
+    <ul class="sticky top-0 p-2 pl-8 list-none leading-loose">
       <li><%= link "Hide", to: "#hide" %>
+      <li><%= link "Current", to: "#current" %>
+      <li><%= link "Selected", to: "#selected" %>
+      <li><%= link "Invalid", to: "#invalid" %>
+      <li><%= link "Required", to: "#required" %>
+      <li><%= link "Readonly", to: "#readonly" %>
       <li><%= link("Queries 🔗", to: "https://testing-library.com/docs/dom-testing-library/api-queries") %>
       <li><%= link("Matchers 🔗", to: "https://github.com/testing-library/jest-dom") %>
     </ul>
   </nav>
   <div class="mx-auto flex-shrink">
-    <section aria-label="Roles Cheatsheet" class="max-w-xl lg:max-w-3xl px-4 pt-8 pb-16 text-white">
+    <section aria-label="Roles Cheatsheet" class="max-w-xl lg:max-w-4xl px-6 pt-8 pb-16 text-white">
       <article>
         <%= h2.("I want to hide an element", id: "hidden") %>
 
@@ -39,7 +45,7 @@
           <%=
           """
           it("is hidden", () => {
-            expect(queryByRole('link', { name: 'Sign In' })).toBeNull();
+            expect(screen.queryByRole('link', { name: 'Sign In' })).toBeNull();
           })
           """ |> code_block(:js)
           %>
@@ -58,7 +64,7 @@
           """
           it("is shown to non-visual users", () => {
             expect(
-              getByRole('link', { name: 'Sign In' })
+              screen.getByRole('link', { name: 'Sign In' })
             ).toBeInTheDocument();
           })
           """ |> code_block(:js)
@@ -87,7 +93,7 @@
           """
           it("ignores emoji in accessible name", () => {
             expect(
-              getByRole('link', { name: 'Sign In' })
+              screen.getByRole('link', { name: 'Sign In' })
             ).toBeInTheDocument();
           })
           """ |> code_block(:js)

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

@@ -21,6 +21,7 @@
       <li><%= link "Checkbox", to: "#checkbox" %>
       <li><%= link "Textbox", to: "#textbox" %>
       <li><%= link "Radio", to: "#radio" %>
+      <li><%= link "Range", to: "#range" %>
       <li><%= link "Tabs", to: "#tabs" %>
       <li><%= link("List of roles 🔗", to: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques") %>
       <li><%= link("Queries 🔗", to: "https://testing-library.com/docs/dom-testing-library/api-queries") %>

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

@@ -11,34 +11,34 @@
 
 <div class="bg-white">
   <section aria-label="Concepts" class="container pt-8 pb-16 text-2xl">
-    <%= topic_article title: "Naming" do %>
-      <ul class="list-disc nums-tabular">
+    <%= topic_article title: "Naming", link: "/naming" do %>
+      <ul class="list-none">
         <li>Semantics vs presentation
         <li>Sharing a design language
         <li>Structuring modules and files
         <li>Better documentation with clearer concepts
       </ul>
     <% end %>
 
-    <%= topic_article title: "Testing" do %>
-      <ul class="list-disc nums-tabular">
+    <%= topic_article title: "Testing", link: "/testing" do %>
+      <ul class="list-none">
         <li>Isolated unit tests
         <li>Integration tests
         <li>Acceptance tests
-        <li><%= link 'Accessibility-first tests', to: Routes.accessibility_first_path(@conn, :index) %>
+        <li>Accessibility-first tests
       </ul>
     <% end %>
 
-    <%= topic_article title: "Accessibility" do %>
-      <ul class="list-disc nums-tabular">
+    <%= topic_article title: "Accessibility-First", link: Routes.accessibility_first_path(@conn, :index) do %>
+      <ul class="list-none">
         <li>In the browser
         <li>On iOS & Mac
         <li>HTML semantics
       </ul>
     <% end %>
-    
-    <%= topic_article title: "Performance" do %>
-      <ul class="list-disc nums-tabular">
+
+    <%= topic_article title: "Performance", link: "/performance" do %>
+      <ul class="list-none">
         <li>Inform first by measuring data
         <li>Fast loading as a priority
         <li>Using assets and performance budgets
@@ -55,4 +55,4 @@
       <%= "Suggest Link" %>
     </button>
   </div>
-</section>
+</section>

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

@@ -80,8 +80,11 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
       </h2>
     </header>
     <%= 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: "Landmarks", description: "Ensure your web pages have these familiar regions.", to: "/accessibility-first/landmarks", color: "purple" },
+      %{ title: "Labels and Descriptions", description: "Make sure every region of interest is labelled.", to: "/accessibility-first/properties-cheatsheet", color: "indigo" },
+      %{ title: "Properties", description: "Selected state, current page, hidden, and more.", to: "/accessibility-first/properties-cheatsheet", color: "teal" },
+      %{ title: "Form controls", description: "Inputs, checkboxes, radio buttons, comboboxes, and more.", to: "/accessibility-first/properties-cheatsheet", color: "red" },
+      %{ title: "Widgets", description: "Buttons, links, tabs, comboboxes, and more.", to: "/accessibility-first/roles-cheatsheet", color: "orange" },
       %{ 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" },
     ]) %>

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

@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>Components.Guide — Web tutorials on React, Accessibility, Modern CSS, TypeScript</title>
+    <title>Components.Guide — Guides to React, Accessibility, Modern CSS, TypeScript</title>
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
   </head>
   <body>

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

@@ -36,8 +36,9 @@
 
       <h3 class="mt-6 mb-2 text-2xl leading-normal italic">Handy references</h3>
       <ul class="list-disc">
-        <li><%= link "Thinking in SwiftUI by Chris Eidhof & Florian Kugler", to: "https://www.objc.io/books/thinking-in-swiftui/" %></li>
         <li><%= link "Gosh Darn SwiftUI: a curated list of questions and answers about SwiftUI", to: "https://goshdarnswiftui.com/" %></li>
+        <li><%= link "When Should I Use @State, @Binding, @ObservedObject, @EnvironmentObject, or @Environment?", to: "https://jaredsinclair.com/2020/05/07/swiftui-cheat-sheet.html" %></li>
+        <li><%= link "Thinking in SwiftUI by Chris Eidhof & Florian Kugler", to: "https://www.objc.io/books/thinking-in-swiftui/" %></li>
         <li><%= link "About SwiftUI: Gathering all info published, both by Apple and by others, about new framework SwiftUI", to: "https://github.com/Juanpe/About-SwiftUI" %></li>
         <li><%= link "SwiftUI by Example: free quick start tutorials for Swift developers", to: "https://www.hackingwithswift.com/quick-start/swiftui" %></li>
         <li><%= link "SwiftUI Hub", to: "https://swiftuihub.com/" %></li>
@@ -46,7 +47,7 @@
 
     <%= article class: "text-red-700" do %>
       <h2 class="text-4xl leading-normal font-bold text-red-800 border-b-4 border-red-200">Combine</h2>
-      
+
       <h3 class="mt-4 mb-2 text-2xl leading-normal italic">WWDC 2019</h3>
       <%= list [
         link(span("415: Modern Swift API Design", [:nums_tabular]), to: "https://developer.apple.com/videos/play/wwdc2019/415/"),
@@ -79,7 +80,7 @@
 
     <%= article class: "text-blue-700" do %>
       <h2 class="text-4xl leading-normal font-bold text-blue-800 border-b-4 border-blue-200">React</h2>
-      
+
       <h3 class="mt-4 mb-2 text-2xl leading-normal italic">Overreacted by Dan Abramov</h3>
       <ul class="list-disc">
         <li><%= link "The Elements of UI Engineering", to: "https://overreacted.io/the-elements-of-ui-engineering/" %></li>

apps/components_guide_web/lib/components_guide_web/views/concepts_view.ex

@@ -17,10 +17,14 @@ defmodule ComponentsGuideWeb.ConceptsView do
 
   def topic_article(assigns, block) do
     ~E"""
-    <article class="mb-8">
-      <h2 class="mb-2 text-4xl leading-normal font-bold text-red-700"><%= @title %></h2>
-      <%= block[:do] %>
-    </article>
+    <%= link to: @link do %>
+      <article class="pl-8 py-4 mb-8 text-red-700 bg-red-100 border-l-4 border-current rounded hover:text-red-800 hover:bg-red-200 shadow-lg hover:shadow-xl">
+        <h2 class="mb-2 text-4xl leading-normal font-bold">
+          <%= @title %>
+        </h2>
+        <%= block[:do] %>
+      </article>
+    <%= end %>
     """
   end
 end