peter
7a47223a58
A focused button that turns natively disabled loses the focus to <body> in Chrome. The app disables the very button that was pressed on ~60 sites — a mutation pending, a pager at its last page, undo with nothing left, a player at the end of its queue, a form gone clean — so a keyboard user was thrown out of the page on every such press. One primitive instead of a fix per site: ui/FocusSafeButton renders a focused-and-disabled (or busy) button as aria-disabled with a click guard, and applies the native attribute again once the focus is elsewhere. It asks the document at render time as well as listening for focus events, because a window without focus fires none (measured). ui/Button and ui/form's Switch are built on it; 57 hand-rolled buttons swapped their tag for it keeping their classes, and three hand-copies of the rule (the channel page's Block and Hide, ChannelDiscovery's Subscribe) now pass `busy`. The soft state's dim look is one rule in index.css. `local/focus-safe-disabled` refuses a new raw <button disabled>, pinned by focusSafe.contract.test.ts. lib/plexDetailUi moved to components/: it is components, and lib may not import the primitive. Measured on localdev in Chrome: the audit log's Next button keeps the focus on reaching the last page, reads aria-disabled, and the guarded click does nothing.
110 lines
3.6 KiB
TypeScript
110 lines
3.6 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import Tooltip from "./Tooltip";
|
|
import { FocusSafeButton } from "./FocusSafeButton";
|
|
|
|
// Shared form/settings primitives, factored out of the many panels that each re-declared
|
|
// them (Settings, Config, Stats, admin pages, Setup wizard). Visual contract unchanged.
|
|
|
|
/** The ONE text/select/number input recipe (full-width, surface bg, rounded-lg, 2px accent focus
|
|
* RING). R10 S3 unified every input onto this: the old settings-family border-focus style
|
|
* (`bg-card rounded-xl focus:border-accent`) and its three copy-pasted local `inputCls` constants
|
|
* (KeyGate/SettingsPanel/SetupWizard) are gone. Size variants (a small pager/table-filter/chat
|
|
* input) keep their own width/radius/padding but adopt the same bg-surface + ring-focus look
|
|
* inline — reach for this const for a default full-size field, match its look for a smaller one. */
|
|
export const inputCls =
|
|
"w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40";
|
|
|
|
/** The standard text button style (used verbatim by ShareDialog + VideoEditor). */
|
|
export const btnCls = "px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-50";
|
|
|
|
/** Pill on/off switch — the bare control; compose it with your own label/row. Pass `label` for
|
|
* the accessible name (the visible row text) since the control itself has no inner text. */
|
|
export function Switch({
|
|
checked,
|
|
onChange,
|
|
label,
|
|
disabled,
|
|
}: {
|
|
checked: boolean;
|
|
onChange: (v: boolean) => void;
|
|
label?: string;
|
|
disabled?: boolean;
|
|
}) {
|
|
// FocusSafeButton: a switch is disabled by its caller while the change it made is saving, and a
|
|
// natively disabled switch that holds the focus throws it to <body>.
|
|
return (
|
|
<FocusSafeButton
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
aria-label={label}
|
|
disabled={disabled}
|
|
onClick={() => onChange(!checked)}
|
|
className={`w-9 h-5 rounded-full transition relative shrink-0 disabled:opacity-50 disabled:cursor-not-allowed ${checked ? "bg-accent" : "bg-border"}`}
|
|
>
|
|
<span
|
|
className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all ${
|
|
checked ? "left-4.5" : "left-0.5"
|
|
}`}
|
|
/>
|
|
</FocusSafeButton>
|
|
);
|
|
}
|
|
|
|
/** A titled settings block. Default = a plain block with an uppercase caption; `card` wraps it
|
|
* in a glass card (the admin pages' style). */
|
|
export function Section({
|
|
title,
|
|
card,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
card?: boolean;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className={card ? "glass rounded-2xl p-4 mb-4" : "mb-6"}>
|
|
<div className={`text-xs uppercase tracking-wide text-muted ${card ? "mb-3" : "mb-2"}`}>
|
|
{title}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** A label that reveals an explanatory caption on hover (dotted underline) when `hint` is set.
|
|
* No-op styling when there's no hint, so it's safe to use unconditionally. */
|
|
function HintLabel({ hint, children }: { hint?: string; children: ReactNode }) {
|
|
return (
|
|
<Tooltip hint={hint ?? ""}>
|
|
<span
|
|
className={
|
|
hint
|
|
? "underline decoration-dotted decoration-muted/40 underline-offset-4 cursor-help"
|
|
: ""
|
|
}
|
|
>
|
|
{children}
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
/** A settings row: a (hint-able) label on the left, a control on the right. */
|
|
export function SettingRow({
|
|
label,
|
|
hint,
|
|
children,
|
|
}: {
|
|
label: string;
|
|
hint?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between gap-3 py-1.5 text-sm">
|
|
<HintLabel hint={hint}>{label}</HintLabel>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|