@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/auth/MfaChallenge/MfaChallenge.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { MfaChallenge } from './MfaChallenge';
+
+describe('MfaChallenge', () => {
+  it('renders the code step with a resend countdown', async () => {
+    const { container } = render(<MfaChallenge destination="a•••@example.com" onResend={() => {}} />);
+    expect(screen.getByText(/sent a 6-digit code to a•••@example.com/)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Resend code in 30s' })).toBeDisabled();
+    await expectNoAxeViolations(container);
+  });
+
+  it('auto-submits a complete code', async () => {
+    const onVerify = vi.fn();
+    render(<MfaChallenge onVerify={onVerify} />);
+    await userEvent.click(screen.getAllByRole('textbox')[0]!);
+    await userEvent.keyboard('123456');
+    expect(onVerify).toHaveBeenCalledWith('123456', 'code');
+  });
+
+  it('switches to a backup code and resends with a new countdown', async () => {
+    const onVerify = vi.fn();
+    const onResend = vi.fn();
+    const { container } = render(<MfaChallenge onVerify={onVerify} onResend={onResend} initialCooldown={0} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Resend code' }));
+    expect(onResend).toHaveBeenCalledOnce();
+    expect(screen.getByRole('button', { name: 'Resend code in 30s' })).toBeDisabled();
+    await userEvent.click(screen.getByRole('button', { name: 'Use a backup code' }));
+    await userEvent.type(screen.getByLabelText('Backup code'), 'abcd-efgh');
+    await userEvent.click(screen.getByRole('button', { name: 'Verify' }));
+    expect(onVerify).toHaveBeenCalledWith('abcd-efgh', 'backup');
+    await expectNoAxeViolations(container);
+  });
+});

package/src/auth/MfaChallenge/MfaChallenge.tsx

@@ -0,0 +1,170 @@
+import { Alert, Button, Field, FieldDescription, FieldError, FieldLabel, Input, OtpInput, cn } from '@gntik-ai/ui';
+import { useEffect, useState, type ReactNode } from 'react';
+import { AuthHeader, authFormClass, useAsyncSubmit } from '../shared';
+
+export type MfaMethod = 'code' | 'backup';
+
+export interface MfaChallengeProps {
+  /** Verifies the code. A returned promise shows the loading state; a rejection shows in the alert. */
+  onVerify?: (code: string, method: MfaMethod) => void | Promise<void>;
+  /** Sends a new code; the resend button then waits `resendCooldown` seconds. */
+  onResend?: () => void | Promise<void>;
+  /** Seconds between resends. */
+  resendCooldown?: number;
+  /** Seconds left before the first resend (a code was just sent). Defaults to `resendCooldown`. */
+  initialCooldown?: number;
+  /** Code length. */
+  length?: 6 | 8;
+  /** Where the code was sent, e.g. "a•••@example.com". Omit for authenticator apps. */
+  destination?: string;
+  error?: string | null;
+  loading?: boolean;
+  /** Called when the user gives up ("Back to sign in"). */
+  onCancel?: () => void;
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Second-factor step: a one-time code (auto-submits when complete), a switch to a backup code,
+ * and a resend button with a countdown.
+ */
+export function MfaChallenge({
+  onVerify,
+  onResend,
+  resendCooldown = 30,
+  initialCooldown,
+  length = 6,
+  destination,
+  error: errorProp,
+  loading: loadingProp,
+  onCancel,
+  eyebrow = 'Two-step verification',
+  title = 'Enter your verification code',
+  className,
+}: MfaChallengeProps) {
+  const [method, setMethod] = useState<MfaMethod>('code');
+  const [code, setCode] = useState('');
+  const [backup, setBackup] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  // One start time for both, so the first render shows the full cooldown (not cooldown + 1s).
+  const [start] = useState(() => Date.now());
+  const [now, setNow] = useState(start);
+  const [resendAt, setResendAt] = useState(() => start + (initialCooldown ?? resendCooldown) * 1000);
+  const [resent, setResent] = useState(false);
+  const { loading, error, run } = useAsyncSubmit('That code did not work. Try again.');
+  const busy = loadingProp ?? loading;
+  const alert = errorProp ?? error;
+  const remaining = Math.max(0, Math.ceil((resendAt - now) / 1000));
+  const value = method === 'code' ? code : backup.trim();
+  const invalid = submitted && (method === 'code' ? code.length < length : backup.trim() === '');
+
+  useEffect(() => {
+    if (remaining <= 0) return;
+    const id = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [remaining]);
+
+  const verify = (v: string) => {
+    setSubmitted(true);
+    if (method === 'code' ? v.length < length : v === '') return;
+    void run(() => onVerify?.(v, method));
+  };
+
+  const resend = async () => {
+    const t = Date.now();
+    setNow(t);
+    setResendAt(t + resendCooldown * 1000);
+    setResent(true);
+    await onResend?.();
+  };
+
+  const description =
+    method === 'backup'
+      ? 'Enter one of the backup codes you saved when you turned on two-step verification. Each code works once.'
+      : destination
+        ? `We sent a ${length}-digit code to ${destination}.`
+        : `Open your authenticator app and enter the ${length}-digit code.`;
+
+  return (
+    <div className={cn(authFormClass, className)}>
+      <AuthHeader
+        eyebrow={eyebrow}
+        title={method === 'backup' ? 'Use a backup code' : title}
+        description={description}
+      />
+      <form
+        noValidate
+        aria-label="Verify your identity"
+        className="flex flex-col gap-5"
+        onSubmit={(e) => {
+          e.preventDefault();
+          verify(value);
+        }}
+      >
+        {alert && <Alert tone="destructive" description={alert} />}
+        {method === 'code' ? (
+          <Field invalid={invalid}>
+            <FieldLabel>Verification code</FieldLabel>
+            <OtpInput
+              length={length}
+              value={code}
+              onValueChange={setCode}
+              onComplete={verify}
+              invalid={invalid}
+              groupSize={length / 2}
+              disabled={busy}
+            />
+            <FieldError match={invalid}>Enter all {length} digits.</FieldError>
+          </Field>
+        ) : (
+          <Field invalid={invalid}>
+            <FieldLabel>Backup code</FieldLabel>
+            <Input
+              value={backup}
+              onValueChange={setBackup}
+              placeholder="xxxx-xxxx"
+              autoComplete="one-time-code"
+              spellCheck={false}
+              inputClassName="font-mono tracking-wider"
+            />
+            <FieldDescription>Backup codes are 8 characters, with or without the dash.</FieldDescription>
+            <FieldError match={invalid}>Enter a backup code.</FieldError>
+          </Field>
+        )}
+        <Button type="submit" size="lg" loading={busy} className="w-full">
+          Verify
+        </Button>
+      </form>
+      <div className="mt-6 flex flex-wrap items-center justify-between gap-3 text-[13px]">
+        <Button
+          variant="ghost"
+          size="sm"
+          aria-pressed={method === 'backup'}
+          onClick={() => {
+            setMethod(method === 'code' ? 'backup' : 'code');
+            setSubmitted(false);
+          }}
+        >
+          {method === 'code' ? 'Use a backup code' : 'Use a verification code'}
+        </Button>
+        {method === 'code' && onResend !== undefined && (
+          <Button variant="ghost" size="sm" disabled={remaining > 0} onClick={() => void resend()}>
+            {remaining > 0 ? `Resend code in ${remaining}s` : 'Resend code'}
+          </Button>
+        )}
+      </div>
+      <span role="status" className="sr-only">
+        {resent ? 'A new code was sent.' : ''}
+      </span>
+      {onCancel && (
+        <p className="mt-6 text-center">
+          <Button variant="ghost" size="sm" onClick={onCancel}>
+            Back to sign in
+          </Button>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/auth/MfaChallenge/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'MFA challenge',
+  family: 'auth',
+  status: 'stable',
+  description: 'Second-factor step with a one-time code (auto-submit), a backup-code mode and resend with a countdown.',
+  uses: ['OtpInput', 'Field', 'Input', 'Button', 'Alert'],
+};

package/src/auth/ResetPasswordForm/ResetPasswordForm.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ResetPasswordForm } from './ResetPasswordForm';
+
+describe('ResetPasswordForm', () => {
+  it('renders the form', async () => {
+    const { container } = render(<ResetPasswordForm />);
+    expect(screen.getByRole('form', { name: 'Set a new password' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('flags a mismatch, then saves and shows the success state', async () => {
+    const onSubmit = vi.fn();
+    const { container } = render(<ResetPasswordForm onSubmit={onSubmit} />);
+    await userEvent.type(screen.getByLabelText('New password'), 'correct-horse-42');
+    await userEvent.type(screen.getByLabelText('Confirm password'), 'correct-horse');
+    await userEvent.click(screen.getByRole('button', { name: 'Update password' }));
+    expect(screen.getByText("Passwords don't match.")).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+    await expectNoAxeViolations(container);
+    await userEvent.type(screen.getByLabelText('Confirm password'), '-42');
+    await userEvent.click(screen.getByRole('button', { name: 'Update password' }));
+    expect(onSubmit).toHaveBeenCalledWith('correct-horse-42');
+    expect(await screen.findByRole('heading', { name: 'Password updated' })).toBeInTheDocument();
+  });
+});

package/src/auth/ResetPasswordForm/ResetPasswordForm.tsx

@@ -0,0 +1,100 @@
+import { Alert, Button, Field, FieldError, FieldLabel, PasswordInput, cn } from '@gntik-ai/ui';
+import { CircleCheck } from '@gntik-ai/icons';
+import { useState, type ReactNode } from 'react';
+import { AuthHeader, authFormClass, useAsyncSubmit } from '../shared';
+
+export interface ResetPasswordFormProps {
+  /** Saves the new password. A returned promise shows the loading state; a rejection shows in the alert. */
+  onSubmit?: (password: string) => void | Promise<void>;
+  error?: string | null;
+  minPasswordLength?: number;
+  /** Called from the success state ("Continue to sign in"). */
+  onContinue?: () => void;
+  eyebrow?: ReactNode;
+  className?: string;
+}
+
+/** New password + confirmation with length and mismatch validation, then a success state. */
+export function ResetPasswordForm({
+  onSubmit,
+  error: errorProp,
+  minPasswordLength = 8,
+  onContinue,
+  eyebrow = 'Account recovery',
+  className,
+}: ResetPasswordFormProps) {
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [confirmTouched, setConfirmTouched] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [done, setDone] = useState(false);
+  const { loading, error, run } = useAsyncSubmit('Your password could not be updated.');
+  const alert = errorProp ?? error;
+  const tooShort = password.length < minPasswordLength;
+  const mismatch = confirm !== password;
+  const passwordInvalid = submitted && tooShort;
+  const confirmInvalid = (submitted || (confirmTouched && confirm !== '')) && mismatch;
+
+  if (done) {
+    return (
+      <div className={cn(authFormClass, className)}>
+        <span className="mb-5 grid size-11 place-items-center rounded-xl bg-success/14 text-success-chip-text">
+          <CircleCheck size={20} aria-hidden />
+        </span>
+        <AuthHeader
+          eyebrow={eyebrow}
+          title="Password updated"
+          description="You can now sign in with your new password. Other sessions were signed out."
+        />
+        <div role="status" className="sr-only">
+          Password updated.
+        </div>
+        <Button size="lg" className="w-full" onClick={onContinue}>
+          Continue to sign in
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(authFormClass, className)}>
+      <AuthHeader
+        eyebrow={eyebrow}
+        title="Set a new password"
+        description={`Use at least ${minPasswordLength} characters. Avoid passwords you use elsewhere.`}
+      />
+      <form
+        noValidate
+        aria-label="Set a new password"
+        className="flex flex-col gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          setSubmitted(true);
+          if (tooShort || mismatch) return;
+          void run(() => onSubmit?.(password)).then((ok) => ok && setDone(true));
+        }}
+      >
+        {alert && <Alert tone="destructive" description={alert} />}
+        <Field invalid={passwordInvalid}>
+          <FieldLabel>New password</FieldLabel>
+          <PasswordInput showStrength value={password} onValueChange={setPassword} required />
+          <FieldError match={passwordInvalid}>Use at least {minPasswordLength} characters.</FieldError>
+        </Field>
+        <Field invalid={confirmInvalid}>
+          <FieldLabel>Confirm password</FieldLabel>
+          <PasswordInput
+            autoComplete="new-password"
+            value={confirm}
+            onValueChange={setConfirm}
+            onBlur={() => setConfirmTouched(true)}
+            required
+          />
+          <FieldError match={confirmInvalid}>Passwords don't match.</FieldError>
+        </Field>
+        <Button type="submit" size="lg" loading={loading} className="mt-2 w-full">
+          Update password
+        </Button>
+      </form>
+    </div>
+  );
+}

package/src/auth/ResetPasswordForm/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Reset password form',
+  family: 'auth',
+  status: 'stable',
+  description:
+    'New password with a strength meter and a confirmation field with mismatch validation, then a success state.',
+  uses: ['Field', 'PasswordInput', 'Button', 'Alert'],
+};

package/src/auth/SignInForm/SignInForm.test.tsx

@@ -0,0 +1,222 @@
+import { ThemeProvider } from '@gntik-ai/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { SignInForm, type SignInFormRef } from './SignInForm';
+
+describe('SignInForm', () => {
+  it('can hide or replace the sign-up prompt alongside the SSO slot', () => {
+    const { rerender } = render(<SignInForm sso={null} signUpPrompt={null} />);
+    expect(screen.queryByText(/New here/)).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Create an account' })).not.toBeInTheDocument();
+    expect(screen.queryByText('Or continue with')).not.toBeInTheDocument();
+    rerender(<SignInForm signUpPrompt="Ask your administrator for access." />);
+    expect(screen.getByText('Ask your administrator for access.')).toBeInTheDocument();
+    expect(screen.queryByText(/New here/)).not.toBeInTheDocument();
+  });
+
+  it('suppresses or changes the heading level while retaining an accessible form name', () => {
+    const { container, rerender } = render(<SignInForm headingLevel={null} />);
+    expect(container.querySelector('h1,h2,h3,h4,h5,h6,[role="heading"]')).toBeNull();
+    expect(screen.getByRole('form', { name: 'Sign in' })).toBeInTheDocument();
+    rerender(<SignInForm headingLevel="h2" />);
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('Sign in to your workspace');
+    rerender(<SignInForm headingLevel={null} aria-label="Account access" />);
+    expect(screen.getByRole('form', { name: 'Account access' })).toBeInTheDocument();
+    rerender(
+      <>
+        <h1 id="page-title">Account access</h1>
+        <SignInForm headingLevel={null} aria-labelledby="page-title" />
+      </>,
+    );
+    expect(screen.getByRole('form', { name: 'Account access' })).toHaveAttribute('aria-labelledby', 'page-title');
+  });
+
+  it('associates server feedback with both invalid fields and exposes password focus', () => {
+    const ref = createRef<SignInFormRef>();
+    const { rerender } = render(
+      <SignInForm
+        ref={ref}
+        identifier={{ help: 'Account email', helpId: 'email-help' }}
+        passwordHelp="Account password"
+        passwordHelpId="password-help"
+        fieldInvalid={{ identifier: true, password: true }}
+        feedbackId="credential-feedback"
+        aria-describedby="form-feedback"
+        error="Credentials were not accepted."
+      />,
+    );
+    expect(screen.getByRole('form', { name: 'Sign in' })).toHaveAttribute('aria-describedby', 'form-feedback');
+    for (const label of ['Email', 'Password']) {
+      const input = screen.getByLabelText(label);
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+      expect(input.getAttribute('aria-describedby')?.split(' ')).toEqual(
+        expect.arrayContaining([label === 'Email' ? 'email-help' : 'password-help', 'credential-feedback']),
+      );
+    }
+    expect(screen.getByRole('alert')).toHaveAttribute('id', 'credential-feedback');
+    ref.current?.focus('password');
+    expect(screen.getByLabelText('Password')).toHaveFocus();
+    ref.current?.focus('identifier');
+    expect(screen.getByLabelText('Email')).toHaveFocus();
+    rerender(<SignInForm ref={ref} />);
+    expect(screen.getByLabelText('Email')).not.toHaveAttribute('aria-invalid');
+    expect(screen.getByLabelText('Password')).not.toHaveAttribute('aria-invalid');
+    expect(screen.getByLabelText('Password')).not.toHaveAttribute('aria-describedby');
+  });
+
+  it('validates with consumer messages, focuses the first invalid field and clears error associations', async () => {
+    const onSubmit = vi.fn();
+    render(
+      <SignInForm
+        identifier={{ type: 'text', label: 'Username', help: 'Account name', helpId: 'username-help', minLength: 3 }}
+        passwordHelp="Account password"
+        passwordHelpId="password-help"
+        messages={{
+          identifierRequired: 'Username is required.',
+          identifierInvalid: 'Use at least three characters.',
+          passwordRequired: 'Password is required.',
+        }}
+        onSubmit={onSubmit}
+        sso={null}
+      />,
+    );
+    const input = screen.getByLabelText('Username');
+    const password = screen.getByLabelText('Password');
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(password).not.toHaveAttribute('aria-invalid');
+    expect(screen.getByRole('form', { name: 'Sign in' })).toHaveAttribute('novalidate');
+    await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+    expect(input).toHaveFocus();
+    expect(onSubmit).not.toHaveBeenCalled();
+    for (const [field, message, helpId] of [
+      [input, 'Username is required.', 'username-help'],
+      [password, 'Password is required.', 'password-help'],
+    ] as const) {
+      const error = screen.getByText(message).closest('[role="alert"]');
+      expect(error).toBeInTheDocument();
+      expect(field).toHaveAttribute('aria-invalid', 'true');
+      expect(field.getAttribute('aria-describedby')?.split(' ')).toEqual(expect.arrayContaining([helpId, error?.id]));
+    }
+    await userEvent.type(input, 'ab');
+    expect(screen.getByText('Use at least three characters.')).toBeInTheDocument();
+    await userEvent.type(input, 'c');
+    expect(input).not.toHaveAttribute('aria-invalid');
+    expect(input).toHaveAccessibleDescription('Account name');
+    await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+    expect(password).toHaveFocus();
+    await userEvent.type(password, 'secret');
+    expect(password).not.toHaveAttribute('aria-invalid');
+    expect(password).toHaveAccessibleDescription('Account password');
+  });
+
+  it('accepts a username configuration and submits the trimmed identifier without changing email payloads', async () => {
+    const onSubmit = vi.fn();
+    render(
+      <SignInForm
+        identifier={{
+          type: 'text',
+          autoComplete: 'username',
+          label: 'Username',
+          help: 'Use your account name.',
+          minLength: 3,
+          maxLength: 120,
+        }}
+        onSubmit={onSubmit}
+        sso={null}
+      />,
+    );
+    const input = screen.getByRole('textbox', { name: 'Username' });
+    expect(input).toHaveAttribute('type', 'text');
+    expect(input).toHaveAttribute('autocomplete', 'username');
+    expect(input).toHaveAttribute('minlength', '3');
+    expect(input).toHaveAttribute('maxlength', '120');
+    expect(input).toHaveAccessibleDescription('Use your account name.');
+    await userEvent.type(input, '  avery  ');
+    await userEvent.type(screen.getByLabelText('Password'), 'hunter22');
+    await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+    expect(onSubmit).toHaveBeenCalledWith({
+      email: 'avery',
+      identifier: 'avery',
+      password: 'hunter22',
+      remember: true,
+    });
+  });
+
+  it('renders with SSO by default', async () => {
+    const { container } = render(<SignInForm />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Sign in to your workspace' })).toBeInTheDocument();
+    expect(screen.getByRole('group', { name: 'Single sign-on' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('validates, submits and shows a rejection as an alert', async () => {
+    const onSubmit = vi.fn().mockRejectedValue(new Error('Incorrect email or password.'));
+    render(<SignInForm onSubmit={onSubmit} sso={null} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+    expect(screen.getByText('Enter a valid email address.')).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+    await userEvent.type(screen.getByLabelText('Email'), 'avery@example.com');
+    await userEvent.type(screen.getByLabelText('Password'), 'hunter22');
+    await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+    expect(onSubmit).toHaveBeenCalledWith({ email: 'avery@example.com', password: 'hunter22', remember: true });
+    expect(await screen.findByRole('alert')).toHaveTextContent('Incorrect email or password.');
+  });
+});
+
+// Public rendering seams: identifier mode, theme, heading policy and validation/recovery state.
+describe('SignInForm accessibility matrix', () => {
+  for (const theme of ['dark', 'light', 'high_contrast'] as const) {
+    for (const mode of ['email', 'username'] as const) {
+      for (const suppressed of [false, true]) {
+        for (const state of ['initial', 'errors'] as const) {
+          it(`${theme} / ${mode} / headings ${!suppressed} / ${state}`, async () => {
+            const onSubmit = vi.fn();
+            const { container } = render(
+              <ThemeProvider defaultMode={theme} storageKey={null}>
+                <h1>Account access</h1>
+                <SignInForm
+                  identifier={
+                    mode === 'username'
+                      ? {
+                          type: 'text',
+                          autoComplete: 'username',
+                          label: 'Username',
+                          help: 'Use your account name.',
+                          minLength: 3,
+                          maxLength: 120,
+                        }
+                      : undefined
+                  }
+                  headingLevel={suppressed ? null : undefined}
+                  messages={{
+                    identifierRequired: 'Account name is required.',
+                    passwordRequired: 'Password is required.',
+                  }}
+                  onSubmit={onSubmit}
+                />
+              </ThemeProvider>,
+            );
+            if (state === 'initial' || state === 'errors') {
+              const input = screen.getByRole('textbox', { name: mode === 'username' ? 'Username' : 'Email' });
+              expect(input).toHaveAttribute('type', mode === 'username' ? 'text' : 'email');
+              expect(input).toHaveAttribute('autocomplete', mode === 'username' ? 'username' : 'email');
+              expect(screen.getByRole('form', { name: 'Sign in' })).toHaveAttribute('novalidate');
+              if (state === 'errors') {
+                await userEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+                expect(input).toHaveFocus();
+                expect(input).toHaveAttribute('aria-invalid', 'true');
+                expect(onSubmit).not.toHaveBeenCalled();
+                expect(screen.getByText('Account name is required.')).toBeInTheDocument();
+                expect(screen.getByLabelText('Password')).toHaveAttribute('aria-invalid', 'true');
+              }
+            }
+            if (suppressed) expect(container.querySelectorAll('h1,h2,h3,h4,h5,h6,[role="heading"]')).toHaveLength(1);
+            await expectNoAxeViolations(container);
+          });
+        }
+      }
+    }
+  }
+});