@astryxdesign/core 0.7.3-canary.f94e962 → 0.7.3

package/src/Chat/ChatComposer.tsx

@@ -26,6 +26,7 @@
 import React, {
   useState,
   useCallback,
+  useEffect,
   useRef,
   useMemo,
   type ReactNode,
@@ -53,6 +54,7 @@ import type {ChatComposerInputControl} from './ChatContext';
 import {ChatSendButton} from './ChatSendButton';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import {useAnnounce} from '../hooks/useAnnounce';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {
   getInteractionModality,
@@ -455,9 +457,31 @@ export function ChatComposer(props: ChatComposerProps) {
     [],
   );
 
+  // The status bar mounts together with its message, and a live region born
+  // holding its text is not reliably announced, so the message goes through
+  // the shared channel instead: errors assertively, warnings politely
+  // (spec:AST-086 FR2, FR5). The ref keeps a rerender or a StrictMode effect
+  // replay from repeating it; clearing the status re-arms it, so the same
+  // message shown again is a new occasion (FR6).
+  const announce = useAnnounce();
+  const statusType = status?.type;
+  const statusMessage = status?.message;
+  const announcedStatusRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!statusMessage) {
+      announcedStatusRef.current = null;
+      return;
+    }
+    const occasion = `${statusType}\u0000${statusMessage}`;
+    if (announcedStatusRef.current === occasion) {
+      return;
+    }
+    announcedStatusRef.current = occasion;
+    announce(statusMessage, statusType === 'error' ? 'assertive' : 'polite');
+  }, [announce, statusType, statusMessage]);
+
   const statusEl = status ? (
     <div
-      role={status.type === 'error' ? 'alert' : 'status'}
       {...stylex.props(
         styles.statusBar,
         statusPosition === 'top' ? styles.statusTop : styles.statusBottom,

package/src/Chat/ChatSystemMessage.doc.mjs

@@ -52,7 +52,7 @@ export const docs = {
   },
   usage: {
     description:
-      'Use ChatSystemMessage for concise, non-sender content inside a chat transcript. Choose the default variant for factual status notices and the divider variant for date or section breaks. Long default content wraps within the available width. The component exposes status semantics and the divider branch includes a labelled separator.',
+      'Use ChatSystemMessage for concise, non-sender content inside a chat transcript. Choose the default variant for factual status notices and the divider variant for date or section breaks. Long default content wraps within the available width. It carries no live role: inside a ChatMessageList, the log announces new notices. The divider branch includes a labelled separator.',
     bestPractices: [
       {
         guidance: true,

package/src/Chat/ChatSystemMessage.test.tsx

@@ -4,6 +4,7 @@ import {createRef, Fragment} from 'react';
 import {describe, expect, it} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import * as stylex from '@stylexjs/stylex';
+import {ChatMessageList} from './ChatMessageList';
 import {ChatSystemMessage} from './ChatSystemMessage';
 
 const xstyleProbe = stylex.create({
@@ -100,7 +101,7 @@ describe('ChatSystemMessage', () => {
       expect(root).toHaveStyle({outlineOffset: '3px'});
       expectProbeClasses(root);
       expect(root).toHaveAttribute('aria-label', `${variant} system message`);
-      expect(root).toHaveAttribute('role', 'status');
+      expect(root).toHaveAttribute('role', 'note');
       expect(root).toHaveAttribute('data-variant', variant);
     },
   );
@@ -125,7 +126,7 @@ describe('ChatSystemMessage', () => {
       </ChatSystemMessage>,
     );
     const root = screen.getByTestId('empty-partition');
-    expect(root).toHaveAttribute('role', 'status');
+    expect(root).not.toHaveAttribute('role');
     expect(root).toHaveTextContent(text);
   });
 
@@ -148,7 +149,7 @@ describe('ChatSystemMessage', () => {
       </ChatSystemMessage>,
     );
     const root = screen.getByTestId('empty-partition');
-    expect(root).toHaveAttribute('role', 'status');
+    expect(root).not.toHaveAttribute('role');
     expect(root).toContainElement(screen.getByRole('separator'));
   });
 
@@ -164,4 +165,25 @@ describe('ChatSystemMessage', () => {
     expect(separator).toHaveAccessibleName('0');
     expect(separator).toHaveAttribute('aria-labelledby');
   });
+
+  it.each(['default', 'divider'] as const)(
+    'leaves a %s row inside a chat log to the log (spec:AST-086 FR4)',
+    variant => {
+      render(
+        <ChatMessageList>
+          <ChatSystemMessage variant={variant} data-testid="notice">
+            Ana joined
+          </ChatSystemMessage>
+        </ChatMessageList>,
+      );
+      const notice = screen.getByTestId('notice');
+      expect(notice.closest('[role="log"]')).not.toBeNull();
+      for (const el of [notice, ...notice.querySelectorAll('*')]) {
+        expect(el).not.toHaveAttribute('aria-live');
+        expect(['status', 'alert', 'log']).not.toContain(
+          el.getAttribute('role'),
+        );
+      }
+    },
+  );
 });

package/src/Chat/ChatSystemMessage.tsx

@@ -104,6 +104,10 @@ const styles = stylex.create({
  * "user joined", status changes. Supports a divider variant with horizontal
  * lines on each side of the text.
  *
+ * It carries no live role: a notice added to a `ChatMessageList` is announced
+ * by the list's log, which owns content added inside it (`spec:AST-086` FR4),
+ * and a date or divider row is ordinary transcript content.
+ *
  * @example
  * ```
  * <ChatSystemMessage>Conversation started</ChatSystemMessage>
@@ -131,8 +135,7 @@ export function ChatSystemMessage({
           className,
           styleProp,
         )}
-        {...rest}
-        role="status">
+        {...rest}>
         <Divider label={children} />
       </div>
     );
@@ -147,8 +150,7 @@ export function ChatSystemMessage({
         className,
         styleProp,
       )}
-      {...rest}
-      role="status">
+      {...rest}>
       <span {...stylex.props(styles.content)}>
         {icon != null && <span {...stylex.props(styles.icon)}>{icon}</span>}
         {children}

package/src/Chat/__tests__/ChatSystemMessage.a11y.chromium.spec.ts

@@ -458,7 +458,8 @@ async function capture(
     forcedColors: false,
     coarsePointer: options.coarsePointer ?? false,
     touchPoints: options.touchPoints ?? false,
-    role: 'status',
+    // No live role of its own: the chat log delivers it (spec:AST-086 FR4).
+    role: null,
     variant: auditCase.variant,
     text: auditCase.text,
     separatorCount: auditCase.variant === 'divider' ? 1 : 0,
@@ -488,7 +489,7 @@ async function capture(
   check(actual.selectorCount === 1, 'expected exactly one audit subject');
   check(actual.visible, 'audit subject has no visible geometry');
   check(actual.text === expected.text, 'visible content drifted');
-  check(actual.role === expected.role, 'status role drifted');
+  check(actual.role === expected.role, 'root role drifted');
   check(actual.variant === expected.variant, 'variant reflection drifted');
   check(
     actual.separatorCount === expected.separatorCount,
@@ -915,11 +916,11 @@ test.afterAll(async () => {
           },
           emptyContentPartitions: {
             emptyString:
-              'Focused unit evidence: the default variant keeps role=status and renders the content unchanged (empty). In the divider variant, the status root and separator remain; no visible label or accessible name is produced.',
+              'Focused unit evidence: the default variant has no root role and renders the content unchanged (empty). In the divider variant, the root and separator remain; no visible label or accessible name is produced.',
             numericZero:
-              'Focused unit evidence: the default variant keeps role=status and renders the content unchanged as one 0. In the divider variant, the status root and separator remain; Divider paints two zero text nodes (textContent="00") with no accessible name.',
+              'Focused unit evidence: the default variant has no root role and renders the content unchanged as one 0. In the divider variant, the root and separator remain; Divider paints two zero text nodes (textContent="00") with no accessible name.',
             emptyFragment:
-              'Focused unit evidence: the default variant keeps role=status and renders the content unchanged (empty). In the divider variant, the status root and separator remain; no visible label or accessible name is produced.',
+              'Focused unit evidence: the default variant has no root role and renders the content unchanged (empty). In the divider variant, the root and separator remain; no visible label or accessible name is produced.',
           },
           sharedAdvisories: {
             dividerFalseyLabel:
@@ -933,9 +934,7 @@ test.afterAll(async () => {
             forcedColors:
               'Forced-colors rendering was not exercised. The default row makes no support claim, and the disappearing Divider rule is a shared component:Divider advisory.',
             assistiveTechnology:
-              'Browser role exposure is measured, but spoken announcement timing and output were not verified with real assistive technology.',
-            nestedLiveRegions:
-              'The nested-log frame records role=status inside ChatMessageList role=log aria-live=polite, but double-announcement behavior is unverified under spec:AST-009/FR4 and FR10.',
+              'Browser role exposure is measured; spoken output was not recorded with real assistive technology, which spec:AST-009 does not require for routing claims.',
           },
           stateVisualConformance: {
             default: ['text', 'text-with-icon', 'wrapped-long-content'],
@@ -943,7 +942,7 @@ test.afterAll(async () => {
               'labelled-separator',
               'unresolved-divider-icon-observation',
             ],
-            nestedLiveLog: ['status-inside-polite-log-unverified'],
+            nestedLiveLog: ['no-live-role-inside-polite-log'],
             colorModes: ['light', 'dark'],
             narrowCoarsePointer: [
               'default-with-icon',

package/src/CheckboxList/__tests__/CheckboxList.a11y.chromium.spec.ts

@@ -10,7 +10,8 @@
  *   indicators, row paint, hit targets, wrapping, list structure) are recorded
  *   for the audit and never gate. Only frames that prove a shipped remediation
  *   gate on its outcome. The select-all CLI block renders through its own
- *   story, and its source blob is bound in the manifest.
+ *   story, and its source blob is bound in the manifest. Disabled rows expect
+ *   focusable aria-disabled controls under AST-085 FR1 and FR7.
  */
 
 import {createHash} from 'node:crypto';
@@ -271,9 +272,9 @@ const CASES: AuditCase[] = [
     expect: {
       groupName: GROUP,
       rows: [
-        {checked: true, disabled: 'native'},
-        {checked: false, disabled: 'native'},
-        {checked: false, disabled: 'native'},
+        {checked: true, disabled: 'focusable'},
+        {checked: false, disabled: 'focusable'},
+        {checked: false, disabled: 'focusable'},
       ],
     },
   },
@@ -285,7 +286,7 @@ const CASES: AuditCase[] = [
       groupName: GROUP,
       rows: [
         {checked: false, disabled: false},
-        {checked: false, disabled: 'native'},
+        {checked: false, disabled: 'focusable'},
         {checked: false, disabled: false},
       ],
     },
@@ -471,7 +472,7 @@ const CASES: AuditCase[] = [
       rows: [
         {checked: true},
         {checked: false},
-        {checked: false, disabled: 'native'},
+        {checked: false, disabled: 'focusable'},
       ],
     },
   },

package/src/CodeBlock/CodeBlock.highlightStyles.test.tsx

@@ -0,0 +1,87 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeBlock.highlightStyles.test.tsx
+ * @input Uses vitest, @testing-library/react, CodeBlock, a mocked CSS Custom Highlight API
+ * @output Tests that the ::highlight() rules exist before a commit's layout effects run
+ * @position Performance regression evidence. Rules inserted after layout
+ *   effects make the browser restyle the whole document a second time once
+ *   any layout effect has read style, so their insertion point is pinned here.
+ */
+
+import {useLayoutEffect} from 'react';
+import {cleanup, render} from '@testing-library/react';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+class MockHighlight extends Set<Range> {}
+const realCss = globalThis.CSS;
+
+const STYLE_SELECTOR = 'style[data-astryx-highlight-styles]';
+
+beforeEach(() => {
+  // A fresh module instance, so the once-per-document insertion flag starts
+  // unset in every test.
+  vi.resetModules();
+  document.head.querySelectorAll(STYLE_SELECTOR).forEach(el => el.remove());
+  const highlights = new Map<string, MockHighlight>();
+  globalThis.CSS = {
+    escape: realCss.escape,
+    highlights: {
+      get: (name: string) => highlights.get(name),
+      set: (name: string, h: MockHighlight) => highlights.set(name, h),
+    } as unknown as HighlightRegistry,
+  } as typeof CSS;
+  vi.stubGlobal('Highlight', MockHighlight);
+});
+
+afterEach(() => {
+  cleanup();
+  globalThis.CSS = realCss;
+  vi.unstubAllGlobals();
+});
+
+describe('CodeBlock ::highlight() rules', () => {
+  it('are in the document before layout effects in the same commit run', async () => {
+    const {CodeBlock} = await import('./CodeBlock');
+    const seen: boolean[] = [];
+    function LayoutReader() {
+      useLayoutEffect(() => {
+        seen.push(document.head.querySelector(STYLE_SELECTOR) != null);
+      }, []);
+      return null;
+    }
+    render(
+      <>
+        <CodeBlock code="const a = 1;" language="ts" highlightMode="ranges" />
+        <LayoutReader />
+      </>,
+    );
+    expect(seen).toEqual([true]);
+  });
+
+  it('are inserted once for many code blocks', async () => {
+    const {CodeBlock} = await import('./CodeBlock');
+    render(
+      <>
+        {Array.from({length: 20}, (_, i) => (
+          <CodeBlock
+            key={i}
+            code={`const v${i} = ${i};`}
+            language="ts"
+            highlightMode="ranges"
+          />
+        ))}
+      </>,
+    );
+    expect(document.head.querySelectorAll(STYLE_SELECTOR)).toHaveLength(1);
+  });
+
+  it('are not inserted by range highlighting without the Highlight API', async () => {
+    vi.stubGlobal('Highlight', undefined);
+    const {CodeBlock} = await import('./CodeBlock');
+    render(
+      <CodeBlock code="const a = 1;" language="ts" highlightMode="ranges" />,
+    );
+    expect(document.head.querySelector(STYLE_SELECTOR)).toBeNull();
+  });
+});

package/src/CodeBlock/CodeBlock.tsx

@@ -803,11 +803,21 @@ function RangeCodeContent({
 }) {
   const codeRef = useRef<HTMLElement>(null);
 
+  // Insert the ::highlight() rules before the commit's layout reads, as the
+  // span path does. Inserted later, the new rules restyle the whole document
+  // a second time after any layout read in the same commit has already
+  // styled it, which on a long page full of code blocks costs a full style
+  // recalculation.
+  useInsertionEffect(() => {
+    if (hasHighlightAPI()) {
+      ensureHighlightStyles();
+    }
+  }, []);
+
   useEffect(() => {
     if (!hasHighlightAPI()) {
       return;
     }
-    ensureHighlightStyles();
 
     const codeEl = codeRef.current;
     if (!codeEl || tokenLines.length === 0) {

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -45,14 +45,15 @@ export const docs = {
     {
       name: 'isDisabled',
       type: 'boolean',
-      description: 'Disable the trigger and picker.',
+      description:
+        'Disable the trigger and picker. The trigger stays focusable and exposes `aria-disabled`; opening is blocked.',
       default: 'false',
     },
     {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateRangeInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and describes the trigger (activation stays blocked). Use this instead of wrapping a disabled DateRangeInput in Tooltip.',
     },
     {
       name: 'value',
@@ -240,7 +241,7 @@ export const docs = {
       {
         guidance: false,
         description:
-          'Wrap a disabled DateRangeInput 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 DateRangeInput in Tooltip to explain why it is disabled. Use the disabledMessage prop instead, which ties the reason to the field.',
       },
     ],
     anatomy: [
@@ -344,7 +345,7 @@ export const docsDense = {
       {
         guidance: false,
         description:
-          'Wrap a disabled DateRangeInput 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 DateRangeInput in Tooltip to explain why it is disabled. Use the disabledMessage prop instead, which ties the reason to the field.',
       },
     ],
   },
@@ -356,7 +357,7 @@ export const docsDense = {
     isRequired: 'mark field required',
     isDisabled: 'disable trigger+picker',
     disabledMessage:
-      'reason shown in a tooltip on hover/focus when disabled; keeps trigger focusable via aria-disabled',
+      'reason shown in a tooltip on hover/focus when disabled; describes the trigger',
     value:
       'selected range {start, end} or null; import DateRange type from @astryxdesign/core/DateRangeInput (do not redeclare)',
     onChange: 'callback on range change; null on clear',

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -23,6 +23,8 @@ function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
 // made every role+name query compute ~85 accessible names through jsdom's
 // slow getComputedStyle (~450ms per query). See fastRoleQueries.ts.
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
+import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '../theme/tokens.stylex';
 import {DateRangeInput} from './DateRangeInput';
 import type {DateRange} from './DateRangeInput';
 import {Icon} from '../Icon';
@@ -155,7 +157,46 @@ describe('DateRangeInput', () => {
       />,
     );
     const trigger = getButton(/Range/);
-    expect(trigger).toBeDisabled();
+    expect(trigger).not.toHaveAttribute('disabled');
+    expect(trigger).toHaveAttribute('aria-disabled', 'true');
+    trigger.focus();
+    expect(trigger).toHaveFocus();
+  });
+
+  it('restores the focus ring on a focused disabled field (AST-085 FR6)', () => {
+    // The same declarations as the field's ring style compile to the same
+    // atomic classes.
+    const ringClasses = stylex
+      .props(
+        stylex.create({
+          ring: {
+            borderColor: {
+              default: colorVars['--color-border-emphasized'],
+              ':focus-within': colorVars['--color-accent'],
+            },
+            boxShadow: {
+              default: 'none',
+              ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+            },
+          },
+        }).ring,
+      )
+      .className!.split(' ')
+      // Keep the atomic classes, not the dev-only debug name.
+      .filter(name => !name.includes('__'));
+    render(
+      <DateRangeInput
+        label="Range"
+        isDisabled
+        value={null}
+        onChange={() => {}}
+      />,
+    );
+    // The shared disabled style alone drops these :focus-within declarations.
+    const wrapper = getButton(/Range/).parentElement!;
+    for (const name of ringClasses) {
+      expect(wrapper).toHaveClass(name);
+    }
   });
 
   it('is not disabled by default', () => {
@@ -272,7 +313,8 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    expect(getButton('Open calendar')).toBeDisabled();
+    expect(getButton('Open calendar')).not.toHaveAttribute('disabled');
+    expect(getButton('Open calendar')).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('renders with size="lg"', () => {
@@ -526,7 +568,8 @@ describe('DateRangeInput', () => {
       );
 
       const preset = getButton('Last 7 days');
-      expect(preset).toBeDisabled();
+      expect(preset).not.toHaveAttribute('disabled');
+      expect(preset).toHaveAttribute('aria-disabled', 'true');
       fireEvent.click(preset);
       expect(handleChange).not.toHaveBeenCalled();
     });
@@ -544,7 +587,8 @@ describe('DateRangeInput', () => {
       );
 
       const preset = getButton('Last 7 days');
-      expect(preset).toBeDisabled();
+      expect(preset).not.toHaveAttribute('disabled');
+      expect(preset).toHaveAttribute('aria-disabled', 'true');
       fireEvent.click(preset);
       expect(handleChange).not.toHaveBeenCalled();
     });
@@ -562,7 +606,8 @@ describe('DateRangeInput', () => {
       );
 
       const preset = getButton('Last 7 days');
-      expect(preset).toBeDisabled();
+      expect(preset).not.toHaveAttribute('disabled');
+      expect(preset).toHaveAttribute('aria-disabled', 'true');
       fireEvent.click(preset);
       expect(handleChange).not.toHaveBeenCalled();
     });
@@ -590,7 +635,7 @@ describe('DateRangeInput', () => {
 
       const getRangeCallsBeforeClick = getRange.mock.calls.length;
       const preset = getButton('Allowed range');
-      expect(preset).not.toBeDisabled();
+      expect(preset).not.toHaveAttribute('aria-disabled');
       fireEvent.click(preset);
       expect(handleChange).toHaveBeenCalledWith(range);
       expect(getRangeCallsAtChange).toBe(getRangeCallsBeforeClick);
@@ -613,7 +658,10 @@ describe('DateRangeInput', () => {
     // accessibility tree; use hidden: true to find it.
     const h = {hidden: true} as const;
 
-    function renderDisabled(props?: {disabledMessage?: string}) {
+    function renderDisabled(props?: {
+      disabledMessage?: string;
+      onClick?: () => void;
+    }) {
       return render(
         <DateRangeInput
           label="Range"
@@ -699,11 +747,22 @@ describe('DateRangeInput', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'false');
     });
 
-    it('remains natively disabled when disabled without a reason', () => {
-      renderDisabled();
+    it('blocks activation and a caller onClick when disabled without a reason (AST-085 FR1, FR2)', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      renderDisabled({onClick});
       const trigger = getButton(/Range:/);
-      expect(trigger).toBeDisabled();
-      expect(trigger).not.toHaveAttribute('aria-disabled');
+      expect(trigger).not.toHaveAttribute('disabled');
+      await user.click(trigger);
+      await user.keyboard('{Enter}');
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('blocks the calendar button while disabled (AST-085 FR2)', () => {
+      renderDisabled();
+      fireEvent.click(getButton('Open calendar'));
+      expect(getButton(/Range:/)).toHaveAttribute('aria-expanded', 'false');
     });
   });
 });
@@ -988,13 +1047,19 @@ describe('DateRangeInput range-span forwarding', () => {
     fireEvent.click(getButton('Open calendar'));
 
     // Before a start is picked, a far-off day is selectable.
-    expect(dayButton('2026-01-20')).not.toBeDisabled();
+    expect(dayButton('2026-01-20')).not.toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
 
     fireEvent.click(dayButton('2026-01-10') as HTMLButtonElement);
 
     // A 7-day window spans start ± 6 days: Jan 16 is the edge, Jan 17 is out.
-    expect(dayButton('2026-01-16')).not.toBeDisabled();
-    expect(dayButton('2026-01-17')).toBeDisabled();
+    expect(dayButton('2026-01-16')).not.toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    expect(dayButton('2026-01-17')).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('disables a preset whose range violates the span cap', () => {
@@ -1030,9 +1095,10 @@ describe('DateRangeInput range-span forwarding', () => {
     // The 3-day preset fits the 7-day cap; the 30-day preset can't be committed.
     const withinCap = getButton('Last 3 days');
     const overCap = getButton('Last 30 days');
-    expect(withinCap).not.toBeDisabled();
+    expect(withinCap).not.toHaveAttribute('aria-disabled');
     expect(withinCap).not.toHaveAttribute('data-disabled');
-    expect(overCap).toBeDisabled();
+    expect(overCap).not.toHaveAttribute('disabled');
+    expect(overCap).toHaveAttribute('aria-disabled', 'true');
     expect(overCap).toHaveClass('astryx-date-range-input-preset');
     expect(overCap).toHaveAttribute('data-disabled', 'disabled');