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:
co-authored by
Claude Opus 5.5
parent
adec971042
commit
068129a9b1
@@ -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">
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user