Improve cheatsheet

Author: RoyalIcing

apps/components_guide_web/assets/css/app.css

@@ -10,6 +10,9 @@ html {
     @apply bg-gray-900;
 }
 
+article a {
+    text-decoration: underline;
+}
 article a:hover {
     text-decoration: underline;
 }

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

@@ -36,7 +36,7 @@ topics = [
 
 <div class="bg-white">
   <%= section "Topics", class: "container pt-8 pb-16 text-2xl" do %>
-    <%= topic_article(title: "Landmarks and roles") do %>
+    <%= topic_article(title: "Landmarks and roles", link: Routes.accessibility_first_testing_path(@conn, :show, "roles-cheatsheet")) do %>
       <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_testing/roles-cheatsheet.html.eex

@@ -1,10 +1,13 @@
+<%
+  theme = %Theme{text_color: "blue"}
+%>
 <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">
-      <%= "Roles Cheatsheet" %>
+      <%= "Widgets Cheatsheet" %>
     </h1>
     <p class="mt-4 mx-auto max-w-3xl text-3xl text-center leading-snug italic text-yellow-100 text-shadow">
-      <%= "Find the role and copy the tests for a particular UI widget." %>
+      <%= "UI roles and their pre-written tests." %>
     </p>
   </section>
 </header>
@@ -17,15 +20,14 @@
       <li><%= link "Checkbox", to: "#checkbox" %>
       <li><%= link "Radio", to: "#radio" %>
       <li><%= link "Tab", to: "#tab" %>
+      <li><%= link("List of roles 🔗", to: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques") %>
     </ul>
   </nav>
   <div class="ml-64">
-    <section aria-label="Roles Cheatsheet" class="container px-4 pt-8 pb-16 text-2xl">
-
-      <%= link_to("List of roles", to: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques") %>
-
+    <section aria-label="Roles Cheatsheet" class="px-4 pt-8 pb-16 text-xl">
       <article>
-        <h2 id="link" class="mb-2 text-4xl leading-normal text-teal-800">Link</h2>
+        <%= theme |> Theme.h2("Link", id: "link") %>
+
         <%=
         """
         getByRole('link', { name: 'About' });
@@ -57,11 +59,68 @@
         <%=
         """
         getByRole('checkbox', { name: 'Remember me' });
+
+        const rememberMe = getByRole('checkbox', { name: 'Remember me' });
+        expect(rememberMe).toBeChecked();
+        """ |> code_block(:js)
+        %>
+
+        <h3>HTML example</h3>
+        <%=
+        """
+        <label><input type="checkbox">Remember me</label>
+        """ |> code_block(:html)
+        %>
+      </article>
+
+      <article>
+        <%= theme |> Theme.h2("Textbox", id: "textbox") %>
+
+        <h3>It has Bio text field</h3>
+        <%=
+        """
+        getByLabelText('Bio');
+        """ |> code_block(:js)
+        %>
+        <%=
+        """
+        <label>Bio<input></label>
+        """ |> code_block(:html)
+        %>
+
+        <h3>It has Bio text field</h3>
+        <%=
+        """
+        getByLabelText('Bio');
+        """ |> code_block(:js)
+        %>
+        <%=
+        """
+        <label>Bio<textarea></textarea></label>
+        """ |> code_block(:html)
+        %>
+
+        <h3>It is valid</h3>
+        <%=
+        """
+        expect(getByLabelText('Bio')).toBeValid();
+        """ |> code_block(:js)
+        %>
+        <%=
+        """
+        <label>Bio<textarea aria-invalid=false></textarea></label>
+        """ |> code_block(:html)
+        %>
+
+        <h3>It is invalid</h3>
+        <%=
+        """
+        expect(getByLabelText('Bio')).toBeInvalid();
         """ |> code_block(:js)
         %>
         <%=
         """
-        <label><input type=checkbox> Remember me</label>
+        <label>Bio<textarea aria-invalid=true></textarea></label>
         """ |> code_block(:html)
         %>
       </article>
@@ -75,9 +134,9 @@
         %>
         <%=
         """
-        <label><input type=radio> Purple</label>
-        <label><input type=radio> Blue</label>
-        <label><input type=radio> Orange</label>
+        <label><input type="radio">Purple</label>
+        <label><input type="radio">Blue</label>
+        <label><input type="radio">Orange</label>
         """ |> code_block(:html)
         %>
       </article>

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

@@ -25,7 +25,7 @@
         <li>Isolated unit tests
         <li>Integration tests
         <li>Acceptance tests
-        <li>Accessibility tests
+        <li><%= link 'Accessibility-first tests', to: Routes.accessibility_first_testing_path(@conn, :index) %>
       </ul>
     <% end %>
 

apps/components_guide_web/lib/components_guide_web/views/accessibility_first_testing_view.ex

@@ -2,6 +2,7 @@ defmodule ComponentsGuideWeb.AccessibilityFirstTestingView do
   use ComponentsGuideWeb, :view
   require EEx
   use ComponentsGuideWeb.Snippets
+  use Phoenix.HTML
 
   def header_background do
     Styling.linear_gradient("150grad", [
@@ -14,7 +15,13 @@ defmodule ComponentsGuideWeb.AccessibilityFirstTestingView do
   def topic_article(assigns, block) do
     ~E"""
     <article class="mb-8">
-      <h2 class="mb-2 text-4xl leading-normal text-teal-800"><%= @title %></h2>
+      <h2 class="mb-2 text-4xl leading-normal text-teal-800">
+        <%= if Keyword.has_key?(assigns, :link) do %>
+          <%= link @title, to: @link %>
+        <% else %>
+          <%= @title %>
+        <% end %>
+      </h2>
       <%= block[:do] %>
     </article>
     """
@@ -25,4 +32,13 @@ defmodule ComponentsGuideWeb.AccessibilityFirstTestingView do
     <pre><code class='<%= "lang-#{type}" %>'><%= code %></code></pre>
     """
   end
+
+  defmodule Theme do
+    defstruct text_color: "blue"
+
+    def h2(theme = %Theme{}, content, attrs) do
+      class = "mb-2 text-4xl leading-normal text-#{theme.text_color}-800"
+      content_tag(:h2, content, [ {:class, class} | attrs ])
+    end
+  end
 end