Add accessibility first testing page

Author: RoyalIcing

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "workbench.colorCustomizations": {
     "activityBar.background": "#ca82d2",
+    "activityBar.activeBackground": "#ca82d2",
     "activityBar.activeBorder": "#e6e1b9",
     "activityBar.foreground": "#15202b",
     "activityBar.inactiveForeground": "#15202b99",

apps/components_guide_web/lib/components_guide_web.ex

@@ -43,6 +43,7 @@ defmodule ComponentsGuideWeb do
       import ComponentsGuideWeb.Gettext
       alias ComponentsGuideWeb.Router.Helpers, as: Routes
       import Phoenix.LiveView, only: [live_render: 2, live_render: 3]
+      alias ComponentsGuideWeb.StylingHelpers, as: Styling
     end
   end
 

apps/components_guide_web/lib/components_guide_web/controllers/accessibility_first_testing_controller.ex

@@ -0,0 +1,7 @@
+defmodule ComponentsGuideWeb.AccessibilityFirstTestingController do
+  use ComponentsGuideWeb, :controller
+
+  def index(conn, _params) do
+    render(conn, "index.html")
+  end
+end

apps/components_guide_web/lib/components_guide_web/router.ex

@@ -21,6 +21,7 @@ defmodule ComponentsGuideWeb.Router do
 
     get "/links", LinksController, :index
 
+    get "/accessibility-first-testing", AccessibilityFirstTestingController, :index
     get "/swiftui", SwiftUIController, :index
     get "/react+typescript", ReactTypescriptController, :index
 

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

@@ -0,0 +1,52 @@
+<%
+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">
+    <h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
+      <%= "🥇 Accessibility-First Testing" %>
+    </h1>
+    <p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-yellow-100 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">
+      Topics include:
+      <%= for topic <- topics do %>
+        <a href="#" class="inline-block mx-1 mb-3 px-4 py-2 font-bold bg-white text-blue-600 hover:bg-blue-500 hover:text-white rounded shadow-xl"><%= topic %></a>  
+      <% end  %>
+    </p>
+  </section>
+</header>
+
+<div class="bg-white">
+  <%= section "Topics", class: "container pt-8 pb-16 text-2xl" do %>
+    <%= topic_article(title: "Landmarks and roles") 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 %>
+      <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 %>
+      <p>Learn a consistent pattern to write your component tests in Jest. Use @testing-library to find elements in a realistic way. Describe your contexts and scenarios with plain language.</p>
+    <% end %>
+    <%= topic_article(title: "Atomic Design") do %>
+      <p>Organize your components into distict folders. Break them up at the right level, then compose them. Test them differently. Incorporate ARIA roles into the atomic design approach.</p>
+    <% end %>
+  <% end %>
+</div>

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

@@ -5,9 +5,10 @@
     </a>
     <nav role="navigation" class="flex-grow sm:pl-8 lg:px-16 text-base md:text-base">
       <ul class="flex flex-col md:flex-row justify-around pt-2 pb-2">
+        <li><a href="/accessibility-first-testing" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "A11Y-First Testing" %></a></li>
         <li><a href="/react+typescript" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "React + TypeScript" %></a></li>
         <li><a href="/swiftui" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "SwiftUI + Combine" %></a></li>
-        <li><a href="/links" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "Community Resources" %></a></li>
+        <li><a href="/links" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "Other Resources" %></a></li>
         <% if false do %>
         <li class="py-1">
           <a href="/signin/github" class="inline-block md:block px-4 py-2 md:py-2 font-bold text-white bg-red-700 rounded" style="background: linear-gradient(0deg, #E0003C 0%, #FF493F 50%, #FF584A 100%);">

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

@@ -0,0 +1,51 @@
+defmodule ComponentsGuideWeb.AccessibilityFirstTestingView do
+  use ComponentsGuideWeb, :view
+  require EEx
+  use ComponentsGuideWeb.Snippets
+
+  def header_background do
+    Styling.linear_gradient("150grad", [
+      {:lab, 70, 40, -50},
+      {:lab, 60, -30, -50},
+      {:lab, 50, 0, -80}
+    ])
+  end
+
+  # def_E :topic_article, quote(do: ~E"""
+  # <article class="mb-8">
+  #   <h2 class="mb-2 text-4xl leading-normal text-teal-800"><%= @title %></h2>
+  #   <%= block[:do] %>
+  # </article>
+  # """)
+
+  # EEx.function_from_string(
+  #   :def,
+  #   :topic_article,
+  #   """
+  #   <article class="mb-8">
+  #     <h2 class="mb-2 text-4xl leading-normal text-teal-800"><%= @title %></h2>
+  #     <%= block[:do] %>
+  #   </article>
+  #   """,
+  #   [:assigns, :block],
+  #   engine: Phoenix.HTML.Engine
+  # )
+
+  def topic_article(assigns, block) do
+    ~E"""
+    <article class="mb-8">
+      <h2 class="mb-2 text-4xl leading-normal text-teal-800"><%= @title %></h2>
+      <%= block[:do] %>
+    </article>
+    """
+  end
+
+  # def topic_article(title, content_html) do
+  #   <article class="mb-8">
+  #     <h2 class="mb-2 text-4xl leading-normal text-teal-800">Atomic design</h2>
+  #     <p>
+  #       Learn how to name components. Apply the single responsibility principle. Find the indivisible component units, and compose them together into larger molecules.
+  #     </p>
+  #   </article>
+  # end
+end

apps/components_guide_web/lib/components_guide_web/views/snippets.ex

@@ -0,0 +1,64 @@
+defmodule ComponentsGuideWeb.Snippets do
+  require EEx
+  use Phoenix.HTML
+
+  defmacro __using__(_opts) do
+    quote do
+      def section(label, attrs, block) do
+        content_tag(:section, [aria_label: label] ++ attrs, block)
+      end
+    end
+  end
+
+  defmacro defhello do
+    quote do
+      def yep, do: 5
+    end
+  end
+
+  defmacro def_E(call1, source) do
+    # call2 = Macro.escape(call1, unquote: nil)
+    # call2 = Macro.escape(call1, unquote: true)
+    # call2 = Macro.escape(call1)
+    # call2 = :topic_article
+    # args = Macro.generate_arguments(2, nil)
+
+    # source2 = Macro.escape(source)
+
+    quote bind_quoted: binding() do
+      info = Keyword.merge([file: __ENV__.file, line: __ENV__.line], engine: Phoenix.HTML.Engine)
+      args = [{:assigns, [line: info[:line]], nil}, {:block, [line: info[:line]], nil}]
+      # compiled = EEx.compile_string(source, info)
+      compiled =
+        quote do
+          compiled = unquote(source)
+        end
+
+      # def topic_article(assigns, block), do: 4
+      # def topic_article(assigns, block), do: 4
+
+      # def unquote(call1)(assigns, block), do: unquote(compiled)
+
+      def unquote(call1)(unquote_splicing(args)), do: unquote(source)
+
+      # def unquote(call2)(assigns, block) do
+      #   unquote(compiled)
+      # end
+
+      # def({
+      #     quote do
+      #       call
+      #     end,
+      #     Macro.generate_arguments(2, __MODULE__)
+      #   },
+      #   do: 4
+      # )
+
+      # unquote(
+      #   quote do
+      #     def unquote(call)(assigns, block), do: quote(compiled)
+      #   end
+      # )
+    end
+  end
+end

apps/components_guide_web/lib/components_guide_web/views/styling_helpers.ex

@@ -0,0 +1,99 @@
+defmodule ComponentsGuideWeb.StylingHelpers do
+  @moduledoc """
+  Conveniences for creating gradient backgrounds
+  """
+
+  # Source: https://github.com/Evercoder/culori
+
+  defp convert_component({:linear_srgb, c}, :srgb) do
+    if c > 0.0031308 do
+      1.055 * :math.pow(c, 1.0 / 2.4) - 0.055
+    else
+      12.92 * c
+    end
+  end
+
+  def convert({:linear_srgb, r, g, b}, :srgb) do
+    {
+      :srgb,
+      convert_component({:linear_srgb, r}, :srgb),
+      convert_component({:linear_srgb, g}, :srgb),
+      convert_component({:linear_srgb, b}, :srgb)
+    }
+  end
+
+  def convert({:xyz, x, y, z}, :srgb) do
+    {
+      :linear_srgb,
+      x * 3.1338561 - y * 1.6168667 - 0.4906146 * z,
+      x * -0.9787684 + y * 1.9161415 + 0.0334540 * z,
+      x * 0.0719453 - y * 0.2289914 + 1.4052427 * z
+    }
+    |> convert(:srgb)
+  end
+
+  @xn 0.96422
+  @yn 1.00000
+  @zn 0.82521
+
+  @k :math.pow(29, 3) / :math.pow(3, 3)
+  @e :math.pow(6, 3) / :math.pow(29, 3)
+
+  def convert({:lab, l, a, b}, :xyz) do
+    fy = (l + 16) / 116
+    fx = a / 500 + fy
+    fz = fy - b / 200
+
+    converter = fn v ->
+      cubed = :math.pow(v, 3)
+
+      if cubed > @e do
+        cubed
+      else
+        (116 * v - 16) / @k
+      end
+    end
+
+    {
+      :xyz,
+      converter.(fx) * @xn,
+      converter.(fy) * @yn,
+      converter.(fz) * @zn
+    }
+  end
+
+  def convert({:lab, _l, _a, _b} = input, :srgb) do
+    convert(input, :xyz) |> convert(:srgb)
+  end
+
+  def to_css({:srgb, r, g, b}) do
+    "rgba(#{(r * 255) |> round},#{(g * 255) |> round},#{(b * 255) |> round},1)"
+  end
+
+  def to_css(color_tuple) when is_tuple(color_tuple) and elem(color_tuple, 0) in [:lab] do
+    color_tuple |> convert(:srgb) |> to_css()
+  end
+
+  def linear_gradient(angle, colors) when is_list(colors) do
+    linear_gradient(angle, :array.from_list(colors))
+  end
+
+  def linear_gradient(angle, colors_array) do
+    true = :array.is_array(colors_array)
+
+    max = :array.size(colors_array) - 1
+
+    colors_css =
+      :array.foldr(
+        fn index, color, list ->
+          percentage = "#{index / max * 100}%"
+          ["#{color |> to_css} #{percentage}" | list]
+        end,
+        [],
+        colors_array
+      )
+      |> Enum.join(",")
+
+    "linear-gradient(#{angle}, #{colors_css})"
+  end
+end

apps/components_guide_web/mix.exs

@@ -46,7 +46,8 @@ defmodule ComponentsGuideWeb.MixProject do
       {:gettext, "~> 0.11"},
       {:components_guide, in_umbrella: true},
       {:jason, "~> 1.0"},
-      {:plug_cowboy, "~> 2.0"}
+      {:plug_cowboy, "~> 2.0"},
+      {:benchee, "~> 1.0", only: :dev}
     ]
   end