From 7fdb30520eb04d1717ee64e9a9ac0a0066aa3e88 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Tue, 14 Dec 2021 12:17:40 -0600
Subject: [PATCH] Hide title/artist metadata when empty.

From an accessibility perspective, having an empty `<h2/>` is confusing. Even though it lacks text, it remains visible to scree readers and is still navigable.

I'm not sure whether wrapping the entire `<div/>` in this check breaks the layout, or if the individual elements should have `aria-hidden` set if their values are empty.
---
 lib/live_beats_web/live/player_live.ex | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
index c56438b..6d2e3dc 100644
--- a/lib/live_beats_web/live/player_live.ex
+++ b/lib/live_beats_web/live/player_live.ex
@@ -15,16 +15,18 @@ defmodule LiveBeatsWeb.PlayerLive do
       </div>
       <div class="bg-white dark:bg-gray-800 p-4">
         <div class="flex items-center space-x-3.5 sm:space-x-5 lg:space-x-3.5 xl:space-x-5">
-          <div class="pr-5">
-            <div class="min-w-0 max-w-xs flex-col space-y-0.5">
+          <%= if @song do %>
+            <div class="pr-5">
+              <div class="min-w-0 max-w-xs flex-col space-y-0.5">
                 <h2 class="text-black dark:text-white text-sm sm:text-sm lg:text-sm xl:text-sm font-semibold truncate">
-                  <%= if @song, do: @song.title, else: raw("&nbsp;") %>
+                  <%= @song.title %>
                 </h2>
                 <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-sm lg:text-sm xl:text-sm font-medium">
-                  <%= if @song, do: @song.artist, else: raw("&nbsp;") %>
+                  <%= @song.artist %>
                 </p>
+              </div>
             </div>
-          </div>
+          <% end %>
 
           <.progress_bar id="player-progress" />