@astryxdesign/core 0.7.2 → 0.7.3-canary.0bf23bd

package/src/Markdown/Markdown.rerender.test.tsx

@@ -0,0 +1,143 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Markdown.rerender.test.tsx
+ * @input Uses vitest, @testing-library/react, Markdown, a synthetic long document
+ * @output Tests that an unrelated caller re-render reuses the rendered document
+ * @position Performance regression evidence for long documents. Counting
+ *   renders of a caller-supplied block renderer is deterministic, unlike a
+ *   timing budget, and fails when Markdown rebuilds every block element on a
+ *   re-render that changed nothing it reads.
+ */
+
+import {useState} from 'react';
+import {act, cleanup, fireEvent, render} from '@testing-library/react';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {Markdown} from './Markdown';
+import type {MarkdownComponents} from './Markdown';
+
+afterEach(() => {
+  cleanup();
+});
+
+/** A long, review-style document: headings, prose, lists, a table, code. */
+function longDocument(sections: number): string {
+  return Array.from({length: sections}, (_, i) =>
+    [
+      `## Section ${i}`,
+      '',
+      `Paragraph ${i} with **bold**, *emphasis*, \`code\` and a [link](/docs/${i}).`,
+      '',
+      `- Point ${i}`,
+      `  - Nested point ${i}`,
+      `- [x] Done ${i}`,
+      '',
+      '| Name | Count |',
+      '| --- | ---: |',
+      `| row ${i} | ${i * 3} |`,
+      '',
+      '```ts',
+      `const value${i} = ${i};`,
+      '```',
+    ].join('\n'),
+  ).join('\n\n');
+}
+
+const SECTIONS = 40;
+
+function createCountingComponents(): {
+  components: Partial<MarkdownComponents>;
+  renders: () => number;
+} {
+  let count = 0;
+  function CountingCode({code}: {code: string; language?: string}) {
+    count++;
+    return <pre data-testid="code">{code}</pre>;
+  }
+  return {components: {code: CountingCode}, renders: () => count};
+}
+
+describe('Markdown re-render reuse', () => {
+  it('does not re-render any block when a caller re-render changes nothing Markdown reads', () => {
+    const {components, renders} = createCountingComponents();
+    const source = longDocument(SECTIONS);
+    let bump: () => void = () => {};
+    function Page() {
+      const [tick, setTick] = useState(0);
+      bump = () => setTick(t => t + 1);
+      return (
+        <section data-tick={tick}>
+          {/* A new link handler each render, as inline callers write it. */}
+          <Markdown components={components} onLinkClick={() => {}}>
+            {source}
+          </Markdown>
+        </section>
+      );
+    }
+    const {container} = render(<Page />);
+    const document = container.querySelector('[role="document"]');
+    const html = document?.innerHTML;
+    expect(renders()).toBe(SECTIONS);
+
+    act(() => bump());
+    act(() => bump());
+
+    expect(renders()).toBe(SECTIONS);
+    expect(container.querySelector('[role="document"]')).toBe(document);
+    expect(document?.innerHTML).toBe(html);
+  });
+
+  it('re-renders when the text changes', () => {
+    const {components, renders} = createCountingComponents();
+    const {rerender, getAllByTestId} = render(
+      <Markdown components={components}>{longDocument(2)}</Markdown>,
+    );
+    expect(renders()).toBe(2);
+    rerender(
+      <Markdown components={components}>
+        {`${longDocument(2)}\n\n\`\`\`ts\nconst added = true;\n\`\`\``}
+      </Markdown>,
+    );
+    expect(getAllByTestId('code')).toHaveLength(3);
+    expect(getAllByTestId('code')[2].textContent).toBe('const added = true;');
+  });
+
+  it('re-renders when a rendering prop changes', () => {
+    const {container, rerender} = render(
+      <Markdown headingLevelStart={1}>{'# Title'}</Markdown>,
+    );
+    expect(container.querySelector('h1')).not.toBeNull();
+    rerender(<Markdown headingLevelStart={3}>{'# Title'}</Markdown>);
+    expect(container.querySelector('h1')).toBeNull();
+    expect(container.querySelector('h3')?.textContent).toBe('Title');
+  });
+
+  it('calls the latest link handler after a re-render that reused the document', () => {
+    const first = vi.fn();
+    const latest = vi.fn(() => false as const);
+    const {container, rerender} = render(
+      <Markdown onLinkClick={first}>{'[go](/next)'}</Markdown>,
+    );
+    rerender(<Markdown onLinkClick={latest}>{'[go](/next)'}</Markdown>);
+    const link = container.querySelector('a');
+    expect(link).not.toBeNull();
+    const event = new MouseEvent('click', {bubbles: true, cancelable: true});
+    act(() => {
+      link?.dispatchEvent(event);
+    });
+    expect(first).not.toHaveBeenCalled();
+    expect(latest).toHaveBeenCalledWith('/next', expect.anything());
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('starts and stops handling link clicks when the handler is added or removed', () => {
+    const handler = vi.fn();
+    const {container, rerender} = render(<Markdown>{'[go](/next)'}</Markdown>);
+    rerender(<Markdown onLinkClick={handler}>{'[go](/next)'}</Markdown>);
+    fireEvent.click(container.querySelector('a') as HTMLAnchorElement);
+    expect(handler).toHaveBeenCalledTimes(1);
+    rerender(<Markdown>{'[go](/next)'}</Markdown>);
+    fireEvent.click(container.querySelector('a') as HTMLAnchorElement);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});

package/src/Markdown/Markdown.tsx

@@ -41,6 +41,7 @@ import {TableHeaderCell} from '../Table/TableHeaderCell';
 import {TableHeader} from '../Table/TableHeader';
 import {TableBody} from '../Table/TableBody';
 import {mergeProps} from '../utils';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {useStreamingText} from '../hooks/useStreamingText';
 import {computeBoundaries, computeSegments} from './streaming';
 import type {BaseProps} from '../BaseProps';
@@ -2122,6 +2123,21 @@ export function Markdown<
 }: MarkdownProps<Plugins>): React.ReactElement {
   const t = useTranslator();
   const LinkComponent = useLinkComponent();
+  // Links read the caller's handler when clicked, so a handler recreated on
+  // every caller render does not invalidate the memoized document below.
+  // Only whether a handler exists changes the rendered links.
+  const onLinkClickRef = useRef(onLinkClick);
+  useIsomorphicLayoutEffect(() => {
+    onLinkClickRef.current = onLinkClick;
+  });
+  const hasLinkClick = onLinkClick != null;
+  const stableOnLinkClick = useMemo<MarkdownProps['onLinkClick']>(
+    () =>
+      hasLinkClick
+        ? (href, event) => onLinkClickRef.current?.(href, event)
+        : undefined,
+    [hasLinkClick],
+  );
   // Derive the set of source IDs for the parser (stable across renders when sources don't change)
   const sourceIds = useMemo(
     () => (sources ? new Set(Object.keys(sources)) : undefined),
@@ -2327,19 +2343,80 @@ export function Markdown<
     return next;
   }, [display, smoothedLen, maxSpans]);
 
-  const cursor: StreamingCursor = {
-    offset: 0,
-    boundaries,
-    active: isStreaming,
-  };
-
-  // Build citation context — numbers are assigned in encounter order during rendering.
-  // This is recreated each render so numbering stays consistent with the AST.
-  const citationCtx: CitationContext | null = sources
-    ? {sources, numberMap: new Map(), nextNumber: 1, style: citationStyle}
+  const contentWidthValue = contentWidth
+    ? typeof contentWidth === 'number'
+      ? `${contentWidth}px`
+      : contentWidth
     : null;
 
+  // The block document is the expensive part of a long Markdown render. It
+  // depends only on these inputs, so a caller re-render that changes none of
+  // them returns the same elements and React skips the whole subtree. The
+  // cursor and citation numbering are rebuilt inside, from the start of the
+  // document, exactly as a full render builds them.
+  const renderedBlocks = useMemo(() => {
+    if (display === 'inline') {
+      return null;
+    }
+    const blockCursor: StreamingCursor = {
+      offset: 0,
+      boundaries,
+      active: isStreaming,
+    };
+    // Numbers are assigned in encounter order during rendering.
+    const blockCitationCtx: CitationContext | null = sources
+      ? {sources, numberMap: new Map(), nextNumber: 1, style: citationStyle}
+      : null;
+    return blocks.map((block, i) =>
+      renderBlock(
+        block,
+        i,
+        blocks.length,
+        density,
+        headingLevelStart,
+        stableOnLinkClick,
+        blockCursor,
+        blockCitationCtx,
+        contentWidthValue,
+        contentAlign,
+        LinkComponent,
+        inlinePlugins,
+        components,
+        preparedPlugins,
+        t,
+        headingProjection,
+      ),
+    );
+  }, [
+    display,
+    blocks,
+    boundaries,
+    isStreaming,
+    sources,
+    citationStyle,
+    density,
+    headingLevelStart,
+    stableOnLinkClick,
+    contentWidthValue,
+    contentAlign,
+    LinkComponent,
+    inlinePlugins,
+    components,
+    preparedPlugins,
+    t,
+    headingProjection,
+  ]);
+
   if (display === 'inline') {
+    const cursor: StreamingCursor = {
+      offset: 0,
+      boundaries,
+      active: isStreaming,
+    };
+    // Numbers are assigned in encounter order during rendering.
+    const citationCtx: CitationContext | null = sources
+      ? {sources, numberMap: new Map(), nextNumber: 1, style: citationStyle}
+      : null;
     const renderedInline = (
       <span
         ref={ref}
@@ -2357,7 +2434,7 @@ export function Markdown<
           renderInline(
             node,
             i,
-            onLinkClick,
+            stableOnLinkClick,
             cursor,
             citationCtx,
             LinkComponent,
@@ -2391,30 +2468,7 @@ export function Markdown<
         className,
         style,
       )}>
-      {blocks.map((block, i) =>
-        renderBlock(
-          block,
-          i,
-          blocks.length,
-          density,
-          headingLevelStart,
-          onLinkClick,
-          cursor,
-          citationCtx,
-          contentWidth
-            ? typeof contentWidth === 'number'
-              ? `${contentWidth}px`
-              : contentWidth
-            : null,
-          contentAlign,
-          LinkComponent,
-          inlinePlugins,
-          components,
-          preparedPlugins,
-          t,
-          headingProjection,
-        ),
-      )}
+      {renderedBlocks}
     </div>
   );
 

package/src/MultiSelector/MultiSelector.disabledFocus.a11y.chromium.spec.ts

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MultiSelector.disabledFocus.a11y.chromium.spec.ts
+ * @input The `Core/MultiSelector` Default story in a built Storybook.
+ * @output Real-engine proof of `spec:AST-085` FR4: a trigger disabled while it
+ *   holds keyboard focus keeps focus and reports itself disabled.
+ * @position Run with `pnpm test:a11y-contract`; a DOM emulator does not move
+ *   focus off an element that becomes disabled, so it cannot show the loss.
+ */
+
+import {expect, test} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+test('a focused trigger keeps focus when it becomes disabled', async ({
+  page,
+}) => {
+  const storyId = 'core-multiselector--default';
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`,
+  );
+  const trigger = page.getByRole('combobox', {name: 'Columns'});
+  await trigger.focus();
+  await expect(trigger).toBeFocused();
+
+  await page.evaluate(id => {
+    const channel = (
+      window as unknown as {
+        __STORYBOOK_ADDONS_CHANNEL__?: {
+          emit: (event: string, payload: unknown) => void;
+        };
+      }
+    ).__STORYBOOK_ADDONS_CHANNEL__;
+    if (channel == null) {
+      throw new Error('Storybook channel is unavailable');
+    }
+    channel.emit('updateStoryArgs', {
+      storyId: id,
+      updatedArgs: {isDisabled: true},
+    });
+  }, storyId);
+
+  // Wait for the disabled re-render in either form, so focus is checked
+  // after it lands.
+  await expect
+    .poll(async () =>
+      trigger.evaluate(
+        el =>
+          el.hasAttribute('disabled') ||
+          el.getAttribute('aria-disabled') === 'true',
+      ),
+    )
+    .toBe(true);
+  await expect(trigger).toBeFocused();
+});

package/src/MultiSelector/MultiSelector.doc.mjs

@@ -304,7 +304,7 @@ export const docs = {
           name: 'disabledMessage',
           type: 'string',
           description:
-            'Explains why the selector is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the trigger focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled MultiSelector in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
+            'Explains why the selector is disabled. With isDisabled, shows the reason as a tooltip on hover and keyboard focus of the trigger, which stays focusable (aria-disabled) like every disabled selector; activation stays blocked. Use this instead of wrapping a disabled MultiSelector in Tooltip.',
         },
         {
           name: 'isLabelHidden',
@@ -511,7 +511,7 @@ export const docs = {
       {
         guidance: false,
         description:
-          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled. Use the disabledMessage prop, which attaches the reason to the trigger itself.',
       },
     ],
   },
@@ -552,7 +552,7 @@ export const docsZh = {
         htmlName:
           '用于表单提交的 HTML name 属性。为每个已选值渲染一个隐藏输入，类似原生多选。',
         disabledMessage:
-          '解释选择器被禁用的原因。与 isDisabled 一起使用时，悬停/键盘聚焦时显示工具提示，并通过 aria-disabled 保持触发器可聚焦（仍无法激活）。请使用此属性，而不是用 Tooltip 包裹被禁用的选择器。',
+          '解释选择器被禁用的原因。与 isDisabled 一起使用时，悬停/键盘聚焦时显示工具提示，触发器与所有被禁用的选择器一样通过 aria-disabled 保持可聚焦（仍无法激活）。请使用此属性，而不是用 Tooltip 包裹被禁用的选择器。',
         isLabelHidden: '视觉上隐藏标签同时保持其可访问性。',
         description: '标签下方显示的辅助文本。',
         isOptional: '将字段标记为可选。',
@@ -619,7 +619,7 @@ export const docsZh = {
       {
         guidance: false,
         description:
-          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled. Use the disabledMessage prop, which attaches the reason to the trigger itself.',
       },
     ],
   },
@@ -674,7 +674,7 @@ export const docsDense = {
       {
         guidance: false,
         description:
-          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled. Use the disabledMessage prop, which attaches the reason to the trigger itself.',
       },
     ],
   },

package/src/MultiSelector/MultiSelector.focusableDisabled.test.tsx

@@ -0,0 +1,121 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MultiSelector.focusableDisabled.test.tsx
+ * @input Uses vitest, @testing-library/react, StyleX, MultiSelector
+ * @output Conformance tests for spec:AST-085 FR1–FR3 and FR6 on MultiSelector;
+ *   FR4 needs a real engine (MultiSelector.disabledFocus.a11y.chromium.spec.ts)
+ * @position Testing; validates the disabled trigger of MultiSelector.tsx
+ */
+
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '../theme/tokens.stylex';
+import {MultiSelector} from './MultiSelector';
+
+type Handler = () => void;
+function Harness(props: {
+  isDisabled: boolean;
+  variant?: 'input' | 'secondary' | 'ghost';
+  onClick?: Handler;
+  onKeyDown?: Handler;
+  onMouseDown?: Handler;
+  onDoubleClick?: Handler;
+}) {
+  return (
+    <form aria-label="Form">
+      <button type="button">Before</button>
+      <MultiSelector
+        label="Fruit"
+        htmlName="fruit"
+        options={['Apple', 'Banana']}
+        value={['Banana']}
+        onChange={() => {}}
+        {...props}
+      />
+      <button type="button">After</button>
+    </form>
+  );
+}
+
+const trigger = () => screen.getByRole('combobox', {name: 'Fruit'});
+
+describe('MultiSelector disabled (spec:AST-085)', () => {
+  it('FR1: renders no native disabled and keeps its tab stop', async () => {
+    const user = userEvent.setup();
+    const {container} = render(<Harness isDisabled />);
+    expect(container.querySelector('[disabled]')).toBeNull();
+    expect(trigger()).toHaveAttribute('aria-disabled', 'true');
+    await user.click(screen.getByRole('button', {name: 'Before'}));
+    await user.tab();
+    expect(trigger()).toHaveFocus();
+    await user.tab();
+    expect(screen.getByRole('button', {name: 'After'})).toHaveFocus();
+  });
+
+  it('FR2: no press or key opens it or reaches a caller or ancestor handler', async () => {
+    const user = userEvent.setup();
+    const handlers = {
+      onClick: vi.fn(),
+      onKeyDown: vi.fn(),
+      onMouseDown: vi.fn(),
+      onDoubleClick: vi.fn(),
+    };
+    const onAncestorClick = vi.fn();
+    render(
+      <div onClick={onAncestorClick}>
+        <Harness isDisabled {...handlers} />
+      </div>,
+    );
+    await user.dblClick(trigger());
+    trigger().focus();
+    for (const key of ['{Enter}', ' ', '{ArrowDown}', 'b']) {
+      await user.keyboard(key);
+    }
+    expect(trigger()).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('listbox')).toBeNull();
+    for (const handler of [...Object.values(handlers), onAncestorClick]) {
+      expect(handler).not.toHaveBeenCalled();
+    }
+  });
+
+  it('FR3: submits no value while disabled', () => {
+    const {rerender} = render(<Harness isDisabled={false} />);
+    const form = () =>
+      screen.getByRole<HTMLFormElement>('form', {name: 'Form'});
+    expect(new FormData(form()).getAll('fruit')).toEqual(['Banana']);
+    rerender(<Harness isDisabled />);
+    expect(new FormData(form()).getAll('fruit')).toEqual([]);
+  });
+
+  // jsdom cannot match `:focus-visible`: compare the ring's StyleX class hash.
+  const RING = stylex
+    .props(
+      stylex.create({
+        ring: {
+          boxShadow: {
+            default: null,
+            ':has(> [aria-disabled="true"]:focus-visible)': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+          },
+        },
+      }).ring,
+    )
+    .className!.split(' ')
+    .pop()!;
+
+  it.each([
+    ['input', true],
+    ['secondary', false],
+    ['ghost', false],
+  ] as const)(
+    'FR6: a disabled %s trigger carries its own ring: %s',
+    (variant, ring) => {
+      render(<Harness isDisabled variant={variant} />);
+      const wrapper = trigger().parentElement!;
+      expect(wrapper.classList.contains(RING)).toBe(ring);
+      expect(getComputedStyle(wrapper).cursor).toBe('default');
+    },
+  );
+});

package/src/MultiSelector/MultiSelector.test.tsx

@@ -35,7 +35,7 @@ import {generateThemeCSS} from '../theme/generateThemeRules';
 import {selectorPresentationStyles} from '../Selector/selectorPresentation.stylex';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {InputGroup, InputGroupText} from '../InputGroup';
-import {focusVars} from '../theme/tokens.stylex';
+import {colorVars, focusVars} from '../theme/tokens.stylex';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -210,6 +210,45 @@ describe('MultiSelector', () => {
     );
   });
 
+  it('shows no disabled focus ring after a pointer pick (spec:AST-085 FR6)', async () => {
+    const field = (isDisabled: boolean) => (
+      <MultiSelector
+        label="Fruit"
+        options={defaultOptions}
+        value={[]}
+        onChange={() => {}}
+        presentation="bottom-sheet"
+        isDisabled={isDisabled}
+      />
+    );
+    const {rerender} = render(field(false));
+    const trigger = screen.getByRole('combobox');
+    fireEvent.pointerDown(trigger, {pointerType: 'touch'});
+    fireEvent.click(trigger, {detail: 1});
+    const dialog = await screen.findByRole('dialog', {name: 'Fruit'});
+    fireEvent.pointerDown(dialog, {pointerType: 'touch'});
+    fireEvent.click(dialog, {detail: 1});
+    rerender(field(true));
+    const ring = stylex
+      .props(
+        stylex.create({
+          ring: {
+            boxShadow: {
+              default: null,
+              ':has(> [aria-disabled="true"]:focus-visible)': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+            },
+          },
+        }).ring,
+      )
+      .className!.split(' ')
+      .pop()!;
+    const wrapper = screen.getByRole('combobox').parentElement!;
+    expect(wrapper).toHaveClass(
+      stylex.props(selectorPresentationStyles.pointerRestoredFocus).className!,
+    );
+    expect(wrapper).not.toHaveClass(ring);
+  });
+
   it('renders with label', () => {
     render(
       <MultiSelector
@@ -515,7 +554,9 @@ describe('MultiSelector', () => {
         isDisabled
       />,
     );
-    expect(screen.getByRole('combobox')).toBeDisabled();
+    const trigger = screen.getByRole('combobox');
+    expect(trigger).not.toHaveAttribute('disabled');
+    expect(trigger).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('has correct ARIA attributes', () => {
@@ -1602,7 +1643,7 @@ describe('MultiSelector', () => {
       expect(screen.getByRole('combobox')).toHaveFocus();
     });
 
-    it('trigger is not focusable when disabled', () => {
+    it('trigger keeps its tab stop when disabled (spec:AST-085 FR1)', () => {
       render(
         <MultiSelector
           label="Fruit"
@@ -1612,7 +1653,7 @@ describe('MultiSelector', () => {
           isDisabled
         />,
       );
-      expect(screen.getByRole('combobox')).toHaveAttribute('tabIndex', '-1');
+      expect(screen.getByRole('combobox')).toHaveAttribute('tabIndex', '0');
     });
 
     it('opens the listbox with ArrowDown from a focused trigger', async () => {
@@ -2076,7 +2117,7 @@ describe('MultiSelector', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
-    it('remains non-focusable when disabled without a reason', () => {
+    it('stays focusable when disabled without a reason (spec:AST-085 FR1)', () => {
       render(
         <MultiSelector
           label="Fruit"
@@ -2087,8 +2128,9 @@ describe('MultiSelector', () => {
         />,
       );
       const trigger = screen.getByRole('combobox');
-      expect(trigger).toBeDisabled();
-      expect(trigger).toHaveAttribute('tabIndex', '-1');
+      expect(trigger).not.toHaveAttribute('disabled');
+      expect(trigger).toHaveAttribute('aria-disabled', 'true');
+      expect(trigger).toHaveAttribute('tabIndex', '0');
     });
   });
   describe('isReadOnly', () => {