mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 05:12:14 +00:00
fix(documents): make the delete-key hint readable enough to be a hint
The Del chip added beside the document card measured 4.06:1 against the card's background, under the 4.5:1 floor, and axe failed the vault on it. So the change that made the destructive key visible introduced a barrier of its own. It uses the full foreground token now. The design rule says muted for meta text, and a key hint is meta — but it is the one kind of meta that has to be readable at a glance, so here the contrast rule wins and the reason sits next to the class list rather than in a commit nobody will read again. Found by running the e2e suite locally before pushing rather than after.
This commit is contained in:
1 parent
ea55886445
commit
99836bb08c
1 file changed
+8
-2
@@ -296,12 +296,18 @@ export function DocumentCard({
|
||||
the card holds focus (same `group-focus-within` trigger the checkbox
|
||||
uses) and hidden from the accessibility tree, because
|
||||
`aria-keyshortcuts` on the overlay button already announces the same
|
||||
key. `pointer-events-none` keeps it out of the click target. */}
|
||||
key. `pointer-events-none` keeps it out of the click target.
|
||||
|
||||
Full `text-foreground`, not `text-muted-foreground`: the muted token
|
||||
on this card's background measures 4.06:1, under the 4.5:1 floor, and
|
||||
axe fails the vault on it. A key hint is the one piece of meta text
|
||||
that has to be readable at a glance, so the usual muted-for-meta rule
|
||||
gives way here rather than the contrast one. */}
|
||||
{onDelete ? (
|
||||
<kbd
|
||||
aria-hidden
|
||||
data-slot="document-delete-hint"
|
||||
className="border-border bg-background text-muted-foreground pointer-events-none absolute right-2 bottom-2 hidden rounded border px-1.5 font-mono text-xs opacity-0 transition-opacity group-focus-within:opacity-100 sm:inline-block"
|
||||
className="border-border bg-background text-foreground pointer-events-none absolute right-2 bottom-2 hidden rounded border px-1.5 font-mono text-xs opacity-0 transition-opacity group-focus-within:opacity-100 sm:inline-block"
|
||||
>
|
||||
{t("documents.card.deleteKey")}
|
||||
</kbd>
|
||||
|
||||
Reference in new issue
Block a user