@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/Token/Token.test.tsx

@@ -256,6 +256,110 @@ describe('Token accessibility', () => {
     ).toBeInTheDocument();
   });
 
+  it('keeps aria-labelledby and aria-describedby on a disabled link token', () => {
+    render(
+      <>
+        <span id="dl-label">Docs section</span>
+        <span id="dl-hint">Unavailable offline</span>
+        <Token
+          label="Docs"
+          href="/docs"
+          isDisabled
+          aria-labelledby="dl-label"
+          aria-describedby="dl-hint"
+        />
+      </>,
+    );
+    const link = screen.getByRole('link', {name: 'Docs section'});
+    expect(link).toHaveAccessibleDescription('Unavailable offline');
+  });
+
+  it("passes aria-labelledby and aria-describedby to a clickable token's button (public-component-api INV5)", () => {
+    render(
+      <>
+        <span id="field-label">Fruit</span>
+        <span id="field-hint">Pick one</span>
+        <Token
+          label="Apple"
+          onClick={() => {}}
+          aria-labelledby="field-label"
+          aria-describedby="field-hint"
+          data-testid="token"
+        />
+      </>,
+    );
+    const button = screen.getByRole('button', {name: 'Fruit'});
+    expect(button).toHaveAccessibleDescription('Pick one');
+    expect(screen.getByTestId('token')).not.toHaveAttribute('aria-labelledby');
+  });
+
+  it('reflects the disabled state on the token target in every structure (theming-surface INV6)', () => {
+    render(
+      <>
+        <Token label="Static" isDisabled data-testid="static" />
+        <Token
+          label="Clickable"
+          onClick={() => {}}
+          isDisabled
+          data-testid="clickable"
+        />
+        <Token label="Link" href="/docs" isDisabled data-testid="link" />
+        <Token
+          label="Link with remove"
+          href="/docs"
+          onRemove={() => {}}
+          isDisabled
+          data-testid="link-and-remove"
+        />
+        <Token label="Enabled" href="/docs" data-testid="enabled" />
+      </>,
+    );
+    for (const id of ['static', 'clickable', 'link', 'link-and-remove']) {
+      expect(screen.getByTestId(id), id).toHaveAttribute(
+        'data-disabled',
+        'disabled',
+      );
+    }
+    expect(screen.getByTestId('enabled')).not.toHaveAttribute('data-disabled');
+  });
+
+  it('keeps a disabled link token a focusable link with no destination (spec:AST-085 FR1, FR5)', async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    render(
+      <>
+        <Token label="Docs" href="/docs" isDisabled />
+        <Token label="Guide" href="/guide" isDisabled onRemove={onRemove} />
+      </>,
+    );
+    for (const name of ['Docs', 'Guide']) {
+      const link = screen.getByRole('link', {name});
+      expect(link, name).toHaveAttribute('aria-disabled', 'true');
+      expect(link, name).not.toHaveAttribute('href');
+    }
+    await user.tab();
+    expect(screen.getByRole('link', {name: 'Docs'})).toHaveFocus();
+    await user.tab();
+    expect(screen.getByRole('link', {name: 'Guide'})).toHaveFocus();
+    await user.tab();
+    await user.keyboard('{Enter}');
+    expect(onRemove).not.toHaveBeenCalled();
+  });
+
+  it("passes other keys to a disabled link token's onKeyDown, but not Enter or Space", async () => {
+    const user = userEvent.setup();
+    const onKeyDown = vi.fn();
+    render(
+      <Token label="Docs" href="/docs" isDisabled onKeyDown={onKeyDown} />,
+    );
+    await user.tab();
+    await user.keyboard('{ArrowRight}');
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
+    expect(onKeyDown.mock.calls[0][0].key).toBe('ArrowRight');
+    await user.keyboard('{Enter} ');
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
+  });
+
   it('keeps both buttons focusable and inert when isDisabled is true', async () => {
     const user = userEvent.setup();
     const handleClick = vi.fn();

package/src/Token/Token.tsx

@@ -299,6 +299,8 @@ export function Token({
   className,
   style,
   'data-testid': testId,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   ref,
   ...rest
 }: TokenProps) {
@@ -342,13 +344,61 @@ export function Token({
     </>
   );
 
+  // Naming inputs reach the element that owns the token's action: the inner
+  // button of a clickable token, otherwise the root
+  // (architecture:public-component-api INV5).
+  const labellingProps = {
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+  };
+
   const sharedProps = {
     'data-testid': testId,
     ...(isLabelHidden ? {'aria-label': label} : {}),
     ...(description != null ? {'aria-description': description} : {}),
   };
 
-  if (role === 'link') {
+  // A disabled link keeps a focusable link with aria-disabled and no
+  // destination, as a disabled Link does (spec:AST-085 FR1, FR5;
+  // component:Link FR5). useInteractiveRole reports no link role once
+  // disabled, so the structure is chosen here.
+  const isDisabledLink = isDisabled && href != null && effectiveOnClick == null;
+
+  if (isDisabledLink && onRemove == null) {
+    // A disabled link is an <a> with no href, as Link renders one: nothing can
+    // navigate, it keeps a Tab stop and the link role (spec:AST-085 FR1, FR5).
+    // The router LinkComponent is skipped, since a custom router link may
+    // require a live href.
+    const DisabledAnchor = 'a';
+    return (
+      <DisabledAnchor
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        role="link"
+        aria-disabled={true}
+        tabIndex={0}
+        {...mergeProps(
+          themeProps('token', {color, size, disabled: 'disabled'}),
+          focusOutlineProps.focusVisible(
+            styles.base,
+            sizeStyles[size],
+            colorStyles[color],
+            styles.interactive,
+            styles.disabled,
+            xstyle,
+          ),
+          className,
+          style,
+        )}
+        {...rest}
+        {...labellingProps}
+        {...disabledInteractionProps(rest.onKeyDown)}
+        {...sharedProps}>
+        {content}
+      </DisabledAnchor>
+    );
+  }
+
+  if (role === 'link' || isDisabledLink) {
     if (onRemove == null) {
       return (
         <LinkComponent
@@ -356,7 +406,11 @@ export function Token({
           href={href as string}
           {...pressable}
           {...mergeProps(
-            themeProps('token', {color, size}),
+            themeProps('token', {
+              color,
+              size,
+              disabled: isDisabled ? 'disabled' : null,
+            }),
             focusOutlineProps.focusVisible(
               styles.base,
               sizeStyles[size],
@@ -370,6 +424,7 @@ export function Token({
             style,
           )}
           {...rest}
+          {...labellingProps}
           {...(isDisabled ? {'aria-disabled': true} : {})}
           {...sharedProps}>
           {content}
@@ -405,7 +460,11 @@ export function Token({
           </span>
         }
         {...mergeProps(
-          themeProps('token', {color, size}),
+          themeProps('token', {
+            color,
+            size,
+            disabled: isDisabled ? 'disabled' : null,
+          }),
           focusOutlineProps.focusWithin(
             styles.base,
             sizeStyles[size],
@@ -419,6 +478,7 @@ export function Token({
           style,
         )}
         {...rest}
+        {...labellingProps}
         {...sharedProps}
       />
     );
@@ -439,7 +499,11 @@ export function Token({
         onClick={isDisabled ? undefined : handleContainerClick}
         {...pressable}
         {...mergeProps(
-          themeProps('token', {color, size}),
+          themeProps('token', {
+            color,
+            size,
+            disabled: isDisabled ? 'disabled' : null,
+          }),
           focusOutlineProps.focusWithin(
             styles.base,
             sizeStyles[size],
@@ -458,6 +522,7 @@ export function Token({
         <button
           type="button"
           onClick={effectiveOnClick}
+          {...labellingProps}
           aria-disabled={isDisabled || undefined}
           {...(isDisabled ? disabledInteractionProps() : null)}
           {...stylex.props(styles.invisibleButton)}>
@@ -479,7 +544,11 @@ export function Token({
     <span
       ref={ref}
       {...mergeProps(
-        themeProps('token', {color, size}),
+        themeProps('token', {
+          color,
+          size,
+          disabled: isDisabled ? 'disabled' : null,
+        }),
         stylex.props(
           styles.base,
           sizeStyles[size],
@@ -491,6 +560,7 @@ export function Token({
         style,
       )}
       {...rest}
+      {...labellingProps}
       {...sharedProps}>
       {content}
     </span>

package/src/Token/TokenLink.tsx

@@ -32,6 +32,7 @@ import type {LinkComponentType} from '../Link/types';
 import {composeEventHandlers} from '../utils';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {disabledInteractionProps} from '../utils/disabledInteraction';
 export interface TokenLinkProps extends HTMLAttributes<HTMLElement> {
   /** Ref forwarded to the container element. */
   ref?: Ref<HTMLElement>;
@@ -100,13 +101,26 @@ export function TokenLink({
           : composeEventHandlers(onMouseUpProp, onMouseUp)
       }>
       {icon}
-      <LinkComponent
-        ref={linkRef as Ref<HTMLAnchorElement>}
-        href={href}
-        aria-disabled={isDisabled || undefined}
-        {...linkStyleProps}>
-        {labelContent}
-      </LinkComponent>
+      {isDisabled ? (
+        // A disabled link stays a focusable link with no destination, as a
+        // disabled Link does (spec:AST-085 FR1, FR5; component:Link FR5).
+        <a
+          ref={linkRef as Ref<HTMLAnchorElement>}
+          role="link"
+          aria-disabled={true}
+          tabIndex={0}
+          {...linkStyleProps}
+          {...disabledInteractionProps()}>
+          {labelContent}
+        </a>
+      ) : (
+        <LinkComponent
+          ref={linkRef as Ref<HTMLAnchorElement>}
+          href={href}
+          {...linkStyleProps}>
+          {labelContent}
+        </LinkComponent>
+      )}
       {endContent}
       {removeButton}
     </span>

package/src/Tokenizer/Tokenizer.spec.md

@@ -16,6 +16,7 @@ verified_by:
     packages/core/src/Tokenizer/Tokenizer.ssr.test.tsx,
     packages/core/src/Tokenizer/TokenizerBottomSheet.test.tsx,
     packages/core/src/Tokenizer/Tokenizer.props-type.test.tsx,
+    packages/core/src/PowerSearch/PowerSearch.test.tsx,
     packages/core/src/internal/tokenizer-presentation.test.ts,
     packages/core/src/Typeahead/Typeahead.test.tsx,
     packages/core/src/Layer/useLayer.test.tsx,
@@ -325,7 +326,7 @@ presentation, which has no inline combobox, suggestion menu, or end lane.
 
 ## Accessibility contract
 
-AR1–AR5 describe the `popover` presentation; AR6 describes the sheet
+AR1–AR5 and AR7 describe the `popover` presentation; AR6 describes the sheet
 presentation.
 
 - **AR1 — Modality equivalence.** The same input or token/control produces the
@@ -371,15 +372,27 @@ presentation.
   once the confirmation has closed, since a message sent while the
   confirmation covers the sheet is not heard — `spec:AST-086/FR14`), the
   search's busy start, and how each search
-  ended — the result count for a non-empty query, or the empty state's text
-  when it shows — are announced once per occasion from inside the sheet
-  through `useAnnounce`, which `spec:AST-086/FR14` routes into the persistent
+  ended — the result count for a non-empty query, or the empty state's text when
+  it shows, both from the search's own `useAnnounce({hasReplace: true})`
+  instance (`spec:AST-086/FR9`, FR13), so a newer one replaces one not yet
+  spoken — are announced once per occasion from inside the sheet through
+  `useAnnounce`, which `spec:AST-086/FR14` routes into the persistent
   polite container of the sheet's own dialog while it is open, because the
   shared page-body channel is not exposed behind a native modal; the
   container follows FR3, FR5, and FR6 of that record (WCAG 2.2 SC 4.1.3
   through `spec:AST-020/FR1`). After the sheet closes focus returns to the
   trigger and the field's announcements follow the same FR14 route from
   wherever the field renders.
+- **AR7 — Clear all is announced.** In the `popover` presentation, the field's
+  Clear all, which empties every token at once and moves focus to the input,
+  announces "All items removed" (`@astryx.tokenizer.allRemoved`, the words of
+  the sheet's Clear all in AR6) the same way the field announces a token added
+  or removed: politely, through the shared channel (`spec:AST-086/FR2`, FR5).
+  It is announced once per Clear all (`spec:AST-086/FR6`); a Clear all
+  confirmed in the sheet is announced by the sheet alone (AR6), and the field
+  stays silent for it (WCAG 2.2 SC 4.1.3 through `spec:AST-020/FR9`). A
+  component that composes Tokenizer and words its own Clear all announces its
+  own words instead (`component:PowerSearch`).
 
 ## Design relationships
 
@@ -460,6 +473,7 @@ become Tokenizer policy.
 | FR13–FR15, AR5      | Focused Tokenizer/BaseTypeahead tests and exact-head Chromium interaction evidence                                                               | pointer/keyboard commit, first/middle/last choice, rejected/deferred control, loading, disabled, max, exhaustion, Escape, Tab, outside focus                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Selected values remain available, order changes, focus leaves the combobox, active descendant names no option, stale work reopens, or a terminal state stays interactive. | `audit:Tokenizer/multi-select`   |
 | PR1–PR5             | Instrumented reads, pending-frame cleanup tests, and first-frame Chromium capture                                                                | open, close before frame, reopen opposite side, resize while open                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Render-time/repeated reads, observer/pointer tracking, uncancelled frame, or first-frame jump occurs.                                                                     | `audit:Tokenizer/performance`    |
 | AR1–AR5             | Existing interaction suites plus focused pointer/keyboard/browser checks; native-disabled assertions pending conformance (`spec:AST-085`)        | add/edit, focus/refocus, overflow, disabled, dismissal, retained bootstrap selection                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Modality changes placement, semantics/focus regress, active descendant becomes invalid, or visible placement is wrong before fallback.                                    | `audit:Tokenizer/accessibility`  |
+| AR7                 | Focused Tokenizer tests, inline and sheet, and the PowerSearch test                                                                              | inline Clear all; a localized catalog; a Clear all confirmed in the sheet counted across every live region; PowerSearch's own words                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The inline Clear all is silent, speaks words other than its catalog message, a sheet Clear all is announced twice, or PowerSearch speaks Tokenizer's words.               | `audit:Tokenizer/accessibility`  |
 | FR16–FR24, AR6, PR6 | Focused Tokenizer sheet tests with the compact-touch query stubbed both ways, a server-render-then-hydrate test, plus real-engine touch evidence | default popover, forced sheet, adaptive both ways, `adaptive` server-rendered as the combobox and hydrated without a recoverable error, then the trigger on a coarse-pointer client with the body still active, with `hasAutoFocus` the autofocused input's focus on the trigger after the swap and no `onBlur`/`onFocus` reported, the trigger's box against the hydrating field's at 390 and 414px, base props and ref on the trigger, the trigger's description in the inline input's order — a disabled trigger with `disabledMessage`, `description` and a status exposing the caller's ids, the description, the status message and the reason before the count and the tokens —, inert-prop warning, pending search, in-sheet announcements of toggles, busy start, result count and the rendered empty outcome, the confirmed Clear all announced once the confirmation has closed, a below-threshold query, a rejecting source, focus on the panel at open, the query cleared by a swipe, scrim, or Escape close, focus after a presentation change with the sheet closed, focus after the create row, focus after a confirmed Clear all, a spent Clear all focusable with `aria-disabled` and no action, focus after a settled search removes the focused row, no busy feedback or busy-start announcement on open with an instant source, only the search field — no list, no message, no announcement — for an empty query with nothing to list (a search-only source, nothing selected), and the list once a query finds items, element counts under a fine and a coarse pointer at rest and open (Chromium, Experimental stories: adaptive 154/120 at rest — the closed trigger in place of the inline field, a different element that stays under the fine count — and 157/165 open at the query "e" with no footer, the coarse total reconciled as rest − the re-hosted surfaces host + the dialog of 47 by part, forced sheet 114/114 and 165/165; the two owner exceptions DEC-3 records beyond the FR60 allowance, with before and after counts), no confirmation dialog in the DOM while none is pending, the query kept across a disabled-forced close, `aria-setsize`/`aria-posinset` on each row's `listitem` and the next batch on focus reaching the last rendered row, open/toggle/reopen order, create, batches, limit, Clear all, disabled while open, focus return | A field without `experimental` changes, a toggle moves a row, Clear all skips confirmation, the limit disables checked rows, or the popover bundle carries the sheet.     | `audit:Tokenizer/sheet`          |
 | Record structure    | `scripts/check-knowledge.mjs`                                                                                                                    | Template-v3 current record and current-only frontmatter links                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Invalid metadata, authority, or relationship references fail repository validation.                                                                                       | `audit:Tokenizer/knowledge`      |
 

package/src/Tokenizer/Tokenizer.test.tsx

@@ -28,6 +28,7 @@ import type {SearchSource, SearchableItem} from '../Typeahead/types';
 import {TestIcon} from '../__tests__/TestIcon';
 import {InternationalizationProvider} from '../i18n';
 import type * as TokenModule from '../Token';
+import {FormLayout} from '../FormLayout/FormLayout';
 
 // Every Token render, in order, by label.
 //
@@ -723,6 +724,54 @@ describe('Tokenizer', () => {
       bootstrap: () => [],
     };
 
+    it('labels the inline create row from the catalog, following the locale', async () => {
+      const overrides = {
+        de: {'@astryx.tokenizer.create': '„{value}“ erstellen'},
+      };
+      const {rerender} = render(
+        <InternationalizationProvider locale="de" overrides={overrides}>
+          <Tokenizer
+            label="Obst"
+            searchSource={emptySource}
+            value={[]}
+            onChange={() => {}}
+            hasCreate
+            debounceMs={0}
+          />
+        </InternationalizationProvider>,
+      );
+      await act(async () => {
+        fireEvent.change(screen.getByRole('combobox'), {
+          target: {value: 'Kiwi'},
+        });
+      });
+      await act(async () => {
+        await new Promise(r => setTimeout(r, 50));
+      });
+      expect(screen.getByText('„Kiwi“ erstellen')).toBeInTheDocument();
+      expect(screen.queryByText('Create "Kiwi"')).not.toBeInTheDocument();
+
+      rerender(
+        <InternationalizationProvider locale="en" overrides={overrides}>
+          <Tokenizer
+            label="Obst"
+            searchSource={emptySource}
+            value={[]}
+            onChange={() => {}}
+            hasCreate
+            debounceMs={0}
+          />
+        </InternationalizationProvider>,
+      );
+      // The row is derived per query, so the next query takes the new locale.
+      await act(async () => {
+        fireEvent.change(screen.getByRole('combobox'), {
+          target: {value: 'Kiwis'},
+        });
+      });
+      expect(await screen.findByText('Create "Kiwis"')).toBeInTheDocument();
+    });
+
     it('still offers Create below minQueryLength, and does not search', async () => {
       // The threshold exists to avoid a fetch too broad to be worth making.
       // Creating costs no fetch, so a field that can create `QA` should not
@@ -1355,6 +1404,33 @@ describe('Tokenizer', () => {
     });
   });
   describe('announcements', () => {
+    it("announces Clear all politely, in the sheet's words", async () => {
+      const onChange = vi.fn();
+      render(
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{
+            fr: {'@astryx.tokenizer.allRemoved': 'Tout a été retiré'},
+          }}>
+          <Tokenizer
+            label="Members"
+            searchSource={userSource}
+            value={[users[0], users[1]]}
+            onChange={onChange}
+            hasClear
+          />
+        </InternationalizationProvider>,
+      );
+      fireEvent.click(screen.getByRole('button', {name: /clear/i}));
+      expect(onChange).toHaveBeenCalledWith(
+        [],
+        expect.objectContaining({type: 'remove'}),
+      );
+      await waitFor(() => {
+        expect(politeRegion()?.textContent).toBe('Tout a été retiré');
+      });
+    });
+
     it('announces removal politely on Backspace with an empty input', async () => {
       const onChange = vi.fn();
       render(
@@ -1525,6 +1601,86 @@ describe('Tokenizer', () => {
   });
 });
 
+describe('Tokenizer required state (FormLayout FR5, AR2)', () => {
+  it('exposes the resolved required state on the combobox', () => {
+    const field = (props: {
+      isRequired?: boolean;
+      isOptional?: boolean;
+      label: string;
+    }) => (
+      <Tokenizer
+        {...props}
+        searchSource={userSource}
+        value={[]}
+        onChange={() => {}}
+      />
+    );
+    render(
+      <>
+        {field({label: 'Plain'})}
+        {field({label: 'Explicit', isRequired: true})}
+        <FormLayout defaultOptionality="required">
+          {field({label: 'By default'})}
+          {field({label: 'Opted out', isOptional: true})}
+        </FormLayout>
+      </>,
+    );
+    const required = (name: string) =>
+      screen
+        .getByRole('combobox', {name: new RegExp(`^${name}`)})
+        .getAttribute('aria-required');
+    expect(required('Plain')).toBeNull();
+    expect(required('Explicit')).toBe('true');
+    expect(required('By default')).toBe('true');
+    expect(required('Opted out')).toBeNull();
+  });
+});
+
+describe('Tokenizer invalid state', () => {
+  it('marks the combobox invalid for an error status only (WCAG 4.1.2)', () => {
+    const field = (
+      label: string,
+      status?: {type: 'error' | 'warning'; message: string},
+    ) => (
+      <Tokenizer
+        label={label}
+        status={status}
+        searchSource={userSource}
+        value={[]}
+        onChange={() => {}}
+      />
+    );
+    render(
+      <>
+        {field('None')}
+        {field('Warned', {type: 'warning', message: 'Check this'})}
+        {field('Failed', {type: 'error', message: 'Pick one'})}
+      </>,
+    );
+    const invalid = (name: string) =>
+      screen.getByRole('combobox', {name}).getAttribute('aria-invalid');
+    expect(invalid('None')).toBeNull();
+    expect(invalid('Warned')).toBeNull();
+    expect(invalid('Failed')).toBe('true');
+  });
+
+  it("keeps a caller's own aria-invalid and aria-required when the field's own state is off", () => {
+    render(
+      <Tokenizer
+        label="Caller"
+        aria-invalid="true"
+        aria-required="true"
+        searchSource={userSource}
+        value={[]}
+        onChange={() => {}}
+      />,
+    );
+    const combobox = screen.getByRole('combobox', {name: 'Caller'});
+    expect(combobox).toHaveAttribute('aria-invalid', 'true');
+    expect(combobox).toHaveAttribute('aria-required', 'true');
+  });
+});
+
 describe('Tokenizer statusVariant forwarding', () => {
   it('defaults to attached (status renders with data-variant="attached")', () => {
     const {container} = render(
@@ -2119,3 +2275,23 @@ describe('Tokenizer consumer key handler order', () => {
     expect(currentTarget).toBe(screen.getByRole('combobox'));
   });
 });
+
+describe('Tokenizer caller aria-labelledby', () => {
+  it('names the input by its label and a caller aria-labelledby', () => {
+    render(
+      <>
+        <span id="billing-heading">Billing</span>
+        <Tokenizer
+          label="Members"
+          searchSource={userSource}
+          value={[]}
+          onChange={() => {}}
+          aria-labelledby="billing-heading"
+        />
+      </>,
+    );
+    expect(
+      screen.getByRole('combobox', {name: 'Members Billing'}),
+    ).toBeInTheDocument();
+  });
+});