Improve content

Author: RoyalIcing

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

@@ -18,7 +18,7 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
     render(conn, "properties-cheatsheet.html")
   end
 
-  @articles ["navigation", "forms"]
+  @articles ["navigation", "forms", "content"]
 
   def show(conn, %{"id" => article}) when article in @articles do
     render(conn, "index.html", article: article)

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

@@ -0,0 +1,9 @@
+<header class="text-white" style="<%= header_styles() %>">
+  <div class="mx-auto max-w-4xl">
+    <h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
+      <span class="mr-2 text-4xl">💁🏼‍♀️🥇</span>
+      <span><%= "Accessibility-First" %></span>
+    </h1>
+    <%= render ComponentsGuideWeb.AccessibilityFirstView, "_nav.html" %>
+  </div>
+</header>

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

@@ -1,5 +1,5 @@
 <nav class="pt-6 pb-4">
-  <ul class="list-none row font-bold" style="--link-padding: 0.75em">
+  <ul y-y x-x=md class="font-bold text-shadow" style="--link-padding: 0.75em">
     <li><%= link("Intro", to: '/accessibility-first') %>
     <li><%= link("Navigation", to: '/accessibility-first/navigation') %>
     <li><%= link("Content", to: '/accessibility-first/content') %>

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/content.html.md

@@ -0,0 +1,11 @@
+## Headings
+
+## Lists
+
+## Term & Definition
+
+## Figure
+
+## Details & Summary
+
+## Separator

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

@@ -1,14 +1,4 @@
-<header class="text-white" style="<%= header_styles() %>">
-  <div class="mx-auto max-w-4xl">
-    <h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
-      <div class="row">
-        <span class="mr-2 text-4xl">💁🏼‍♀️🥇</span>
-      </div>
-      <span><%= "Accessibility-First" %></span>
-    </h1>
-    <%= render @view_module, "_nav.html" %>
-  </div>
-</header>
+<%= render @view_module, "_header.html" %>
 
 <article>
   <div class="text-white bg-gray-900">

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

@@ -43,19 +43,19 @@
         ] %>
 
         <section aria-labelledby="hidden-all-heading">
-          <%= h3.("Hide to everyone", id: "hidden-all-heading") %>
+          <%= h3.("Hidden to everyone", id: "hidden-all-heading") %>
           <%= h4.("Test") %>
           <%=
           """
           it("is hidden", () => {
-            expect(screen.queryByRole('link', { name: 'Sign In' })).toBeNull();
+            expect(screen.queryByRole('link', { name: 'Profile' })).toBeNull();
           })
           """ |> code_block(:js)
           %>
           <%= h4.("Markup") %>
           <%=
           """
-          <a href="/signin" hidden>Sign In</a>
+          <a href="/profile" hidden>Profile</a>
           """ |> code_block(:html)
           %>
           <%= h4.("Styling") %>
@@ -69,27 +69,30 @@
         </section>
 
         <section aria-labelledby="hidden-visually-heading">
-          <%= h3.("Screen reader affordance: hide visually", id: "hidden-visually-heading") %>
+          <%= h3.("Visually hidden (assistive technology affordance)", id: "hidden-visually-heading") %>
           <%= h4.("Test") %>
           <%=
           """
           it("can still be found by our tests and by screen readers", () => {
             expect(
-              screen.getByRole('link', { name: 'Sign In' })
+              screen.getByRole('link', { name: 'Profile' })
             ).toBeInTheDocument();
           })
           """ |> code_block(:js)
           %>
           <%= h4.("Markup") %>
           <%=
           """
-          <a href="/signin" class="visually-hidden">Sign In</a>
+          <a href="/profile">
+            <span class="fas fa-user"></span>
+            <span visually-hidden>Profile</span>
+          </a>
           """ |> code_block(:html)
           %>
           <%= h4.("Styling") %>
           <%=
           """
-          .visually-hidden {
+          [visually-hidden] {
             position: absolute;
             overflow: hidden;
             clip: rect(0 0 0 0);
@@ -105,20 +108,22 @@
 
         <section aria-labelledby="hidden-screen-heading">
           <%= h3.("Visual affordance: hide to screen reader users", id: "hidden-screen-heading") %>
+          <%= h4.("Test") %>
           <%=
           """
           it("ignores emoji in accessible name", () => {
             expect(
-              screen.getByRole('link', { name: 'Sign In' })
+              screen.getByRole('link', { name: 'Profile' })
             ).toBeInTheDocument();
           })
           """ |> code_block(:js)
           %>
+          <%= h4.("Markup") %>
           <%=
           """
-          <a href="/signin">
-            <span aria-hidden="true">👉</span>
-            Sign In
+          <a href="/profile">
+            <span aria-hidden=true>👤</span>
+            Profile
           </a>
           """ |> code_block(:html)
           %>
@@ -128,6 +133,7 @@
           <%= h3.("Notes", id: "hidden-notes-heading") %>
           <ul>
             <li><%= link("Scott O’Hara: Inclusively Hidden", to: "https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html") %>
+            <li><%= link("Scott O’Hara: Know your ARIA: ‘Hidden’ vs ‘None’", to: "https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html") %>
             <li><%= link("MDN: Using the aria-hidden attribute", to: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute") %>
             <li><%= link("Places it’s tempting to use `display: none;`, but don’t ", to: "https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/") %>
           </ul>

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

@@ -1,5 +1,5 @@
 <header role=banner class="bg-gray-900 text-white">
-  <div class="px-4 flex flex-col md:flex-row items-stretch text-center md:text-left">
+  <div y-y x-x=md p-l p-r class="pb-4 md:pb-0 text-center md:text-left">
     <a href="/" class="block px-3 py-2 md:py-4 md:text-right text-sm md:text-base font-bold italic uppercase leading-tight tracking-wide hover:bg-gray-800">
       <span>Components <br>·Guide</span>
     </a>

apps/components_guide_web/lib/components_guide_web/templates/layout/root.html.leex

@@ -7,6 +7,7 @@
     <%= csrf_meta_tag() %>
     <%= live_title_tag assigns[:page_title] || "Guides to React, Accessibility, Modern CSS, TypeScript", suffix: " · Components.Guide" %>
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/RoyalIcing/tela@0d21d625a3c131a5a270c24ffb2b503f6e20bdc4/tela.css"/>
     <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </head>
   <body>

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

@@ -12,6 +12,7 @@
       <ul class="list-none row font-bold" style="--link-padding: 0.75em">
         <li><%= link("Fundamentals", to: '/react+typescript') %>
         <li><%= link("Testing", to: '/react+typescript/testing') %>
+        <li><%= link("Forms", to: '/react+typescript/forms') %>
       </ul>
     </nav>
   </header>

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/testing.html.md

@@ -102,8 +102,8 @@ This is what accessibility-first testing allows us to achieve. And as a massive
       ["**definition**", "`<dd>`"],
       ["**img**", "`<img alt=\"Some description\">`"],
       ["_none_", "`<img alt=\"\">`"],
-      ["**separator**", "`<hr>`"],
       ["**figure**", "`<figure>`"],
+      ["**separator**", "`<hr>`, `<li role=separator>`"],
       ["_none_", "`<p>`"],
       ["_none_", "`<div>`"],
       ["_none_", "`<span>`"],