fix(a11y): address R9 code-review findings (glass shadow, focus dedup)
- #1: remove the 9 dead `shadow-*` from glass surfaces instead of letting them override the tuned glass box-shadow. The @layer components move made a JSX shadow-* win AND atomically drop the glass inset top-edge highlight; deleting the (always-dead) utilities keeps the intended glass depth incl. the inset sheen. Verified in-browser: a .glass box-shadow again includes its inset segment. - #3: drop the per-element focus-visible outlines from the rail chrome buttons and SavedViews action buttons — the global button:focus-visible fallback already draws the identical 2px accent ring, so they were redundant. Verified: the pin button rings from the global rule alone. - #5: unify the focus-within outline offset (offset-2) on the SearchBar and ShareDialog pills. - #2 (double outline on the pill when an inner button is focused): NOT fixed — the clean fix (has-[input:focus] so only the input rings the pill) does not generate under Tailwind v4 (measured: no rule emitted). Kept the working focus-within, which is a11y-correct (every element still shows a focus indicator); the overlapping ring is an accepted cosmetic edge-case. - #4 (weak ring on solid-fill selected items): deferred to R10 with the selected-paint tokenisation. Gate green (tsc/eslint/prettier/knip/vitest 79).
This commit is contained in:
@@ -37,7 +37,7 @@ export function DraftSaveBar({
|
||||
const saving = state === "saving";
|
||||
const floating = variant === "floating";
|
||||
const wrap = floating
|
||||
? "fixed bottom-4 left-1/2 -translate-x-1/2 z-rail glass rounded-2xl shadow-lg flex items-center justify-between gap-4 px-4 py-3 w-[min(48rem,calc(100%-2rem))]"
|
||||
? "fixed bottom-4 left-1/2 -translate-x-1/2 z-rail glass rounded-2xl flex items-center justify-between gap-4 px-4 py-3 w-[min(48rem,calc(100%-2rem))]"
|
||||
: "flex items-center justify-between gap-3 border-t border-border/60 px-4 py-3 bg-card/40";
|
||||
// The floating variant is fixed to the viewport but renders from a page inside the page
|
||||
// scroller, so it goes to <body> — otherwise the scroller's stacking context (its edge-fade
|
||||
|
||||
Reference in New Issue
Block a user