From f7db67f636441a398c5ce0aa3e3b62893e85e96f Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Tue, 16 Nov 2021 14:07:47 -0600
Subject: [PATCH 1/5] Hide icons with associated buttons from accessibility
 tree.

---
 lib/live_beats_web/live/player_live.ex     | 7 +++++--
 lib/live_beats_web/live/song_live/index.ex | 9 +++++----
 lib/live_beats_web/views/layout_view.ex    | 4 ++--
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
index 91830fa..ed32f2e 100644
--- a/lib/live_beats_web/live/player_live.ex
+++ b/lib/live_beats_web/live/player_live.ex
@@ -41,7 +41,7 @@ defmodule LiveBeatsWeb.PlayerLive do
             redirect_to={profile_path(@profile)}
             class="mx-auto flex outline border-2 border-white border-opacity-20 rounded-md p-1 pr-2"
           >
-            <span class="mt-1"><.icon name={:user_circle}/></span>
+            <span class="mt-1"><.icon name={:user_circle} aria-hidden="true"/></span>
             <p class="ml-2"><%= @profile.username %></p>
           </.link>
         <% else %>
@@ -221,7 +221,10 @@ defmodule LiveBeatsWeb.PlayerLive do
     {:noreply, play_current_song(socket)}
   end
 
-  def handle_info({Accounts, %Accounts.Events.ActiveProfileChanged{new_profile_user_id: user_id}}, socket) do
+  def handle_info(
+        {Accounts, %Accounts.Events.ActiveProfileChanged{new_profile_user_id: user_id}},
+        socket
+      ) do
     if user_id do
       {:noreply, assign(socket, profile: get_profile(user_id))}
     else
diff --git a/lib/live_beats_web/live/song_live/index.ex b/lib/live_beats_web/live/song_live/index.ex
index 43d8879..545826b 100644
--- a/lib/live_beats_web/live/song_live/index.ex
+++ b/lib/live_beats_web/live/song_live/index.ex
@@ -13,7 +13,7 @@ defmodule LiveBeatsWeb.SongLive.Index do
           <%= @profile.tagline %> <%= if @owns_profile? do %>(you)<% end %>
         </div>
         <.link href={@profile.external_homepage_url} _target="blank" class="block text-sm text-gray-600">
-            <.icon name={:code}/> <span class=""><%= url_text(@profile.external_homepage_url) %></span>
+            <.icon name={:code} aria-hidden="true"/> <span class=""><%= url_text(@profile.external_homepage_url) %></span>
         </.link>
       </div>
 
@@ -22,18 +22,18 @@ defmodule LiveBeatsWeb.SongLive.Index do
           <.button primary
             phx-click={JS.push("switch_profile", value: %{user_id: nil}, target: "#player", loading: "#player")}
           >
-            <.icon name={:stop}/><span class="ml-2">Stop Listening</span>
+            <.icon name={:stop} aria-hidden="true"/><span class="ml-2">Stop Listening</span>
           </.button>
         <% else %>
           <.button primary
             phx-click={JS.push("switch_profile", value: %{user_id: @profile.user_id}, target: "#player", loading: "#player")}
           >
-            <.icon name={:play}/><span class="ml-2">Listen</span>
+            <.icon name={:play} aria-hidden="true"/><span class="ml-2">Listen</span>
           </.button>
         <% end %>
         <%= if @owns_profile? do %>
           <.button primary patch_to={Routes.song_index_path(@socket, :new)}>
-            <.icon name={:upload}/><span class="ml-2">Upload Songs</span>
+            <.icon name={:upload} aria-hidden="true"/><span class="ml-2">Upload Songs</span>
           </.button>
         <% end %>
       </:actions>
@@ -236,6 +236,7 @@ defmodule LiveBeatsWeb.SongLive.Index do
   end
 
   defp url_text(nil), do: ""
+
   defp url_text(url_str) do
     uri = URI.parse(url_str)
     uri.host <> uri.path
diff --git a/lib/live_beats_web/views/layout_view.ex b/lib/live_beats_web/views/layout_view.ex
index f4823eb..6e3ebcd 100644
--- a/lib/live_beats_web/views/layout_view.ex
+++ b/lib/live_beats_web/views/layout_view.ex
@@ -35,7 +35,7 @@ defmodule LiveBeatsWeb.LayoutView do
           redirect_to={profile_path(@current_user)}
           class="text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
         >
-          <.icon name={:music_note} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/>
+          <.icon name={:music_note} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6" aria-hidden="true"/>
           My Songs
         </.link>
 
@@ -43,7 +43,7 @@ defmodule LiveBeatsWeb.LayoutView do
           redirect_to={Routes.settings_path(LiveBeatsWeb.Endpoint, :edit)}
           class="text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
         >
-          <.icon name={:adjustments} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/>
+          <.icon name={:adjustments} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6" aria-hidden="true"/>
           Settings
         </.link>
       <% else %>

From fad37064db742375add78a8c85531d9dde5028d3 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Tue, 16 Nov 2021 14:26:10 -0600
Subject: [PATCH 2/5] Label player controls.

---
 lib/live_beats_web/live/player_live.ex | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
index ed32f2e..abc7240 100644
--- a/lib/live_beats_web/live/player_live.ex
+++ b/lib/live_beats_web/live/player_live.ex
@@ -49,15 +49,15 @@ defmodule LiveBeatsWeb.PlayerLive do
         <% end %>
 
         <!-- prev -->
-        <button type="button" class="sm:block xl:block mx-auto scale-75" phx-click={js_prev(@own_profile?)}>
+        <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">
             <path d="M0 0h2v18H0V0zM4 9l13-9v18L4 9z" fill="currentColor" />
           </svg>
         </button>
         <!-- /prev -->
 
-        <!-- pause -->
-        <button type="button" class="mx-auto scale-75" phx-click={js_play_pause(@own_profile?)}>
+        <!-- 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">
               <circle class="text-gray-300 dark:text-gray-500" cx="25" cy="25" r="24" stroke="currentColor" stroke-width="1.5" />
@@ -70,10 +70,10 @@ defmodule LiveBeatsWeb.PlayerLive do
             </svg>
           <% end %>
         </button>
-        <!-- /pause -->
+        <!-- /play/pause -->
 
         <!-- next -->
-        <button type="button" class="mx-auto scale-75" phx-click={js_next(@own_profile?)}>
+        <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">
             <path d="M17 0H15V18H17V0Z" fill="currentColor" />
             <path d="M13 9L0 0V18L13 9Z" fill="currentColor" />

From 72501c90b4a9c282db1d1a9fe87f1563cbb180d0 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Wed, 17 Nov 2021 09:30:33 -0600
Subject: [PATCH 3/5] Remove `aria-hidden` on icons in favor of empty alt text.

This matches better with adding alt text to images, which is probably better than either manually opting out of the accessibility tree or creating some less-compatible implementation.
---
 lib/live_beats_web/live/live_helpers.ex    | 1 +
 lib/live_beats_web/live/player_live.ex     | 2 +-
 lib/live_beats_web/live/song_live/index.ex | 8 ++++----
 lib/live_beats_web/views/layout_view.ex    | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index 7e6608f..4f363c0 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -96,6 +96,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)
 
     ~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 abc7240..fb0c6ad 100644
--- a/lib/live_beats_web/live/player_live.ex
+++ b/lib/live_beats_web/live/player_live.ex
@@ -41,7 +41,7 @@ defmodule LiveBeatsWeb.PlayerLive do
             redirect_to={profile_path(@profile)}
             class="mx-auto flex outline border-2 border-white border-opacity-20 rounded-md p-1 pr-2"
           >
-            <span class="mt-1"><.icon name={:user_circle} aria-hidden="true"/></span>
+            <span class="mt-1"><.icon name={:user_circle}/></span>
             <p class="ml-2"><%= @profile.username %></p>
           </.link>
         <% else %>
diff --git a/lib/live_beats_web/live/song_live/index.ex b/lib/live_beats_web/live/song_live/index.ex
index 545826b..672acdc 100644
--- a/lib/live_beats_web/live/song_live/index.ex
+++ b/lib/live_beats_web/live/song_live/index.ex
@@ -13,7 +13,7 @@ defmodule LiveBeatsWeb.SongLive.Index do
           <%= @profile.tagline %> <%= if @owns_profile? do %>(you)<% end %>
         </div>
         <.link href={@profile.external_homepage_url} _target="blank" class="block text-sm text-gray-600">
-            <.icon name={:code} aria-hidden="true"/> <span class=""><%= url_text(@profile.external_homepage_url) %></span>
+            <.icon name={:code}/> <span class=""><%= url_text(@profile.external_homepage_url) %></span>
         </.link>
       </div>
 
@@ -22,18 +22,18 @@ defmodule LiveBeatsWeb.SongLive.Index do
           <.button primary
             phx-click={JS.push("switch_profile", value: %{user_id: nil}, target: "#player", loading: "#player")}
           >
-            <.icon name={:stop} aria-hidden="true"/><span class="ml-2">Stop Listening</span>
+            <.icon name={:stop}/><span class="ml-2">Stop Listening</span>
           </.button>
         <% else %>
           <.button primary
             phx-click={JS.push("switch_profile", value: %{user_id: @profile.user_id}, target: "#player", loading: "#player")}
           >
-            <.icon name={:play} aria-hidden="true"/><span class="ml-2">Listen</span>
+            <.icon name={:play}/><span class="ml-2">Listen</span>
           </.button>
         <% end %>
         <%= if @owns_profile? do %>
           <.button primary patch_to={Routes.song_index_path(@socket, :new)}>
-            <.icon name={:upload} aria-hidden="true"/><span class="ml-2">Upload Songs</span>
+            <.icon name={:upload}/><span class="ml-2">Upload Songs</span>
           </.button>
         <% end %>
       </:actions>
diff --git a/lib/live_beats_web/views/layout_view.ex b/lib/live_beats_web/views/layout_view.ex
index 6e3ebcd..f4823eb 100644
--- a/lib/live_beats_web/views/layout_view.ex
+++ b/lib/live_beats_web/views/layout_view.ex
@@ -35,7 +35,7 @@ defmodule LiveBeatsWeb.LayoutView do
           redirect_to={profile_path(@current_user)}
           class="text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
         >
-          <.icon name={:music_note} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6" aria-hidden="true"/>
+          <.icon name={:music_note} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/>
           My Songs
         </.link>
 
@@ -43,7 +43,7 @@ defmodule LiveBeatsWeb.LayoutView do
           redirect_to={Routes.settings_path(LiveBeatsWeb.Endpoint, :edit)}
           class="text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
         >
-          <.icon name={:adjustments} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6" aria-hidden="true"/>
+          <.icon name={:adjustments} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/>
           Settings
         </.link>
       <% else %>

From c31a2ea8e063604d092e38af95043299300bfc47 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Wed, 17 Nov 2021 10:09:04 -0600
Subject: [PATCH 4/5] Remove unused menu.

---
 .../templates/layout/live.html.heex             | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/lib/live_beats_web/templates/layout/live.html.heex b/lib/live_beats_web/templates/layout/live.html.heex
index a8bdfd1..beb1fa8 100644
--- a/lib/live_beats_web/templates/layout/live.html.heex
+++ b/lib/live_beats_web/templates/layout/live.html.heex
@@ -113,23 +113,6 @@
           </div>
         </form>
       </div>
-      <div class="flex items-center">
-        <!-- Profile dropdown TODO -->
-        <div @keydown.escape.stop="open = false" @click.away="open = false" class="ml-3 relative">
-          <div>
-            <button type="button"
-              class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
-              id="user-menu-button" @click="open = true"
-              aria-expanded="false" aria-haspopup="true"
-            >
-              <span class="sr-only">Open user menu</span>
-              <img class="h-8 w-8 rounded-full"
-                src={@current_user.avatar_url}
-                alt="">
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 

From aec76630d15cfd0d8eae61d60e45b9894ca03a58 Mon Sep 17 00:00:00 2001
From: Chris McCord <chris@chrismccord.com>
Date: Mon, 22 Nov 2021 10:36:18 -0500
Subject: [PATCH 5/5] Remove unnecessary attr

---
 lib/live_beats_web/live/live_helpers.ex | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index 290345e..0e8aca5 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -50,7 +50,6 @@ defmodule LiveBeatsWeb.LiveHelpers do
         id="flash"
         class="rounded-md bg-red-50 p-4 fixed top-1 right-1 w-96 fade-in-scale"
         phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")}
-        phx-value-key="error"
         phx-hook="Flash"
       >
         <div class="flex">