make management switch accessible

This commit is contained in:
Eduard Gert
2026-06-18 13:56:42 +02:00
parent cc842f17d5
commit 9cbaf62eda
2 changed files with 11 additions and 2 deletions
@@ -19,7 +19,8 @@ export const SwitchItem = ({ value, children, className }: Props) => {
value={value} value={value}
className={cn( className={cn(
"relative inline-flex items-center justify-center gap-1 rounded-md px-3.5 py-2 text-xs font-semibold", "relative inline-flex items-center justify-center gap-1 rounded-md px-3.5 py-2 text-xs font-semibold",
"outline-none cursor-default", "cursor-default outline-none",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
active active
? "text-nb-gray-100" ? "text-nb-gray-100"
: "text-nb-gray-400 hover:text-nb-gray-200 active:text-nb-gray-100", : "text-nb-gray-400 hover:text-nb-gray-200 active:text-nb-gray-100",
@@ -39,12 +39,21 @@ export function WelcomeStepManagement({
const trimmedUrl = url.trim(); const trimmedUrl = url.trim();
const syntaxValid = mode === ManagementMode.Cloud || isValidManagementUrl(trimmedUrl); const syntaxValid = mode === ManagementMode.Cloud || isValidManagementUrl(trimmedUrl);
const inputRef = useRef<HTMLInputElement | null>(null); const inputRef = useRef<HTMLInputElement | null>(null);
const initialMountRef = useRef(true);
const initialSelfHostedRef = useRef(!startsCloud);
useEffect(() => { useEffect(() => {
setSyntaxError(null); setSyntaxError(null);
setUnreachable(false); setUnreachable(false);
}, [url, mode]); }, [url, mode]);
useEffect(() => {
if (initialMountRef.current && initialSelfHostedRef.current) {
inputRef.current?.focus();
}
initialMountRef.current = false;
}, []);
const handleContinue = useCallback(async () => { const handleContinue = useCallback(async () => {
if (checking) return; if (checking) return;
if (mode === ManagementMode.SelfHosted && (!trimmedUrl || !syntaxValid)) { if (mode === ManagementMode.SelfHosted && (!trimmedUrl || !syntaxValid)) {
@@ -102,7 +111,6 @@ export function WelcomeStepManagement({
onChange={(e) => setUrl(e.target.value)} onChange={(e) => setUrl(e.target.value)}
error={inputError} error={inputError}
warning={inputWarning} warning={inputWarning}
autoFocus
spellCheck={false} spellCheck={false}
autoComplete={"off"} autoComplete={"off"}
autoCorrect={"off"} autoCorrect={"off"}