Repository: woylie/doggo
Pull request #203 (2024-01-08 03:32:15)

icon hidden label
contributes to #199 


Patch:
diff --git a/lib/doggo.ex b/lib/doggo.ex
index f0d861a..16d2b11 100644
--- a/lib/doggo.ex
+++ b/lib/doggo.ex
@@ -2175,11 +2175,12 @@ defmodule Doggo do
           label_placement_class(@label_placement)
         ] ++ List.wrap(@class)
       }
-      aria-label={if @label && @label_placement == :hidden, do: @label}
       {@rest}
     >
       <%= render_slot(@inner_block) %>
-      <span :if={@label && @label_placement != :hidden}><%= @label %></span>
+      <span :if={@label} class={@label_placement == :hidden && "is-visually-hidden"}>
+        <%= @label %>
+      </span>
     </span>
     """
   end
@@ -2246,11 +2247,12 @@ defmodule Doggo do
           label_placement_class(@label_placement)
         ] ++ List.wrap(@class)
       }
-      aria-label={if @label && @label_placement == :hidden, do: @label}
       {@rest}
     >
       <svg aria-hidden="true"><use href={"#{@sprite_url}##{@name}"} /></svg>
-      <span :if={@label && @label_placement != :hidden}><%= @label %></span>
+      <span :if={@label} class={@label_placement == :hidden && "is-visually-hidden"}>
+        <%= @label %>
+      </span>
     </span>
     """
   end
@@ -3009,6 +3011,16 @@ defmodule Doggo do
 
   attr :title, :string, default: "required"
 
+  # inputs are announced as required by screen readers if the `required`
+  # attribute is set. This makes this mark purely visual. `aria-hidden="true"`
+  # is added so that screen readers don't announce redundant information. The
+  # title attribute has poor accessibility characteristics, but since this is
+  # purely presentational, this is acceptable.
+  # It is good practice to add a sentence explaining that fields marked with an
+  # asterisk (*) are required to the form.
+  # Alternatively, the word `required` might be used instead of an asterisk. In
+  # that case, the text should still be aria-hidden. But also, this wouldn't be
+  # an abbr anymore.
   defp required_mark(assigns) do
     ~H"""
     <abbr class="label-required" aria-hidden="true" title={@title}>*</abbr>


Test patch:
diff --git a/test/doggo_test.exs b/test/doggo_test.exs
index 83b6d94..34aee6f 100644
--- a/test/doggo_test.exs
+++ b/test/doggo_test.exs
@@ -2556,9 +2556,9 @@ defmodule DoggoTest do
         <Doggo.icon label="some-label">some-icon</Doggo.icon>
         """)
 
-      span = find_one(html, "span:root")
-      assert attribute(span, "span:root", "aria-label") == "some-label"
-      assert Floki.find(html, "span > span") == []
+      assert span = find_one(html, "span > span")
+      assert attribute(span, "class") == "is-visually-hidden"
+      assert text(span) == "some-label"
     end
 
     test "with label left" do
@@ -2573,8 +2573,9 @@ defmodule DoggoTest do
 
       span = find_one(html, "span:root")
       assert attribute(span, "class") == "icon is-normal has-text-left"
-      assert attribute(span, "span:root", "aria-label") == nil
-      assert text(html, "span > span") == "some-label"
+      assert span = find_one(html, "span > span")
+      assert attribute(span, "class") == ""
+      assert text(span) == "some-label"
     end
 
     test "with label right" do
@@ -2589,8 +2590,9 @@ defmodule DoggoTest do
 
       span = find_one(html, "span:root")
       assert attribute(span, "class") == "icon is-normal has-text-right"
-      assert attribute(span, "span:root", "aria-label") == nil
-      assert text(html, "span > span") == "some-label"
+      assert span = find_one(html, "span > span")
+      assert attribute(span, "class") == ""
+      assert text(span) == "some-label"
     end
 
     test "with additional class as string" do
@@ -2678,9 +2680,9 @@ defmodule DoggoTest do
         <Doggo.icon_sprite name="edit" label="some-label" />
         """)
 
-      span = find_one(html, "span:root")
-      assert attribute(span, "span:root", "aria-label") == "some-label"
-      assert Floki.find(html, "span > span") == []
+      assert span = find_one(html, "span > span")
+      assert attribute(span, "class") == "is-visually-hidden"
+      assert text(span) == "some-label"
     end
 
     test "with label left" do
@@ -2693,8 +2695,9 @@ defmodule DoggoTest do
 
       span = find_one(html, "span:root")
       assert attribute(span, "class") == "icon is-normal has-text-left"
-      assert attribute(span, "span:root", "aria-label") == nil
-      assert text(html, "span > span") == "some-label"
+      assert span = find_one(html, "span > span")
+      assert attribute(span, "class") == ""
+      assert text(span) == "some-label"
     end
 
     test "with label right" do
@@ -2707,8 +2710,9 @@ defmodule DoggoTest do
 
       span = find_one(html, "span:root")
       assert attribute(span, "class") == "icon is-normal has-text-right"
-      assert attribute(span, "span:root", "aria-label") == nil
-      assert text(html, "span > span") == "some-label"
+      assert span = find_one(html, "span > span")
+      assert attribute(span, "class") == ""
+      assert text(span) == "some-label"
     end
 
     test "with additional class as string" do