@fragments-sdk/ui 0.7.3 → 0.7.5

package/src/components/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { EmptyState } from './index';
+
+describe('EmptyState', () => {
+  it('renders children', () => {
+    render(
+      <EmptyState>
+        <EmptyState.Title>No results</EmptyState.Title>
+      </EmptyState>
+    );
+    expect(screen.getByText('No results')).toBeInTheDocument();
+  });
+
+  it('renders all compound sub-components', () => {
+    render(
+      <EmptyState>
+        <EmptyState.Icon>ICON</EmptyState.Icon>
+        <EmptyState.Title>Empty</EmptyState.Title>
+        <EmptyState.Description>Nothing to show</EmptyState.Description>
+        <EmptyState.Actions><button>Add item</button></EmptyState.Actions>
+      </EmptyState>
+    );
+    expect(screen.getByText('ICON')).toHaveClass('icon');
+    expect(screen.getByText('Empty').tagName).toBe('H3');
+    expect(screen.getByText('Nothing to show').tagName).toBe('P');
+    expect(screen.getByRole('button', { name: 'Add item' })).toBeInTheDocument();
+  });
+
+  it('applies size class', () => {
+    const { container } = render(
+      <EmptyState size="lg">
+        <EmptyState.Title>Large</EmptyState.Title>
+      </EmptyState>
+    );
+    expect(container.firstElementChild).toHaveClass('lg');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <EmptyState className="custom">
+        <EmptyState.Title>Custom</EmptyState.Title>
+      </EmptyState>
+    );
+    expect(container.firstElementChild).toHaveClass('custom');
+  });
+
+  it('defaults to md size', () => {
+    const { container } = render(
+      <EmptyState>
+        <EmptyState.Title>Default</EmptyState.Title>
+      </EmptyState>
+    );
+    expect(container.firstElementChild).toHaveClass('md');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <EmptyState>
+        <EmptyState.Icon>ICON</EmptyState.Icon>
+        <EmptyState.Title>No items found</EmptyState.Title>
+        <EmptyState.Description>Try adjusting your search</EmptyState.Description>
+      </EmptyState>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Field/Field.test.tsx

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Field } from './index';
+
+describe('Field', () => {
+  it('renders children inside the field root', () => {
+    render(
+      <Field>
+        <Field.Label>Username</Field.Label>
+        <Field.Control><input /></Field.Control>
+      </Field>
+    );
+    expect(screen.getByText('Username')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('associates label with control', () => {
+    render(
+      <Field>
+        <Field.Label>Username</Field.Label>
+        <Field.Control><input /></Field.Control>
+      </Field>
+    );
+    expect(screen.getByRole('textbox')).toHaveAccessibleName('Username');
+  });
+
+  it('renders description text', () => {
+    render(
+      <Field>
+        <Field.Label>Email</Field.Label>
+        <Field.Control><input /></Field.Control>
+        <Field.Description>We will never share your email.</Field.Description>
+      </Field>
+    );
+    expect(screen.getByText('We will never share your email.')).toBeInTheDocument();
+  });
+
+  it('sets aria-invalid on control when invalid', () => {
+    render(
+      <Field invalid>
+        <Field.Label>Email</Field.Label>
+        <Field.Control><input /></Field.Control>
+      </Field>
+    );
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('exposes compound component pattern', () => {
+    expect(Field.Label).toBeDefined();
+    expect(Field.Control).toBeDefined();
+    expect(Field.Description).toBeDefined();
+    expect(Field.Error).toBeDefined();
+    expect(Field.Validity).toBeDefined();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Field>
+        <Field.Label>Accessible field</Field.Label>
+        <Field.Control><input /></Field.Control>
+      </Field>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Fieldset/Fieldset.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Fieldset } from './index';
+
+describe('Fieldset', () => {
+  it('renders a fieldset element', () => {
+    render(
+      <Fieldset>
+        <Fieldset.Legend>Personal Info</Fieldset.Legend>
+        <input aria-label="Name" />
+      </Fieldset>
+    );
+    // Base UI renders a fieldset element
+    const fieldset = screen.getByRole('group');
+    expect(fieldset).toBeInTheDocument();
+  });
+
+  it('renders a legend', () => {
+    render(
+      <Fieldset>
+        <Fieldset.Legend>Contact Details</Fieldset.Legend>
+      </Fieldset>
+    );
+    expect(screen.getByText('Contact Details')).toBeInTheDocument();
+  });
+
+  it('passes disabled prop to fieldset element', () => {
+    const { container } = render(
+      <Fieldset disabled>
+        <Fieldset.Legend>Settings</Fieldset.Legend>
+        <input aria-label="Option" />
+      </Fieldset>
+    );
+    const fieldset = container.querySelector('fieldset');
+    expect(fieldset).toBeInTheDocument();
+    expect(fieldset).toHaveAttribute('data-disabled', '');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Fieldset>
+        <Fieldset.Legend>Accessible fieldset</Fieldset.Legend>
+        <input aria-label="Field" />
+      </Fieldset>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Form/Form.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Form } from './index';
+
+describe('Form', () => {
+  it('renders a form element', () => {
+    const { container } = render(<Form>content</Form>);
+    expect(container.querySelector('form')).toBeInTheDocument();
+  });
+
+  it('calls onFormSubmit when submitted', async () => {
+    const handleSubmit = vi.fn((e: React.FormEvent) => e.preventDefault());
+    const user = userEvent.setup();
+    render(
+      <Form onFormSubmit={handleSubmit} aria-label="Test form">
+        <button type="submit">Submit</button>
+      </Form>
+    );
+    await user.click(screen.getByRole('button', { name: 'Submit' }));
+    expect(handleSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders children', () => {
+    render(
+      <Form aria-label="Test form">
+        <span>Child content</span>
+      </Form>
+    );
+    expect(screen.getByText('Child content')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Form aria-label="Accessible form">
+        <label htmlFor="f">Name</label>
+        <input id="f" />
+      </Form>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Grid/Grid.module.scss

@@ -82,9 +82,9 @@
 // ============================================
 
 .paddingNone { padding: 0; }
-.paddingSm   { padding: var(--fui-space-3, $fui-space-3); }
-.paddingMd   { padding: var(--fui-space-4, $fui-space-4); }
-.paddingLg   { padding: var(--fui-space-6, $fui-space-6); }
+.paddingSm   { padding: var(--fui-padding-container-sm); }
+.paddingMd   { padding: var(--fui-padding-container-md); }
+.paddingLg   { padding: var(--fui-padding-container-lg); }
 
 // ============================================
 // Align items (cross-axis within cells)

package/src/components/Grid/Grid.test.tsx

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Grid } from './index';
+
+describe('Grid', () => {
+  it('renders children', () => {
+    render(
+      <Grid>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('applies fixed column class', () => {
+    const { container } = render(<Grid columns={3}>Content</Grid>);
+    expect(container.firstChild).toHaveClass('columns3');
+  });
+
+  it('applies responsive column CSS variables', () => {
+    const { container } = render(
+      <Grid columns={{ base: 1, md: 2, lg: 3 }}>Content</Grid>
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveClass('columnsResponsive');
+    expect(el.style.getPropertyValue('--fui-grid-cols')).toBe('1');
+    expect(el.style.getPropertyValue('--fui-grid-cols-md')).toBe('2');
+    expect(el.style.getPropertyValue('--fui-grid-cols-lg')).toBe('3');
+  });
+
+  it('applies gap classes', () => {
+    const { container } = render(<Grid gap="lg">Content</Grid>);
+    expect(container.firstChild).toHaveClass('gapLg');
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<Grid ref={ref}>Content</Grid>);
+    expect(ref).toHaveBeenCalled();
+  });
+
+  it('renders Grid.Item with colSpan', () => {
+    const { container } = render(
+      <Grid columns={3}>
+        <Grid.Item colSpan={2}>Wide</Grid.Item>
+        <Grid.Item>Normal</Grid.Item>
+      </Grid>
+    );
+    const wideItem = screen.getByText('Wide').parentElement ?? screen.getByText('Wide');
+    // The item that contains "Wide" should have colSpan class
+    expect(container.querySelector('.colSpan2')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Grid columns={2}>
+        <Grid.Item>A</Grid.Item>
+        <Grid.Item>B</Grid.Item>
+      </Grid>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Header/Header.module.scss

@@ -11,7 +11,7 @@
   height: var(--header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
   min-height: var(--header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
   background-color: var(--fui-bg-primary, $fui-bg-primary);
-  padding: 0 var(--fui-space-4, $fui-space-4);
+  padding: 0 var(--fui-padding-container-md, $fui-padding-container-md);
   z-index: var(--fui-header-z-index, $fui-header-z-index);
 }
 
@@ -88,7 +88,7 @@
 
   display: flex;
   align-items: center;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -185,7 +185,7 @@
   top: var(--fui-space-2, $fui-space-2);
   left: var(--fui-space-2, $fui-space-2);
   z-index: 100;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
+  padding: var(--fui-padding-item-sm, $fui-padding-item-sm) var(--fui-padding-item-lg, $fui-padding-item-lg);
   background-color: var(--fui-bg-primary, $fui-bg-primary);
   color: var(--fui-text-primary, $fui-text-primary);
   border: 2px solid var(--fui-color-accent, $fui-color-accent);
@@ -200,7 +200,7 @@
     clip: auto;
     white-space: normal;
     margin: 0;
-    padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
+    padding: var(--fui-padding-item-sm, $fui-padding-item-sm) var(--fui-padding-item-lg, $fui-padding-item-lg);
     overflow: visible;
 
     @include focus-ring;

package/src/components/Header/Header.test.tsx

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Header } from './index';
+
+describe('Header', () => {
+  it('renders as a banner landmark (header element)', () => {
+    render(
+      <Header>
+        <Header.Brand>Logo</Header.Brand>
+      </Header>
+    );
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+  });
+
+  it('renders Brand slot content', () => {
+    render(
+      <Header>
+        <Header.Brand>My App</Header.Brand>
+      </Header>
+    );
+    expect(screen.getByText('My App')).toBeInTheDocument();
+  });
+
+  it('renders Brand as a link when href is provided', () => {
+    render(
+      <Header>
+        <Header.Brand href="/">Home</Header.Brand>
+      </Header>
+    );
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).toHaveAttribute('href', '/');
+  });
+
+  it('renders navigation with accessible label', () => {
+    render(
+      <Header>
+        <Header.Nav aria-label="Primary navigation">
+          <Header.NavItem href="/about">About</Header.NavItem>
+          <Header.NavItem href="/contact">Contact</Header.NavItem>
+        </Header.Nav>
+      </Header>
+    );
+    expect(screen.getByRole('navigation', { name: 'Primary navigation' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'About' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Contact' })).toBeInTheDocument();
+  });
+
+  it('marks active NavItem with aria-current="page"', () => {
+    render(
+      <Header>
+        <Header.Nav>
+          <Header.NavItem href="/about" active>About</Header.NavItem>
+          <Header.NavItem href="/contact">Contact</Header.NavItem>
+        </Header.Nav>
+      </Header>
+    );
+    expect(screen.getByRole('link', { name: 'About' })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('link', { name: 'Contact' })).not.toHaveAttribute('aria-current');
+  });
+
+  it('renders Actions slot', () => {
+    render(
+      <Header>
+        <Header.Actions>
+          <button>Sign In</button>
+        </Header.Actions>
+      </Header>
+    );
+    expect(screen.getByRole('button', { name: 'Sign In' })).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Header>
+        <Header.Brand>Logo</Header.Brand>
+        <Header.Nav aria-label="Main">
+          <Header.NavItem href="/home">Home</Header.NavItem>
+        </Header.Nav>
+      </Header>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { render, expectNoA11yViolations } from '../../test/utils';
+import { Icon } from './index';
+
+// Mock Phosphor icon component
+function MockIcon(props: { size?: number; weight?: string }) {
+  return <svg data-testid="mock-icon" data-size={props.size} data-weight={props.weight} />;
+}
+
+describe('Icon', () => {
+  it('renders the icon component inside a span', () => {
+    const { container } = render(<Icon icon={MockIcon} />);
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.tagName).toBe('SPAN');
+    expect(wrapper.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('passes the correct pixel size to the icon', () => {
+    const { container } = render(<Icon icon={MockIcon} size="lg" />);
+    const svg = container.querySelector('[data-testid="mock-icon"]');
+    expect(svg).toHaveAttribute('data-size', '24');
+  });
+
+  it('applies variant color class', () => {
+    const { container } = render(<Icon icon={MockIcon} variant="error" />);
+    expect(container.firstChild).toHaveClass('error');
+  });
+
+  it('does not add aria-hidden by default (wrapping span is presentational)', () => {
+    const { container } = render(<Icon icon={MockIcon} aria-hidden="true" />);
+    expect(container.firstChild).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Icon icon={MockIcon} aria-hidden="true" />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Image/Image.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, act, expectNoA11yViolations } from '../../test/utils';
+import { Image } from './index';
+
+describe('Image', () => {
+  it('renders an img element with src and alt', () => {
+    render(<Image src="/photo.jpg" alt="A photo" />);
+    const img = screen.getByRole('img', { name: 'A photo' });
+    expect(img).toHaveAttribute('src', '/photo.jpg');
+  });
+
+  it('shows fallback while loading', () => {
+    render(<Image src="/photo.jpg" alt="Photo" fallback={<span>Loading...</span>} />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    // Image should be present but hidden (opacity 0)
+    const img = screen.getByRole('img');
+    expect(img.style.opacity).toBe('0');
+  });
+
+  it('shows fallback on error', () => {
+    render(<Image src="/broken.jpg" alt="Broken" fallback={<span>Error</span>} />);
+    const img = screen.getByRole('img');
+    // Simulate error
+    act(() => {
+      img.dispatchEvent(new Event('error', { bubbles: false }));
+    });
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  it('applies aspect ratio class', () => {
+    const { container } = render(<Image src="/photo.jpg" alt="Photo" aspectRatio="16:9" />);
+    expect(container.firstChild).toHaveClass('aspect-16-9');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Image src="/photo.jpg" alt="Accessible photo" />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Input/Input.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Input } from './index';
+
+describe('Input', () => {
+  it('renders a textbox', () => {
+    render(<Input aria-label="Name" />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('renders label via Field.Label when label prop is provided', () => {
+    render(<Input label="Email" />);
+    const input = screen.getByRole('textbox');
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    // Field.Label associates via htmlFor — input should be labelled
+    expect(input).toHaveAccessibleName('Email');
+  });
+
+  it('associates helperText via aria-describedby', () => {
+    render(<Input label="Password" helperText="Must be 8+ characters" />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAccessibleDescription('Must be 8+ characters');
+  });
+
+  it('sets aria-invalid when error is true', () => {
+    render(<Input label="Email" error />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('disables the input when disabled prop is true', () => {
+    render(<Input label="Name" disabled />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+
+  it('renders a controlled value', () => {
+    render(<Input label="Name" value="hello" onChange={() => {}} />);
+    expect(screen.getByRole('textbox')).toHaveValue('hello');
+  });
+
+  it('renders shortcut as a kbd element', () => {
+    const { container } = render(<Input aria-label="Search" shortcut="⌘K" />);
+    const kbd = container.querySelector('kbd');
+    expect(kbd).toBeInTheDocument();
+    expect(kbd).toHaveTextContent('⌘K');
+  });
+
+  it('applies size class', () => {
+    render(<Input aria-label="Name" size="sm" />);
+    const input = screen.getByRole('textbox');
+    expect(input.className).toContain('sm');
+  });
+
+  it('forwards ref to the input element', () => {
+    const ref = vi.fn<(el: HTMLInputElement | null) => void>();
+    render(<Input aria-label="Name" ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLInputElement));
+  });
+
+  it('calls onChange with the string value', async () => {
+    const handleChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Input label="Name" onChange={handleChange} />);
+    await user.type(screen.getByRole('textbox'), 'a');
+    expect(handleChange).toHaveBeenCalledWith('a');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Input label="Accessible input" />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Input/index.tsx

@@ -28,6 +28,11 @@ export interface InputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
   name?: string;
 }
 
+function mergeAriaIds(...ids: Array<string | undefined>): string | undefined {
+  const merged = ids.filter(Boolean).join(' ').trim();
+  return merged.length > 0 ? merged : undefined;
+}
+
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   function Input(
     {
@@ -51,10 +56,16 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       inputClassName,
       name,
       id,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
       ...htmlProps
     },
     ref
   ) {
+    const generatedId = React.useId();
+    const helperId = helperText ? `input-helper-${generatedId}` : undefined;
+
     const inputClasses = [
       styles.input,
       styles[size],
@@ -87,6 +98,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         onBlur={onBlur}
         onFocus={onFocus}
         onKeyDown={onKeyDown}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={mergeAriaIds(ariaDescribedBy, helperId)}
         className={inputClasses}
         style={inputStyle}
         render={<input />}
@@ -105,7 +119,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           inputElement
         )}
         {helperText && (
-          <Field.Description className={helperClasses}>
+          <Field.Description id={helperId} className={helperClasses}>
             {helperText}
           </Field.Description>
         )}

package/src/components/Link/Link.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Link } from './index';
+
+describe('Link', () => {
+  it('renders an anchor element', () => {
+    render(<Link href="/page">Go</Link>);
+    const link = screen.getByRole('link', { name: 'Go' });
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', '/page');
+  });
+
+  it('applies variant and underline classes', () => {
+    render(<Link href="#" variant="subtle" underline="always">Styled</Link>);
+    const link = screen.getByRole('link');
+    expect(link).toHaveClass('subtle');
+    expect(link).toHaveClass('underline-always');
+  });
+
+  it('adds external link attributes', () => {
+    render(<Link href="https://example.com" external>External</Link>);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<Link ref={ref} href="#">Ref</Link>);
+    expect(ref).toHaveBeenCalled();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Link href="/page">Accessible link</Link>);
+    await expectNoA11yViolations(container);
+  });
+});