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:
@@ -240,7 +240,7 @@ export default function PersonalViewsModal() {
|
||||
disabled={!nameChanged}
|
||||
title={t("views.rename")}
|
||||
aria-label={t("views.rename")}
|
||||
className="inline-flex shrink-0 items-center rounded-lg border border-border p-2 text-muted transition enabled:hover:border-accent enabled:hover:text-accent disabled:opacity-30"
|
||||
className="inline-flex shrink-0 items-center rounded-lg border border-border p-2 text-muted transition enabled:not-aria-disabled:hover:border-accent enabled:not-aria-disabled:hover:text-accent disabled:opacity-30"
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</FocusSafeButton>
|
||||
@@ -302,7 +302,7 @@ export default function PersonalViewsModal() {
|
||||
title={
|
||||
saveCurrentDisabled ? t("views.saveCurrentUpToDate") : t("views.saveCurrentHint")
|
||||
}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm text-muted transition enabled:hover:border-accent enabled:hover:text-accent disabled:opacity-40"
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm text-muted transition enabled:not-aria-disabled:hover:border-accent enabled:not-aria-disabled:hover:text-accent disabled:opacity-40"
|
||||
>
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
{t("views.saveCurrent")}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -36,8 +36,8 @@ export function PlayerTransportControls({
|
||||
const { t } = useTranslation();
|
||||
const docked = variant === "docked";
|
||||
const navBtn = docked
|
||||
? "inline-flex items-center gap-1 text-white/80 enabled:hover:text-white disabled:opacity-30 transition"
|
||||
: "inline-flex items-center gap-1.5 text-muted enabled:hover:text-fg disabled:opacity-40 transition";
|
||||
? "inline-flex items-center gap-1 text-white/80 enabled:not-aria-disabled:hover:text-white disabled:opacity-30 transition"
|
||||
: "inline-flex items-center gap-1.5 text-muted enabled:not-aria-disabled:hover:text-fg disabled:opacity-40 transition";
|
||||
const navLabel = docked ? "hidden sm:inline" : "";
|
||||
const counter = docked ? "tabular-nums text-white/70" : "text-muted tabular-nums";
|
||||
const divider = docked ? "h-4 w-px bg-white/20" : "w-px h-4 bg-border";
|
||||
|
||||
@@ -45,7 +45,7 @@ export default function UndoToolbar({
|
||||
}, [canUndo, canRedo, onUndo, onRedo]);
|
||||
|
||||
const btn =
|
||||
"p-1.5 rounded-lg border border-border text-muted enabled:hover:text-fg enabled:hover:border-accent disabled:opacity-30 transition";
|
||||
"p-1.5 rounded-lg border border-border text-muted enabled:not-aria-disabled:hover:text-fg enabled:not-aria-disabled:hover:border-accent disabled:opacity-30 transition";
|
||||
return (
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<FocusSafeButton
|
||||
|
||||
Reference in New Issue
Block a user