Fix dl accessibility violations on stats dashboard

This commit is contained in:
Claudio Ortolina
2026-04-15 14:16:24 +01:00
parent 4194fb8b6d
commit 851cb36858
3 changed files with 10 additions and 12 deletions
@@ -76,12 +76,10 @@ defmodule MusicLibraryWeb.StatsComponents do
~H""" ~H"""
<div class="flex items-center justify-center overflow-hidden rounded-md bg-white shadow-sm dark:bg-zinc-800"> <div class="flex items-center justify-center overflow-hidden rounded-md bg-white shadow-sm dark:bg-zinc-800">
<div class="p-4 md:p-0"> <div class="p-4 md:p-0">
<dt> <p class="truncate text-center text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p class="truncate text-center text-sm font-medium text-zinc-500 dark:text-zinc-400"> {@title}
{@title} </p>
</p> <div :if={!@tooltip} class="mt-1">
</dt>
<dd :if={!@tooltip} class="mt-1">
<.link <.link
:if={@path} :if={@path}
navigate={@path} navigate={@path}
@@ -95,8 +93,8 @@ defmodule MusicLibraryWeb.StatsComponents do
> >
{@count} {@count}
</p> </p>
</dd> </div>
<dd :if={@tooltip} class="mt-1"> <div :if={@tooltip} class="mt-1">
<.tooltip> <.tooltip>
<:content> <:content>
<span id={"#{@title}-counter-tooltip"} phx-hook="FormatNumber">{@tooltip}</span> <span id={"#{@title}-counter-tooltip"} phx-hook="FormatNumber">{@tooltip}</span>
@@ -115,7 +113,7 @@ defmodule MusicLibraryWeb.StatsComponents do
{@count} {@count}
</p> </p>
</.tooltip> </.tooltip>
</dd> </div>
</div> </div>
</div> </div>
""" """
@@ -522,7 +522,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
~H""" ~H"""
<.section> <.section>
<:title>{gettext("Records")}</:title> <:title>{gettext("Records")}</:title>
<dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5 min-h-35"> <div class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5 min-h-35">
<.album_preview <.album_preview
record={@latest_record} record={@latest_record}
title={gettext("Latest purchase")} title={gettext("Latest purchase")}
@@ -540,7 +540,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
tooltip={@scrobble_count} tooltip={@scrobble_count}
path={~p"/scrobbled-tracks"} path={~p"/scrobbled-tracks"}
/> />
</dl> </div>
</.section> </.section>
""" """
end end
@@ -68,7 +68,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
test "shows the wishlist total count", %{conn: conn, wishlist: wishlist} do test "shows the wishlist total count", %{conn: conn, wishlist: wishlist} do
conn conn
|> visit("/") |> visit("/")
|> assert_has("dd", wishlist |> length() |> Integer.to_string()) |> assert_has("a", wishlist |> length() |> Integer.to_string())
end end
test "displays records for the current date in the 'On This Day' section", %{ test "displays records for the current date in the 'On This Day' section", %{