fix(ui): a focused, disabled FocusSafeButton no longer lights up on hover

A FocusSafeButton that holds the focus is disabled by aria-disabled, not the native attribute, so
every hover gated on `:disabled` / `enabled:` alone still fired on it — the glass lift, the primary /
danger / warn dim, and eight `enabled:hover:` chains (saved views, the player's list buttons, the
undo toolbar). Measured on localdev: the Pager's Next, focused at the last page, now keeps its resting
border and shadow under the pointer. The CSS selectors and the chains also exclude
`[aria-disabled="true"]`, and a lint rule refuses a bare `enabled:hover:` from now on.
This commit is contained in:
2026-09-19 18:14:18 +02:00
parent 046ff735cf
commit 30fbdc52b2
6 changed files with 46 additions and 9 deletions
@@ -21,7 +21,12 @@ export default function PlaylistLimitsHint() {
offset: 8,
});
return (
<div className="mt-2 flex items-center gap-1.5 border-t border-border/60 px-1 pt-2 text-2xs text-muted">
// The panel is placed off the whole row, not the "Why?" button: off the button it opened
// over the right third of the rail and covered the lists (measured on localdev).
<div
ref={pop.refs.setPositionReference}
className="mt-2 flex items-center gap-1.5 border-t border-border/60 px-1 pt-2 text-2xs text-muted"
>
<Info className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
<span>{t("playlists.limits.hint")}</span>
<button