Add section on hiding elements

Author: RoyalIcing

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

@@ -14,6 +14,10 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
     render(conn, "roles-cheatsheet.html")
   end
 
+  def show(conn, %{"id" => "properties-cheatsheet"}) do
+    render(conn, "properties-cheatsheet.html")
+  end
+
   def show(conn, _params) do
     raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
   end

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

@@ -0,0 +1,116 @@
+<%
+  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-4xl text-center font-bold leading-tight text-shadow">
+      <%= "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>
+  </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">
+      <li><%= link "Hide", to: "#hide" %>
+      <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">
+      <article>
+        <%= h2.("I want to hide an element", id: "hidden") %>
+
+        <p>You can hide using a large range of techniques. What you first want to ask is, from whom do I want to hide the content?
+
+        <ul>
+          <li>Hide to all users.
+          <li>Hide to sighted users, but show to screen reader users.
+          <li>Hide to screen reader users, but show to sighted users.
+        </ul>
+
+        <section aria-labelledby="hidden-all-heading">
+          <%= h3.("Hide to all users", id: "hidden-all-heading") %>
+          <%=
+          """
+          it("is hidden", () => {
+            expect(queryByRole('link', { name: 'Sign In' })).toBeNull();
+          })
+          """ |> code_block(:js)
+          %>
+          <%=
+          """
+          {{ if .ShowSignIn }}
+            <a href="/signin">Sign In</a>
+          {{ end }}
+          """ |> code_block(:html)
+          %>
+        </section>
+
+        <section aria-labelledby="hidden-visually-heading">
+          <%= h3.("Hide only visually", id: "hidden-visually-heading") %>
+          <%=
+          """
+          it("is shown to non-visual users", () => {
+            expect(
+              getByRole('link', { name: 'Sign In' })
+            ).toBeInTheDocument();
+          })
+          """ |> code_block(:js)
+          %>
+          <%=
+          """
+          <a href="/signin" class="visually-hidden">Sign In</a>
+          """ |> code_block(:html)
+          %>
+          <%=
+          """
+          .visually-hidden {
+            position: absolute;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            height: 1px; width: 1px;
+            margin: -1px; padding: 0; border: 0;
+          }
+          """ |> code_block(:css)
+          %>
+        </section>
+
+        <section aria-labelledby="hidden-screen-heading">
+          <%= h3.("Hide to screen-reader users", id: "hidden-screen-heading") %>
+          <%=
+          """
+          it("ignores emoji in accessible name", () => {
+            expect(
+              getByRole('link', { name: 'Sign In' })
+            ).toBeInTheDocument();
+          })
+          """ |> code_block(:js)
+          %>
+          <%=
+          """
+          <a href="/signin">
+            <span aria-hidden="true">👉</span>
+            Sign In
+          </a>
+          """ |> code_block(:html)
+          %>
+        </section>
+
+        <section aria-labelledby="hidden-notes-heading">
+          <%= h3.("Notes", id: "hidden-notes-heading") %>
+          <ul>
+            <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>
+        </section>
+      </article>
+
+    </section>
+  </div>
+</div>

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

@@ -153,6 +153,11 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
         <br>
         Reusable, testable data models
       </a>
+      <a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-pink-100 text-pink-600 border-t border-l-4 border-pink-500 hover:bg-pink-200 hover:text-pink-700 shadow-xl hover:shadow-lg">
+        <span class="text-3xl"><%= "Learn Wonka" %></span>
+        <br>
+        Reusable, testable data models
+      </a>
     </div>
   </section>
 </div>