mirrors/live_beats
1
0
Fork 0
mirror of https://github.com/fly-apps/live_beats.git synced 2024-12-31 11:10:34 +00:00
Code Issues Projects Releases Wiki Activity

Set aria-hidden="true" on more SVG graphics, and hide icons by default.

Browse source 
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:
Nolan Darilek 2021-11-22 13:50:20 -06:00
parent 982e626424
commit ef1355f897
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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 %>

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

@ -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>