@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/Typeahead/TypeaheadItem.test.tsx

@@ -1,134 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TypeaheadItem.test.tsx
- * @input Uses vitest, @testing-library/react, TypeaheadItem, the shared
- *   declaredValue StyleX read-back helper
- * @output Unit tests for TypeaheadItem
- * @position Testing; validates TypeaheadItem.tsx implementation — pass-through
- *   props, the label/icon/description layout, disabled dimming, ref forwarding,
- *   and the pre-rendered `item.element` short-circuit
- */
-
-import {describe, it, expect} from 'vitest';
-import {createRef, type ReactElement} from 'react';
-import {render, screen} from '@testing-library/react';
-import {TypeaheadItem} from './TypeaheadItem';
-import type {SearchableItem} from './types';
-import {declaredValue} from '../__tests__/stylexDeclarations';
-
-const item: SearchableItem = {id: '1', label: 'Alice'};
-
-/** Renders the item and returns its root row element. */
-function renderItem(ui: ReactElement): HTMLElement {
-  const {container} = render(ui);
-  return container.firstElementChild as HTMLElement;
-}
-
-describe('TypeaheadItem', () => {
-  it('forwards pass-through props to the item element', () => {
-    render(
-      <TypeaheadItem
-        item={{id: '1', label: 'Alice'}}
-        aria-label="Alice, engineer"
-        id="result-1"
-        data-source="directory"
-        data-testid="item"
-      />,
-    );
-    const item = screen.getByTestId('item');
-    expect(item).toHaveAttribute('aria-label', 'Alice, engineer');
-    expect(item).toHaveAttribute('id', 'result-1');
-    expect(item).toHaveAttribute('data-source', 'directory');
-  });
-
-  it('merges a caller className with its own classes', () => {
-    render(
-      <TypeaheadItem
-        item={{id: '1', label: 'Alice'}}
-        className="caller-class"
-        data-testid="item"
-      />,
-    );
-    const item = screen.getByTestId('item');
-    expect(item.className).toContain('caller-class');
-    expect(item.className).toContain('astryx-typeahead-item');
-  });
-
-  it('renders the item label', () => {
-    render(<TypeaheadItem item={item} />);
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-  });
-
-  it('renders the description below the label when provided', () => {
-    const root = renderItem(
-      <TypeaheadItem item={item} description="Engineer" />,
-    );
-    const content = root.lastElementChild!;
-    expect(Array.from(content.children).map(c => c.textContent)).toEqual([
-      'Alice',
-      'Engineer',
-    ]);
-  });
-
-  it('renders no description element when none is provided', () => {
-    const root = renderItem(<TypeaheadItem item={item} />);
-    const content = root.lastElementChild!;
-    expect(content.children.length).toBe(1);
-    expect(content.textContent).toBe('Alice');
-  });
-
-  it('renders the icon before the label content', () => {
-    const root = renderItem(
-      <TypeaheadItem item={item} icon={<svg data-testid="avatar" />} />,
-    );
-    expect(root.children.length).toBe(2);
-    expect(root.firstElementChild).toBe(screen.getByTestId('avatar'));
-  });
-
-  it('dims the row when isDisabled is set', () => {
-    const root = renderItem(<TypeaheadItem item={item} isDisabled />);
-    expect(declaredValue(root, 'opacity')).toBe('0.5');
-  });
-
-  it('does not dim the row by default', () => {
-    const root = renderItem(<TypeaheadItem item={item} />);
-    expect(declaredValue(root, 'opacity')).toBeNull();
-  });
-
-  it('forwards ref to the row element', () => {
-    const ref = createRef<HTMLDivElement>();
-    const root = renderItem(<TypeaheadItem item={item} ref={ref} />);
-    expect(ref.current).toBe(root);
-  });
-});
-
-describe('TypeaheadItem with a pre-rendered item.element', () => {
-  it('renders item.element raw in place of the label layout', () => {
-    // The caller's element is the whole output — not wrapped in the styled
-    // row — so the label, icon, description and isDisabled dimming have
-    // nowhere to land.
-    const {container} = render(
-      <TypeaheadItem
-        item={{
-          id: '1',
-          label: 'Never shown',
-          element: <div data-testid="prerendered">Pre-rendered row</div>,
-        }}
-        icon={<svg data-testid="avatar" />}
-        description="Engineer"
-        isDisabled
-      />,
-    );
-    const root = container.firstElementChild!;
-    expect(root).toBe(screen.getByTestId('prerendered'));
-    expect(container.children.length).toBe(1);
-    expect(root.className).toBe('');
-    expect(
-      container.querySelector('.astryx-typeahead-item'),
-    ).not.toBeInTheDocument();
-    expect(screen.queryByText('Never shown')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('avatar')).not.toBeInTheDocument();
-    expect(screen.queryByText('Engineer')).not.toBeInTheDocument();
-  });
-});

package/src/VStack/VStack.test.tsx

@@ -1,128 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file VStack.test.tsx
- * @input Uses vitest, @testing-library/react, VStack component
- * @output Unit tests for VStack component behavior
- * @position Testing; validates VStack.tsx implementation
- *
- * SYNC: When VStack.tsx changes, update tests to match new behavior
- */
-
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import {VStack} from './VStack';
-
-describe('VStack', () => {
-  it('renders children correctly', () => {
-    render(
-      <VStack>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </VStack>,
-    );
-    expect(screen.getByText('Item 1')).toBeInTheDocument();
-    expect(screen.getByText('Item 2')).toBeInTheDocument();
-  });
-
-  it('renders as div by default', () => {
-    render(<VStack data-testid="vstack">Content</VStack>);
-    const element = screen.getByTestId('vstack');
-    expect(element.tagName).toBe('DIV');
-  });
-
-  it('renders with polymorphic as prop', () => {
-    render(
-      <VStack as="main" data-testid="vstack">
-        Content
-      </VStack>,
-    );
-    const element = screen.getByTestId('vstack');
-    expect(element.tagName).toBe('MAIN');
-  });
-
-  it('renders with gap prop', () => {
-    render(
-      <VStack gap={4}>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </VStack>,
-    );
-    expect(screen.getByText('Item 1')).toBeInTheDocument();
-  });
-
-  it('renders with hAlign prop', () => {
-    render(
-      <VStack hAlign="center">
-        <div>Item 1</div>
-      </VStack>,
-    );
-    expect(screen.getByText('Item 1')).toBeInTheDocument();
-  });
-
-  it('renders with wrap prop', () => {
-    render(
-      <VStack wrap="wrap">
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </VStack>,
-    );
-    expect(screen.getByText('Item 1')).toBeInTheDocument();
-  });
-
-  it('forwards ref correctly', () => {
-    const ref = vi.fn();
-    render(
-      <VStack ref={ref}>
-        <div>Test</div>
-      </VStack>,
-    );
-    expect(ref).toHaveBeenCalledWith(expect.any(HTMLElement));
-  });
-
-  it('forwards ref with polymorphic as', () => {
-    const ref = vi.fn();
-    render(
-      <VStack as="section" ref={ref}>
-        <div>Test</div>
-      </VStack>,
-    );
-    expect(ref).toHaveBeenCalledWith(expect.any(HTMLElement));
-  });
-
-  it('passes through additional props', () => {
-    render(
-      <VStack data-testid="vstack">
-        <div>Item</div>
-      </VStack>,
-    );
-    expect(screen.getByTestId('vstack')).toBeInTheDocument();
-  });
-
-  it('accepts justify as alias for vAlign', () => {
-    const {container} = render(
-      <VStack justify="center">
-        <div>A</div>
-      </VStack>,
-    );
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('accepts align as alias for hAlign', () => {
-    const {container} = render(
-      <VStack align="center">
-        <div>A</div>
-      </VStack>,
-    );
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('prefers explicit vAlign over justify', () => {
-    const {container} = render(
-      <VStack vAlign="center" justify="end">
-        <div>A</div>
-      </VStack>,
-    );
-    expect(container.firstChild).toBeInTheDocument();
-  });
-});

package/src/VisuallyHidden/VisuallyHidden.spec.md

@@ -1,170 +0,0 @@
----
-schema_version: 3
-template_version: 7
-kind: component
-id: component:VisuallyHidden
-authority: current
-archive_reason: null
-superseded_by: null
-approved_by: cixzhang
-approved_at: 2026-10-27
-owners: [cixzhang]
-review_triggers: [public-api, behavior, accessibility]
-verified_by:
-  [
-    .github/visual-baseline/manifest.json,
-    packages/core/src/VisuallyHidden/VisuallyHidden.test.tsx,
-    apps/storybook/stories/VisuallyHidden.stories.tsx,
-  ]
-modules: []
-families: []
-design_specs: []
-architecture: [architecture:public-component-api]
-contributing: []
-system_specs: [spec:AST-009, spec:AST-071]
----
-
-# VisuallyHidden component contract
-
-## Contract at a glance
-
-| Area                    | Contract                                                                                                                                                                                    |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Public contract         | A wrapper with required `children` and an optional `as` element; accessibility and data props pass through. It accepts no `className` or `style` and ignores `xstyle` today (FR3 gap, OQ1). |
-| Behavior                | Content is clipped from sight by a fixed style block no caller input can displace, and stays in the accessibility tree unless the caller passes `hidden`, `inert`, or `aria-hidden`.        |
-| End-user impact         | Screen-reader users hear names and announcements that sighted users do not need to see.                                                                                                     |
-| Builder impact          | None; the record describes shipped behavior.                                                                                                                                                |
-| Compatibility/readiness | Released behavior recorded as current; no API, default, or output changes. One implementation gap is listed under Current-state impact; OQ1 is open.                                        |
-| Review checks           | Reject a `display: none` or `visibility: hidden` hide, a caller input that displaces the clip, or dropped `aria-*` passthrough.                                                             |
-| Governing rules         | `architecture:public-component-api/INV5,INV6,INV8`; `spec:AST-071` FR2.                                                                                                                     |
-
-This table is a review projection; the body below is authoritative.
-
-## Intent
-
-VisuallyHidden exposes content to assistive technology while keeping it out of
-sight: names for icon-only controls, live announcement regions, and
-supplementary screen-reader context. It owns the hiding technique and the
-guarantee that the hidden node cannot be styled visible.
-
-## Compatibility and migration
-
-- Released default preserved: `yes`
-- Compatibility class: records shipped behavior; no public prop, default, or
-  DOM output changes. `xstyle` is accepted by the type and ignored;
-  `className` and `style` are not accepted; the styling surface is the FR3 gap (OQ1)
-- Controlled/uncontrolled behavior: not applicable
-- Migration decision: none
-
-Consumer migration instructions belong in consumer docs and release notes.
-
-## Current-state impact
-
-- **Styling inputs not accepted (FR3).** VisuallyHidden drops `className` and
-  `style` and ignores `xstyle`, so callers cannot style the element, where
-  `architecture:public-component-api` INV6 and `spec:AST-071` FR2 have root
-  styling inputs compose. The consumer docs plan to remove `xstyle`; OQ1
-  decides whether the component conforms or INV6's owner records it as an
-  exception.
-
-## Ownership boundary
-
-**Owns**
-
-- The rendered element and its fixed clip style block.
-- Passing accessibility, identity, data, and event props through.
-
-**Does not own / non-goals**
-
-- What the hidden content says and whether it is a live region — owned by the
-  caller, through `children`, `as`, and ARIA props.
-- Shared status announcements — owned by `spec:AST-086` and its shared channel.
-- Theming — VisuallyHidden has no theming target.
-
-## Public concepts
-
-| Concept | Closed values or states                                                                            | Meaning                                | Availability by variant/orientation/state | Default | Owner                      | Stability | Invalid-value behavior                                                                                          |
-| ------- | -------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------- | ------- | -------------------------- | --------- | --------------------------------------------------------------------------------------------------------------- |
-| Element | An intrinsic element, or a component that forwards `className` and `ref` to the element it renders | The rendered element, inline or block. | Always                                    | `span`  | `component:VisuallyHidden` | Stable    | A component that does not forward `className` and `ref` renders its content unclipped, and the ref stays unset. |
-
-## Behavioral and layout contract
-
-| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Basis                    |
-| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
-| FR1 | VisuallyHidden renders `children` in the element named by `as` (default `span`). Its own hiding keeps the content in the accessibility tree; a caller's `hidden`, `inert`, or `aria-hidden` passes through and removes it, by the caller's choice.                                                                                                                                                                                                                                                                                                                                          | Current source and tests |
-| FR2 | When `as` is an intrinsic element or forwards `className` to the element it renders, that element is absolutely positioned at the inline-start and block-start of its containing block, 1px by 1px with a −1px margin, no padding or border, clipped to an empty rectangle with hidden overflow, unwrapped, and ignores pointer events and selection.                                                                                                                                                                                                                                       | Current source and tests |
-| FR3 | `ref` reaches the element (for a component `as`, when it forwards `ref`), and supported `aria-*`, `role`, `id`, `data-*`, and event props reach it. The clip styles apply after every caller input, so nothing displaces the clip. Root styling inputs compose on the element (`architecture:public-component-api` INV6, `spec:AST-071` FR2). Implementation gap: `className` and `style` are not accepted and `xstyle` is ignored; the consumer docs plan to remove `xstyle`, and OQ1 decides whether VisuallyHidden conforms or becomes a recorded INV6 exception (Current-state impact). | Current source and tests |
-
-### Allowed variation
-
-- **AV1 — Element choice.** Callers choose an inline or block element, such as
-  a `div` for block content or a live region.
-
-### Representative states
-
-| State             | Required invariant                                                      | Allowed variation |
-| ----------------- | ----------------------------------------------------------------------- | ----------------- |
-| Icon-only label   | Hidden `span` gives the control its accessible name.                    | Text.             |
-| Live region       | Block element with caller `aria-live` stays hidden and announced.       | Politeness.       |
-| Styling attempted | The clip still wins; caller styling has no effect today (FR3 gap, OQ1). | —                 |
-
-### Transformation and precedence order
-
-- **ORD1 — Props.** Caller props → fixed clip styles, so the clip wins.
-
-### Performance and resources
-
-- **PR1 — Static render.** VisuallyHidden holds no state and uses no hooks.
-
-## Accessibility contract
-
-- **AR1 — Perceivable to assistive technology.** Hiding uses clipping, never
-  `display: none`, `visibility: hidden`, or `aria-hidden`, so the content is
-  read and can name or describe other elements.
-- **AR2 — Live regions and hiding by caller choice.** VisuallyHidden adds no
-  role or live region of its own; a caller's `role`, `aria-live`, `hidden`,
-  `inert`, and `aria-hidden` pass through.
-
-## Design relationships
-
-| Anatomy or state | Design requirement                                  | Representation authority | Hierarchy role | Component contract |
-| ---------------- | --------------------------------------------------- | ------------------------ | -------------- | ------------------ |
-| Hidden content   | Present to assistive technology, absent from sight. | Current source and docs  | Supporting     | FR1–FR3, AR1, AR2  |
-
-Theming: VisuallyHidden has no theming target, by design; a visible style on a
-hidden node would defeat its purpose.
-
-## Family and system relationships
-
-- `architecture:public-component-api` owns passthrough, ref, and styling-input
-  rules; FR3 applies INV5, INV6, and INV8 and records the INV6 gap.
-
-## Verification map
-
-| Contract | Verification                                                                                     | Representative states                                                                   | Mutation or failure expectation                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Audit section                   |
-| -------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
-| FR1, AR1 | `VisuallyHidden.test.tsx` render and icon-label tests                                            | Default, `as`, icon-only control                                                        | Content leaving the accessibility tree or a lost accessible name fails. Gap: no test covers a caller `hidden`, `inert`, or `aria-hidden` passing through.                                                                                                                                                                                                                                                                                                                                                                                             | `audit:VisuallyHidden/a11y`     |
-| FR2      | `VisuallyHidden.test.tsx` clip-style test; stable visual baseline `core-visuallyhidden--default` | Default                                                                                 | A `hidden` attribute fails the unit test; content that becomes visible comes back changed in the visual baseline. Gap: no unit test asserts a clip declaration, although the test environment exposes them.                                                                                                                                                                                                                                                                                                                                           | `audit:VisuallyHidden/behavior` |
-| FR3, AR2 | `VisuallyHidden.test.tsx` `as`, ref, passthrough, and styling tests                              | `as` with `aria-live`; ref; `id`, `role`, `data-testid`; `className`, `style`, `xstyle` | A lost `aria-live`, a missed ref, or a dropped `id` or `role` fails. The styling tests pin today's dropped `className`, `style`, and `xstyle` attribute, which pins the recorded FR3 gap, not the contract. Gap: no test asserts that VisuallyHidden adds no role or live region of its own; the ref test still passes when a wrapper receives the ref; no test asserts other `aria-*` or event props; no test checks that the clip wins over caller styles; and no test covers a component `as` that does or does not forward `className` and `ref`. | `audit:VisuallyHidden/behavior` |
-| PR1      | Source review                                                                                    | Every state                                                                             | Gap: no automated check fails if VisuallyHidden adds state or a hook.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `audit:VisuallyHidden/behavior` |
-| AR1      | Accessibility-tree evidence (`spec:AST-009` FR3)                                                 | Icon-only label; live region                                                            | Gap: no accessibility-tree check proves the hidden content stays in the tree; the unit tests query the DOM.                                                                                                                                                                                                                                                                                                                                                                                                                                           | `audit:VisuallyHidden/a11y`     |
-
-## Decision log
-
-None recorded. The record describes shipped behavior; OQ1 is open.
-
-## Open questions
-
-- **OQ1 — Should VisuallyHidden accept root styling inputs?** (`human-api`)
-  `architecture:public-component-api` INV6 has root styling inputs compose
-  unless a family decision names an exception, and the consumer docs plan to
-  remove `xstyle`; until an owner decides, the styling-free surface is the FR3
-  gap. If styling-free is a deliberate exception, INV6's owner
-  records it (with a `spec:AST-071` known-gap entry) and FR3 links it, and
-  callers keep no way to style the element. If composition is the direction,
-  FR3 stays as written and a conforming implementation closes the gap.
-
-## Content boundary
-
-This file does not duplicate consumer prop tables/examples, current audit
-results, implementation steps, or family/system rules. It links to their owners.

package/src/VisuallyHidden/VisuallyHidden.test.tsx

@@ -1,115 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file VisuallyHidden.test.tsx
- * @input Uses vitest, @testing-library/react, VisuallyHidden component
- * @output Unit tests for VisuallyHidden rendering + a11y behavior
- * @position Testing; validates VisuallyHidden.tsx implementation
- *
- * SYNC: When VisuallyHidden.tsx changes, update tests to match new behavior
- */
-
-import {describe, it, expect} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import {createRef} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {VisuallyHidden} from './VisuallyHidden';
-
-describe('VisuallyHidden', () => {
-  it('renders its children in the accessibility tree', () => {
-    render(<VisuallyHidden>Delete incident</VisuallyHidden>);
-    // Present in the a11y tree (getByText finds it — it is not display:none).
-    expect(screen.getByText('Delete incident')).toBeInTheDocument();
-  });
-
-  it('renders a <span> by default', () => {
-    render(<VisuallyHidden>Label</VisuallyHidden>);
-    expect(screen.getByText('Label').tagName).toBe('SPAN');
-  });
-
-  it('renders a custom element via the `as` prop', () => {
-    render(
-      <VisuallyHidden as="div" aria-live="polite">
-        Moved task to Done
-      </VisuallyHidden>,
-    );
-    const el = screen.getByText('Moved task to Done');
-    expect(el.tagName).toBe('DIV');
-    expect(el).toHaveAttribute('aria-live', 'polite');
-  });
-
-  it('applies the clip styles that hide it visually', () => {
-    render(<VisuallyHidden>Hidden</VisuallyHidden>);
-    const el = screen.getByText('Hidden');
-    // jsdom does not apply the stylesheet, but the StyleX class is attached.
-    expect(el.getAttribute('class')).toBeTruthy();
-    // It must NOT be display:none / hidden — it stays in the a11y tree.
-    expect(el).not.toHaveAttribute('hidden');
-  });
-
-  it('forwards a ref to the rendered element', () => {
-    const ref = createRef<HTMLElement>();
-    render(<VisuallyHidden ref={ref}>Ref target</VisuallyHidden>);
-    expect(ref.current).toBeInstanceOf(HTMLElement);
-    expect(ref.current?.textContent).toBe('Ref target');
-  });
-
-  it('passes through arbitrary BaseProps (id, role, data-*)', () => {
-    render(
-      <VisuallyHidden id="announcer" role="status" data-testid="vh">
-        Status
-      </VisuallyHidden>,
-    );
-    const el = screen.getByTestId('vh');
-    expect(el).toHaveAttribute('id', 'announcer');
-    expect(el).toHaveAttribute('role', 'status');
-  });
-
-  it('does not forward the styling props its own contract omits', () => {
-    // `className` and `style` are off the interface, and they are reached here
-    // through an untyped spread, which is how they get past the `Omit` in
-    // practice: a cast, a `{...consumerProps}` object, or plain JavaScript. The
-    // type is only the first line of defence here.
-    const stylingProps: Record<string, unknown> = {
-      xstyle: {color: 'red'},
-      className: 'consumer-track',
-      style: {position: 'static'},
-    };
-    render(<VisuallyHidden {...stylingProps}>Hidden</VisuallyHidden>);
-    const el = screen.getByText('Hidden');
-
-    // VisuallyHidden documents itself as styling-free and its clip block as
-    // non-overridable, but the implementation spreads leftover props onto the
-    // element: `xstyle` reaches the DOM as the literal string "[object Object]",
-    // and a cast `style` wins the last-word race for `position`, un-hiding the
-    // node (or clipping real content) while keeping the a11y semantics.
-    expect(el).not.toHaveAttribute('xstyle');
-    expect(el.getAttribute('class') ?? '').not.toContain('consumer-track');
-    expect(el.getAttribute('style') ?? '').not.toContain('static');
-  });
-
-  it('still accepts a typed xstyle, and ignores it', () => {
-    // Released 0.7.2 accepted `xstyle` through `BaseProps`, so narrowing it out
-    // of `VisuallyHiddenProps` would make code that compiles today stop
-    // compiling. It stays declared and documented as ignored, and the runtime
-    // drop is what keeps the stray attribute off the element. Written as a typed
-    // prop on purpose: this line is the tripwire if the interface is ever
-    // narrowed early.
-    const overrides = stylex.create({tint: {color: 'red'}});
-    render(<VisuallyHidden xstyle={overrides.tint}>Hidden</VisuallyHidden>);
-    const el = screen.getByText('Hidden');
-
-    expect(el).not.toHaveAttribute('xstyle');
-    expect(el.getAttribute('style') ?? '').not.toContain('color');
-  });
-
-  it('gives an icon-only control an accessible name', () => {
-    render(
-      <button type="button">
-        <span aria-hidden="true">🗑️</span>
-        <VisuallyHidden>Delete</VisuallyHidden>
-      </button>,
-    );
-    expect(screen.getByRole('button', {name: 'Delete'})).toBeInTheDocument();
-  });
-});