From ef1355f897d27dabb06d2fde880b3f5bc63b4085 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Mon, 22 Nov 2021 13:50:20 -0600
Subject: [PATCH] Set `aria-hidden="true"` on more SVG graphics, and hide icons
 by default.

The original icon fix assumed that the `<svg>` tag had an `alt` attribute, which it does not. Instead, SVG requires a child element to specify a description. A complete fix involves patching upstream to allow for setting this element, but since we don't seem to have actionable icons without associated textual controls, set `aria-hidden="true"` by default and require it to be overridden if needed.
---
 lib/live_beats_web/live/live_helpers.ex | 6 +++---
 lib/live_beats_web/live/player_live.ex  | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index 943a3df..41cb0c9 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -31,7 +31,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
     >
       <div class="flex">
         <div class="flex-shrink-0">
-          <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-red-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-red-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
           </svg>
@@ -111,7 +111,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
 
   def spinner(assigns) do
     ~H"""
-    <svg class="inline-block animate-spin h-2.5 w-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <svg class="inline-block animate-spin h-2.5 w-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
       <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
     </svg>
@@ -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(:alt, fn -> "" end)
+      |> assign_new(:"aria-hidden", fn -> "true" end)
 
     ~H"""
     <%= if @outlined do %>
diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
index ef3d394..c8fc48b 100644
--- a/lib/live_beats_web/live/player_live.ex
+++ b/lib/live_beats_web/live/player_live.ex
@@ -50,7 +50,7 @@ defmodule LiveBeatsWeb.PlayerLive do
 
         <!-- prev -->
         <button type="button" class="sm:block xl:block mx-auto scale-75" phx-click={js_prev(@own_profile?)} aria-label="Previous">
-          <svg width="17" height="18">
+          <svg width="17" height="18" aria-hidden="true">
             <path d="M0 0h2v18H0V0zM4 9l13-9v18L4 9z" fill="currentColor" />
           </svg>
         </button>
@@ -59,12 +59,12 @@ defmodule LiveBeatsWeb.PlayerLive do
         <!-- play/pause -->
         <button type="button" class="mx-auto scale-75" phx-click={js_play_pause(@own_profile?)} aria-label={if @playing do "Pause" else "Play" end}>
           <%= if @playing do %>
-            <svg id="player-pause" width="50" height="50" fill="none">
+            <svg id="player-pause" width="50" height="50" fill="none" aria-hidden="true">
               <circle class="text-gray-300 dark:text-gray-500" cx="25" cy="25" r="24" stroke="currentColor" stroke-width="1.5" />
               <path d="M18 16h4v18h-4V16zM28 16h4v18h-4z" fill="currentColor" />
             </svg>
           <% else %>
-            <svg id="player-play" width="50" height="50" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg id="player-play" width="50" height="50" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               <circle id="svg_1" stroke-width="0.8" stroke="currentColor" r="11.4" cy="12" cx="12" class="text-gray-300 dark:text-gray-500"/>
               <path stroke="null" fill="currentColor" transform="rotate(90 12.8947 12.3097)" id="svg_6" d="m9.40275,15.10014l3.49194,-5.58088l3.49197,5.58088l-6.98391,0z" stroke-width="1.5" fill="none"/>
             </svg>
@@ -74,7 +74,7 @@ defmodule LiveBeatsWeb.PlayerLive do
 
         <!-- next -->
         <button type="button" class="mx-auto scale-75" phx-click={js_next(@own_profile?)} aria-label="Next">
-          <svg width="17" height="18" viewBox="0 0 17 18" fill="none">
+          <svg width="17" height="18" viewBox="0 0 17 18" fill="none" aria-hidden="true">
             <path d="M17 0H15V18H17V0Z" fill="currentColor" />
             <path d="M13 9L0 0V18L13 9Z" fill="currentColor" />
           </svg>