mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-11-13 11:41:00 +00:00
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.
This commit is contained in:
parent
982e626424
commit
ef1355f897
2 changed files with 7 additions and 7 deletions
|
@ -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 %>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue