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"""
<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">
<dt>
<p class="truncate text-center text-sm font-medium text-zinc-500 dark:text-zinc-400">
{@title}
</p>
</dt>
<dd :if={!@tooltip} class="mt-1">
<p class="truncate text-center text-sm font-medium text-zinc-500 dark:text-zinc-400">
{@title}
</p>
<div :if={!@tooltip} class="mt-1">
<.link
:if={@path}
navigate={@path}
@@ -95,8 +93,8 @@ defmodule MusicLibraryWeb.StatsComponents do
>
{@count}
</p>
</dd>
<dd :if={@tooltip} class="mt-1">
</div>
<div :if={@tooltip} class="mt-1">
<.tooltip>
<:content>
<span id={"#{@title}-counter-tooltip"} phx-hook="FormatNumber">{@tooltip}</span>
@@ -115,7 +113,7 @@ defmodule MusicLibraryWeb.StatsComponents do
{@count}
</p>
</.tooltip>
</dd>
</div>
</div>
</div>
"""
@@ -522,7 +522,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
~H"""
<.section>
<: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
record={@latest_record}
title={gettext("Latest purchase")}
@@ -540,7 +540,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
tooltip={@scrobble_count}
path={~p"/scrobbled-tracks"}
/>
</dl>
</div>
</.section>
"""
end
@@ -68,7 +68,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
test "shows the wishlist total count", %{conn: conn, wishlist: wishlist} do
conn
|> visit("/")
|> assert_has("dd", wishlist |> length() |> Integer.to_string())
|> assert_has("a", wishlist |> length() |> Integer.to_string())
end
test "displays records for the current date in the 'On This Day' section", %{