@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/src/Dialog/Dialog.doc.mjs

@@ -7,7 +7,19 @@ export const docs = {
   displayName: 'Dialog',
   group: 'Dialog',
   category: 'Overlay',
-  keywords: ["dialog","modal","popup","overlay","lightbox","alert","confirm","prompt","backdrop","focus trap","imperative"],
+  keywords: [
+    'dialog',
+    'modal',
+    'popup',
+    'overlay',
+    'lightbox',
+    'alert',
+    'confirm',
+    'prompt',
+    'backdrop',
+    'focus trap',
+    'imperative',
+  ],
   // Intentionally a contained isInline preview, not playground.overlay: the
   // component stays visible on load and knobs stay live, whereas a real
   // showModal() overlay makes the page inert — see ComponentPlaygroundConfig.overlay
@@ -19,9 +31,16 @@ export const docs = {
       onOpenChange: undefined,
       width: 400,
       children: {
-        __element: 'VStack', props: {gap: 2}, children: [
+        __element: 'VStack',
+        props: {gap: 2},
+        children: [
           {__element: 'Heading', props: {level: 3}, children: 'Dialog Title'},
-          {__element: 'Text', props: {type: 'body'}, children: 'Are you sure you want to proceed? This action can be undone later from settings.'},
+          {
+            __element: 'Text',
+            props: {type: 'body'},
+            children:
+              'Are you sure you want to proceed? This action can be undone later from settings.',
+          },
         ],
       },
     },
@@ -37,7 +56,12 @@ export const docs = {
       {className: 'astryx-dialog-header-close-icon'},
     ],
     vars: [
-      {name: '--_dialog-radius', description: 'Border radius of the dialog', default: 'var(--radius-container)', private: true},
+      {
+        name: '--_dialog-radius',
+        description: 'Border radius of the dialog',
+        default: 'var(--radius-container)',
+        private: true,
+      },
     ],
     derived: [
       {property: 'borderRadius', vars: ['--_dialog-radius']},
@@ -45,7 +69,7 @@ export const docs = {
     ],
   },
   description:
-    'Modal dialog using the native <dialog> element. Modal and inline content starts with theme body text defaults. Ancestor surface/group membership ends as a whole, including group-owned state. Explicit props and unrelated contexts remain unchanged. Place intentional groups and complete required providers inside the dialog.',
+    'Modal dialog using the native <dialog> element. Modal and inline content starts with theme body text defaults. Ancestor surface/group membership ends as a whole, including group-owned state. Explicit props and unrelated contexts remain unchanged. Place intentional groups and complete required providers inside the dialog. With reduced motion the dialog never slides or scales in: on a touch screen it fades in, in 200 ms or less, and with a mouse it appears at once.',
   props: [
     {
       name: 'isOpen',
@@ -68,13 +92,15 @@ export const docs = {
     {
       name: 'width',
       type: 'number | string',
-      description: 'Preferred width of the dialog in pixels or any CSS value. Standard dialogs clamp to their container and the dynamic viewport with spacing-token gutters so narrow viewports keep content on screen.',
+      description:
+        'Preferred width of the dialog in pixels or any CSS value. Standard dialogs clamp to their container and the dynamic viewport with spacing-token gutters so narrow viewports keep content on screen.',
       default: '400',
     },
     {
       name: 'maxHeight',
       type: 'number | string',
-      description: 'Maximum height of the dialog. Defaults to a dynamic viewport value so browser UI changes are reflected where supported.',
+      description:
+        'Maximum height of the dialog. Defaults to a dynamic viewport value so browser UI changes are reflected where supported.',
       default: "'75dvh'",
     },
     {
@@ -87,47 +113,97 @@ export const docs = {
     {
       name: 'variant',
       type: "'standard' | 'fullscreen'",
-      description: 'Dialog variant: fullscreen expands to fill the entire viewport.',
+      description:
+        'Dialog variant: fullscreen expands to fill the entire viewport.',
       default: "'standard'",
     },
     {
       name: 'purpose',
       type: "'required' | 'form' | 'info'",
-      description: 'Controls dismissal behavior: required disables Escape and backdrop click; form disables backdrop click after interaction; info allows both.',
+      description:
+        'Controls dismissal behavior: required disables Escape and backdrop click; form disables backdrop click after interaction; info allows both.',
       default: "'info'",
     },
     {
       name: 'padding',
       type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-      description: 'Internal padding of the dialog using the spacing scale step.',
+      description:
+        'Internal padding of the dialog using the spacing scale step.',
     },
     {
       name: 'isInline',
       type: 'boolean',
-      description: 'Renders dialog content inline without the <dialog> element, backdrop, or modal behavior. For documentation previews and showcases only.',
+      description:
+        'Renders dialog content inline without the <dialog> element, backdrop, or modal behavior. For documentation previews and showcases only.',
       default: 'false',
     },
   ],
-  components: [
-    {name: 'DialogHeader'},
-    {name: 'useImperativeDialog'},
-  ],
+  components: [{name: 'DialogHeader'}, {name: 'useImperativeDialog'}],
   usage: {
-    description: 'Dialog displays a modal overlay that blocks interaction with the page until the user responds. Use it for delete confirmations, edit forms, terms acceptance, or any decision that should not be skipped.\n\nFor cases where you want to show a dialog without managing open state, use the `useImperativeDialog` hook: call `dialog.show(content)` and render `dialog.element` in your tree.',
+    description:
+      'Dialog displays a modal overlay that blocks interaction with the page until the user responds. Use it for delete confirmations, edit forms, terms acceptance, or any decision that should not be skipped.\n\nFor cases where you want to show a dialog without managing open state, use the `useImperativeDialog` hook: call `dialog.show(content)` and render `dialog.element` in your tree.',
     bestPractices: [
-      { guidance: true, description: 'Choose the right purpose: info for dismissable content, form to prevent accidental backdrop dismissal, required when the user must respond.' },
-      { guidance: true, description: 'Include a clear title in the header so users immediately understand what the dialog is asking.' },
-      { guidance: true, description: 'Use purpose="form" for dialogs with inputs so the user can\'t accidentally lose data by clicking the backdrop.' },
-      { guidance: true, description: 'Keep dialogs focused on a single task; if the content grows beyond what fits, consider a full page instead.' },
-      { guidance: false, description: 'Use a dialog for simple messages that could be shown inline or as a toast notification.' },
-      { guidance: false, description: 'Nest dialogs inside other dialogs; restructure the flow into steps within a single dialog instead.' },
-      { guidance: false, description: 'Use the fullscreen variant for simple confirmations; it is meant for complex content like editors or long forms.' },
+      {
+        guidance: true,
+        description:
+          'Choose the right purpose: info for dismissable content, form to prevent accidental backdrop dismissal, required when the user must respond.',
+      },
+      {
+        guidance: true,
+        description:
+          'Include a clear title in the header so users immediately understand what the dialog is asking.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use purpose="form" for dialogs with inputs so the user can\'t accidentally lose data by clicking the backdrop.',
+      },
+      {
+        guidance: true,
+        description:
+          'Keep dialogs focused on a single task; if the content grows beyond what fits, consider a full page instead.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use a dialog for simple messages that could be shown inline or as a toast notification.',
+      },
+      {
+        guidance: false,
+        description:
+          'Nest dialogs inside other dialogs; restructure the flow into steps within a single dialog instead.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use the fullscreen variant for simple confirmations; it is meant for complex content like editors or long forms.',
+      },
     ],
     anatomy: [
-      {name: 'Header', required: true, description: 'Title, optional subtitle, and close button. The title receives focus on open and labels the dialog via aria-labelledby.'},
-      {name: 'Body', required: true, description: 'The main content area: text, forms, lists, or any layout.'},
-      {name: 'Footer', required: false, description: 'Action buttons like Save/Cancel or Accept/Decline, aligned to the end.'},
-      {name: 'Backdrop', required: true, description: 'Semi-transparent overlay behind the dialog that blocks page interaction.'},
+      {
+        name: 'Header',
+        required: true,
+        description:
+          'Title, optional subtitle, and close button. The title receives focus on open and labels the dialog via aria-labelledby.',
+      },
+      {
+        name: 'Body',
+        required: true,
+        description:
+          'The main content area: text, forms, lists, or any layout.',
+      },
+      {
+        name: 'Footer',
+        required: false,
+        description:
+          'Action buttons like Save/Cancel or Accept/Decline, aligned to the end.',
+      },
+      {
+        name: 'Backdrop',
+        required: true,
+        description:
+          'Semi-transparent overlay behind the dialog that blocks page interaction.',
+      },
     ],
   },
 };
@@ -135,39 +211,117 @@ export const docs = {
 /** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
-    description: 'Dialog displays a modal overlay that blocks interaction with the page until the user responds. Use it for delete confirmations, edit forms, terms acceptance, or any decision that should not be skipped.',
+    description:
+      'Dialog displays a modal overlay that blocks interaction with the page until the user responds. Use it for delete confirmations, edit forms, terms acceptance, or any decision that should not be skipped.',
     bestPractices: [
-      { guidance: true, description: 'Choose the right purpose: info for dismissable content, form to prevent accidental backdrop dismissal, required when the user must respond.' },
-      { guidance: true, description: 'Include a clear title in the header so users immediately understand what the dialog is asking.' },
-      { guidance: true, description: 'Use purpose="form" for dialogs with inputs so the user can\'t accidentally lose data by clicking the backdrop.' },
-      { guidance: true, description: 'Keep dialogs focused on a single task; if the content grows beyond what fits, consider a full page instead.' },
-      { guidance: false, description: 'Use a dialog for simple messages that could be shown inline or as a toast notification.' },
-      { guidance: false, description: 'Nest dialogs inside other dialogs; restructure the flow into steps within a single dialog instead.' },
-      { guidance: false, description: 'Use the fullscreen variant for simple confirmations; it is meant for complex content like editors or long forms.' },
+      {
+        guidance: true,
+        description:
+          'Choose the right purpose: info for dismissable content, form to prevent accidental backdrop dismissal, required when the user must respond.',
+      },
+      {
+        guidance: true,
+        description:
+          'Include a clear title in the header so users immediately understand what the dialog is asking.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use purpose="form" for dialogs with inputs so the user can\'t accidentally lose data by clicking the backdrop.',
+      },
+      {
+        guidance: true,
+        description:
+          'Keep dialogs focused on a single task; if the content grows beyond what fits, consider a full page instead.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use a dialog for simple messages that could be shown inline or as a toast notification.',
+      },
+      {
+        guidance: false,
+        description:
+          'Nest dialogs inside other dialogs; restructure the flow into steps within a single dialog instead.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use the fullscreen variant for simple confirmations; it is meant for complex content like editors or long forms.',
+      },
     ],
     anatomy: [
-      {name: 'Header', required: true, description: 'Title, optional subtitle, and close button. The title receives focus on open and labels the dialog via aria-labelledby.'},
-      {name: 'Body', required: true, description: 'The main content area: text, forms, lists, or any layout.'},
-      {name: 'Footer', required: false, description: 'Action buttons like Save/Cancel or Accept/Decline, aligned to the end.'},
-      {name: 'Backdrop', required: true, description: 'Semi-transparent overlay behind the dialog that blocks page interaction.'},
+      {
+        name: 'Header',
+        required: true,
+        description:
+          'Title, optional subtitle, and close button. The title receives focus on open and labels the dialog via aria-labelledby.',
+      },
+      {
+        name: 'Body',
+        required: true,
+        description:
+          'The main content area: text, forms, lists, or any layout.',
+      },
+      {
+        name: 'Footer',
+        required: false,
+        description:
+          'Action buttons like Save/Cancel or Accept/Decline, aligned to the end.',
+      },
+      {
+        name: 'Backdrop',
+        required: true,
+        description:
+          'Semi-transparent overlay behind the dialog that blocks page interaction.',
+      },
     ],
   },
 };
 
 /** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
-  description: 'modal overlay that blocks page interaction until the user responds',
+  description:
+    'modal overlay that blocks page interaction until the user responds',
   usage: {
     description:
       'Dialog displays a modal overlay that blocks page interaction. Use for delete confirmations, edit forms, terms acceptance. Modal and inline content uses theme body defaults and exits ancestor surface/group membership as a whole; explicit props and unrelated contexts remain unchanged. Provide intentional groups and complete required providers inside the dialog.',
     bestPractices: [
-      { guidance: true, description: 'Choose the right purpose: info for dismissable content, form to prevent accidental backdrop dismissal, required when user must respond.' },
-      { guidance: true, description: 'Include a clear title in the header so users immediately understand what the dialog is asking.' },
-      { guidance: true, description: 'Use purpose="form" for dialogs with inputs so user can\'t accidentally lose data by clicking the backdrop.' },
-      { guidance: true, description: 'Keep dialogs focused on a single task; if content grows beyond what fits, consider a full page instead.' },
-      { guidance: false, description: 'Use a dialog for simple messages that could be shown inline or as a toast notification.' },
-      { guidance: false, description: 'Nest dialogs inside other dialogs; restructure the flow into steps within a single dialog instead.' },
-      { guidance: false, description: 'Use the fullscreen variant for simple confirmations; it\'s meant for complex content like editors or long forms.' },
+      {
+        guidance: true,
+        description:
+          'Choose the right purpose: info for dismissable content, form to prevent accidental backdrop dismissal, required when user must respond.',
+      },
+      {
+        guidance: true,
+        description:
+          'Include a clear title in the header so users immediately understand what the dialog is asking.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use purpose="form" for dialogs with inputs so user can\'t accidentally lose data by clicking the backdrop.',
+      },
+      {
+        guidance: true,
+        description:
+          'Keep dialogs focused on a single task; if content grows beyond what fits, consider a full page instead.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use a dialog for simple messages that could be shown inline or as a toast notification.',
+      },
+      {
+        guidance: false,
+        description:
+          'Nest dialogs inside other dialogs; restructure the flow into steps within a single dialog instead.',
+      },
+      {
+        guidance: false,
+        description:
+          "Use the fullscreen variant for simple confirmations; it's meant for complex content like editors or long forms.",
+      },
     ],
   },
 };

package/src/Dialog/Dialog.tsx

@@ -16,6 +16,10 @@
  * while preserving explicit prop/theme padding overrides, and fade in without
  * the centered-dialog translate/scale motion.
  *
+ * Under reduced motion the entrance never travels or scales
+ * (docs/design/reduced-motion.md): on a touch screen the dialog fades in
+ * where it lands, in 200 ms or less; with a mouse it appears at once.
+ *
  * Initial focus and the focus returned on close follow the last input
  * (docs/architecture/interaction-modality.md INV1): the shared focus indicator
  * is hidden after a pointer press and shown after a key press.
@@ -74,6 +78,7 @@ import type {DialogVariantMap} from './index';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {focusForLastInput} from '../utils/focusReturn';
+import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 /**
@@ -186,8 +191,19 @@ const styles = stylex.create({
     height: 'fit-content',
     overscrollBehavior: 'contain',
     opacity: 0,
-    animationDuration: durationVars['--duration-medium-max'],
-    animationTimingFunction: easeVars['--ease-standard'],
+    // Under reduced motion on a touch screen the entrance is the shared
+    // reduced-motion cross-fade, 200 ms on easeInOut whatever the theme's
+    // duration (design:reduced-motion DR2, DR4). Moves to
+    // reducedMotionFadeConsts once that is on main.
+    animationDuration: {
+      default: durationVars['--duration-medium-max'],
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': '200ms',
+    },
+    animationTimingFunction: {
+      default: easeVars['--ease-standard'],
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+        'cubic-bezier(0.42, 0, 0.58, 1)',
+    },
     animationFillMode: 'backwards' as const,
   },
   // Applied via isOpen prop — avoids :where([open]) attribute selectors
@@ -196,12 +212,15 @@ const styles = stylex.create({
   open: {
     display: 'flex',
     opacity: 1,
-    // Disable the entry keyframe animation under
-    // `prefers-reduced-motion: reduce` so the dialog appears instantly
-    // instead of translating/scaling in (same pattern as layerAnimations).
+    // Under `prefers-reduced-motion: reduce` the dialog never travels or
+    // scales in (design:reduced-motion DR1): on a touch screen it fades in
+    // where it lands (DR2), and with a mouse it appears at once (DR3).
     animationName: {
       default: enterDirectional,
-      '@media (prefers-reduced-motion: reduce)': 'none',
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+        enterFullscreen,
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        'none',
     },
   },
   // Backdrop using ::backdrop pseudo-element
@@ -223,7 +242,10 @@ const styles = stylex.create({
   fullscreenOpen: {
     animationName: {
       default: enterFullscreen,
-      '@media (prefers-reduced-motion: reduce)': 'none',
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+        enterFullscreen,
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        'none',
     },
   },
   fullscreenSafeArea: {
@@ -602,6 +624,9 @@ export function Dialog({
     onDismiss: () => {
       onOpenChange(false);
     },
+    // The dialog's document is this layer's: rendered into an iframe or a
+    // Picture-in-Picture window, it ranks with the layers opened inside it.
+    getContainer: () => dialogRef.current,
   });
 
   // Dev-time guardrail: an open modal should always have an accessible name.
@@ -796,9 +821,11 @@ export function Dialog({
       // imperatively in `attachDialog`; a consumer-provided aria-labelledby
       // flows through {...safeProps} above and wins.
       {...(purpose === 'required' ? {role: 'alertdialog'} : undefined)}>
-      <LayerDepthProvider>
-        <LayerContentBoundary>{innerContent}</LayerContentBoundary>
-      </LayerDepthProvider>
+      <ModalAnnounceProvider dialogRef={dialogRef} isOpen={isOpen}>
+        <LayerDepthProvider>
+          <LayerContentBoundary>{innerContent}</LayerContentBoundary>
+        </LayerDepthProvider>
+      </ModalAnnounceProvider>
     </dialog>
   );
 }

package/src/Dialog/__tests__/Dialog.a11y.browser.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
 
 /**
  * @file Dialog.a11y.browser.spec.ts

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

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
 
 /**
  * @file Dialog.a11y.chromium.spec.ts

package/src/Dialog/__tests__/Dialog.reduced-motion.a11y.browser.spec.ts

@@ -0,0 +1,191 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
+
+/**
+ * @file Dialog.reduced-motion.a11y.browser.spec.ts
+ * @input Built Dialog and AlertDialog stories in Chromium and WebKit, with
+ *   reduced motion emulated and a coarse (touch) or fine (mouse) pointer
+ * @output Browser evidence for docs/design/reduced-motion.md: on a touch
+ *   screen the dialog's entrance is an opacity-only cross-fade of 200 ms or
+ *   less (DR1, DR2); with a mouse it appears at once (DR3)
+ * @position Cross-browser proof; jsdom computes no CSS animations.
+ *
+ * The checks are the record's Verification rows: the animations the browser
+ * runs on the dialog as it opens, read when each starts (`animationstart`),
+ * so a short cross-fade is caught however late the test looks.
+ */
+
+import {expect, test, type Page} 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();
+});
+
+interface Case {
+  story: string;
+  opener: string;
+  /** The dialog's role and name once open. */
+  role: 'dialog' | 'alertdialog';
+  name: string;
+}
+
+const cases: Case[] = [
+  {
+    story: 'core-dialog--default',
+    opener: 'Open Modal',
+    role: 'dialog',
+    name: 'Modal Title',
+  },
+  {
+    story: 'core-dialog--fullscreen',
+    opener: 'Open Fullscreen Modal',
+    role: 'dialog',
+    name: 'Fullscreen Modal',
+  },
+  {
+    story: 'core-alertdialog--delete',
+    opener: 'Delete item',
+    role: 'alertdialog',
+    name: 'Delete item?',
+  },
+];
+
+interface Entrance {
+  /** Each animation the dialog ran as it opened, read when it started. */
+  animations: {properties: string[]; durationMs: number; delayMs: number}[];
+  /** The dialog's computed opacity at the first frame after it opened. */
+  firstFrameOpacity: number;
+}
+
+/**
+ * Opens the story's dialog and returns the animations the browser ran on it,
+ * each read as it started, plus its opacity at the first frame after opening.
+ */
+async function openDialog(
+  page: Page,
+  {story, opener, role, name}: Case,
+): Promise<Entrance> {
+  await page.goto(`${storybook.origin}/iframe.html?id=${story}&viewMode=story`);
+  await page.getByRole('button', {name: opener}).waitFor();
+  await page.evaluate(() => {
+    const seen: Entrance['animations'] = [];
+    (window as unknown as {__entrance: typeof seen}).__entrance = seen;
+    document.addEventListener(
+      'animationstart',
+      event => {
+        const target = event.target as Element;
+        if (target.tagName !== 'DIALOG') {
+          return;
+        }
+        for (const animation of target.getAnimations()) {
+          const effect = animation.effect as KeyframeEffect;
+          const timing = effect.getComputedTiming();
+          const properties = new Set<string>();
+          for (const keyframe of effect.getKeyframes()) {
+            for (const key of Object.keys(keyframe)) {
+              if (
+                !['offset', 'computedOffset', 'easing', 'composite'].includes(
+                  key,
+                )
+              ) {
+                properties.add(key);
+              }
+            }
+          }
+          seen.push({
+            properties: [...properties].sort(),
+            durationMs: Number(timing.duration),
+            delayMs: timing.delay ?? 0,
+          });
+        }
+      },
+      true,
+    );
+  });
+  await page.getByRole('button', {name: opener}).click();
+  const dialog = page.getByRole(role, {name});
+  await expect(dialog).toBeVisible();
+  const firstFrameOpacity = await dialog.evaluate(
+    async element =>
+      new Promise<number>(resolve => {
+        requestAnimationFrame(() =>
+          resolve(Number(getComputedStyle(element).opacity)),
+        );
+      }),
+  );
+  // Long enough for any entrance to have started and ended.
+  await page.waitForTimeout(700);
+  const animations = await page.evaluate(
+    () =>
+      (window as unknown as {__entrance: Entrance['animations']}).__entrance,
+  );
+  return {animations, firstFrameOpacity};
+}
+
+test.describe('with reduced motion on a touch screen (coarse pointer)', () => {
+  test.use({hasTouch: true, isMobile: true});
+
+  for (const dialogCase of cases) {
+    test(`${dialogCase.story}: the dialog fades in where it lands, opacity only, in 200 ms or less (DR1, DR2)`, async ({
+      page,
+    }) => {
+      await page.emulateMedia({reducedMotion: 'reduce'});
+      expect(
+        await page.evaluate(() => matchMedia('(pointer: coarse)').matches),
+      ).toBe(true);
+      const {animations} = await openDialog(page, dialogCase);
+      // A cross-fade, not a change with no transition.
+      expect(animations.length).toBeGreaterThan(0);
+      for (const animation of animations) {
+        expect(animation.properties).toEqual(['opacity']);
+        expect(animation.delayMs + animation.durationMs).toBeLessThanOrEqual(
+          200,
+        );
+      }
+    });
+  }
+});
+
+test.describe('with reduced motion and a mouse (fine pointer)', () => {
+  for (const dialogCase of cases) {
+    test(`${dialogCase.story}: the dialog appears at once, with no animated property (DR3)`, async ({
+      page,
+    }) => {
+      await page.emulateMedia({reducedMotion: 'reduce'});
+      expect(
+        await page.evaluate(() => matchMedia('(pointer: fine)').matches),
+      ).toBe(true);
+      const {animations, firstFrameOpacity} = await openDialog(
+        page,
+        dialogCase,
+      );
+      expect(animations).toEqual([]);
+      expect(firstFrameOpacity).toBe(1);
+    });
+  }
+});
+
+test.describe('without reduced motion on a touch screen', () => {
+  test.use({hasTouch: true, isMobile: true});
+
+  test('the standard dialog keeps its entrance: it rises and scales in as it fades', async ({
+    page,
+  }) => {
+    await page.emulateMedia({reducedMotion: 'no-preference'});
+    const {animations} = await openDialog(page, cases[0]);
+    expect(animations).toHaveLength(1);
+    expect(animations[0].properties).toEqual(['opacity', 'transform']);
+    expect(animations[0].durationMs).toBeGreaterThan(200);
+  });
+});