Add button role to icons to hint that they are actionable.

This commit is contained in:
Nolan Darilek 2021-12-20 11:02:36 -06:00
parent 3860c79ec7
commit 159363fb4b

View file

@ -18,18 +18,18 @@ defmodule LiveBeatsWeb.ProfileLive.SongRowComponent do
<%= if @status == :playing do %> <%= if @status == :playing do %>
<span class="flex pt-1 relative mr-2 w-4"> <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> <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> </span>
<% end %> <% end %>
<%= if @status == :paused do %> <%= if @status == :paused do %>
<span class="flex pt-1 relative mr-2 w-4"> <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> </span>
<% end %> <% end %>
<%= if @status == :stopped do %> <%= if @status == :stopped do %>
<span class="flex relative w-6 -translate-x-1"> <span class="flex relative w-6 -translate-x-1">
<%= if @owns_profile? do %> <%= 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 %> <% end %>
</span> </span>
<% end %> <% end %>