mirrors/live_beats
1
0
Fork 0
mirror of https://github.com/fly-apps/live_beats.git synced 2024-11-25 09:20:59 +00:00
Code Issues Projects Releases Wiki Activity

Hide title/artist metadata when empty.

Browse source 
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.
This commit is contained in:
Nolan Darilek 2021-12-14 12:17:40 -06:00
parent c8a6035a02
commit 7fdb30520e
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
lib/live_beats_web/live/player_live.ex
View file

@ -15,16 +15,18 @@ defmodule LiveBeatsWeb.PlayerLive do
</div> </div>
<div class="bg-white dark:bg-gray-800 p-4"> <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="flex items-center space-x-3.5 sm:space-x-5 lg:space-x-3.5 xl:space-x-5">
<%= if @song do %>
<div class="pr-5"> <div class="pr-5">
<div class="min-w-0 max-w-xs flex-col space-y-0.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"> <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> </h2>
<p class="text-gray-500 dark:text-gray-400 text-sm sm:text-sm lg:text-sm xl:text-sm font-medium"> <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> </p>
</div> </div>
</div> </div>
<% end %>
<.progress_bar id="player-progress" /> <.progress_bar id="player-progress" />