From 3860c79ec7df1e7856a8c01cb56a877523fbc9ec Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Thu, 16 Dec 2021 15:25:51 -0600
Subject: [PATCH 1/2] If an icon has `aria-label`set, don't set `aria-hidden`.
 Also, label some icons.

---
 lib/live_beats_web/live/live_helpers.ex                    | 2 +-
 lib/live_beats_web/live/profile_live/song_row_component.ex | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index 4414f8f..3ed3395 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -123,7 +123,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
       assigns
       |> assign_new(:outlined, fn -> false end)
       |> assign_new(:class, fn -> "w-4 h-4 inline-block" end)
-      |> assign_new(:"aria-hidden", fn -> "true" end)
+      |> assign_new(:"aria-hidden", fn -> !Map.has_key?(assigns, :"aria-label") end)
 
     ~H"""
     <%= if @outlined do %>
diff --git a/lib/live_beats_web/live/profile_live/song_row_component.ex b/lib/live_beats_web/live/profile_live/song_row_component.ex
index 0ddcb69..45ef410 100644
--- a/lib/live_beats_web/live/profile_live/song_row_component.ex
+++ b/lib/live_beats_web/live/profile_live/song_row_component.ex
@@ -18,18 +18,18 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
                 <%= if @status == :playing do %>
                   <span class="flex pt-1 relative mr-2 w-4">
                     <span class="w-3 h-3 animate-ping bg-purple-400 rounded-full absolute"></span>
-                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1"/>
+                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1" aria-label="Playing"/>
                   </span>
                 <% end %>
                 <%= if @status == :paused do %>
                   <span class="flex pt-1 relative mr-2 w-4">
-                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1 text-gray-400"/>
+                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1 text-gray-400" aria-label="Paused"/>
                   </span>
                 <% end %>
                 <%= if @status == :stopped do %>
                   <span class="flex relative w-6 -translate-x-1">
                   <%= if @owns_profile? do %>
-                    <.icon name={:play} class="h-5 w-5 text-gray-400"/>
+                    <.icon name={:play} class="h-5 w-5 text-gray-400" aria-label="Play"/>
                   <% end %>
                   </span>
                 <% end %>

From 159363fb4b42a73dc4c66f951201a149cca8d2a2 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Mon, 20 Dec 2021 11:02:36 -0600
Subject: [PATCH 2/2] Add button role to icons to hint that they are
 actionable.

---
 lib/live_beats_web/live/profile_live/song_row_component.ex | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/live_beats_web/live/profile_live/song_row_component.ex b/lib/live_beats_web/live/profile_live/song_row_component.ex
index 45ef410..a4ecf8f 100644
--- a/lib/live_beats_web/live/profile_live/song_row_component.ex
+++ b/lib/live_beats_web/live/profile_live/song_row_component.ex
@@ -18,18 +18,18 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
                 <%= if @status == :playing do %>
                   <span class="flex pt-1 relative mr-2 w-4">
                     <span class="w-3 h-3 animate-ping bg-purple-400 rounded-full absolute"></span>
-                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1" aria-label="Playing"/>
+                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1" aria-label="Playing" role="button"/>
                   </span>
                 <% end %>
                 <%= if @status == :paused do %>
                   <span class="flex pt-1 relative mr-2 w-4">
-                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1 text-gray-400" aria-label="Paused"/>
+                    <.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1 text-gray-400" aria-label="Paused" role="button"/>
                   </span>
                 <% end %>
                 <%= if @status == :stopped do %>
                   <span class="flex relative w-6 -translate-x-1">
                   <%= if @owns_profile? do %>
-                    <.icon name={:play} class="h-5 w-5 text-gray-400" aria-label="Play"/>
+                    <.icon name={:play} class="h-5 w-5 text-gray-400" aria-label="Play" role="button"/>
                   <% end %>
                   </span>
                 <% end %>