fix(ui): give the source breakdown disclosure a visible focus ring

Its summary set focus-visible:outline-none, which left a keyboard
reader with no visible focus there. It now shares the settings groups'
focus rule and chevron.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas Winther
2026-10-01 04:18:28 +02:00
co-authored by Claude Opus 5.5
parent adec971042
commit 068129a9b1
2 changed files with 17 additions and 6 deletions
+9 -2
View File
@@ -290,8 +290,15 @@ export function Colophon({
)}
{shownStale.some((s) => s.sources && s.sources.length > 0) && (
<details className="mt-2 text-faint">
<summary className="cursor-pointer hover:text-muted focus-visible:outline-none">
<details className="disclosure mt-2 text-faint">
<summary className="flex w-fit items-center gap-1.5 hover:text-muted">
<svg
aria-hidden
viewBox="0 0 16 16"
className="settings-chevron size-2 shrink-0"
>
<path d="M5 2.5l6 5.5-6 5.5z" fill="currentColor" />
</svg>
Source breakdown
</summary>
<ul className="mt-1.5 space-y-1 border-l border-hairline pl-3">
+8 -4
View File
@@ -433,16 +433,19 @@ body {
* `[tabindex]`, so the focus rule above does not reach it and the one control
* that opens a group would have no visible focus at all.
*/
.settings-group > summary {
.settings-group > summary,
.disclosure > summary {
list-style: none;
cursor: pointer;
}
.settings-group > summary::-webkit-details-marker {
.settings-group > summary::-webkit-details-marker,
.disclosure > summary::-webkit-details-marker {
display: none;
}
.settings-group > summary:focus-visible {
.settings-group > summary:focus-visible,
.disclosure > summary:focus-visible {
outline: 2px solid var(--color-near);
outline-offset: 2px;
border-radius: 3px;
@@ -461,7 +464,8 @@ body {
transition: transform 150ms ease;
}
.settings-group[open] > summary .settings-chevron {
.settings-group[open] > summary .settings-chevron,
.disclosure[open] > summary .settings-chevron {
transform: rotate(90deg);
}