@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/InputGroup/InputGroupText.tsx

@@ -27,6 +27,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
+import {inputGroupItemProps} from './groupStyles';
 
 const styles = stylex.create({
   text: {
@@ -98,6 +99,7 @@ export function InputGroupText({
     <div
       ref={ref}
       {...rest}
+      {...inputGroupItemProps}
       {...mergeProps(
         themeProps('input-group-text'),
         stylex.props(styles.text, xstyle),

package/src/InputGroup/groupStyles.ts

@@ -10,21 +10,32 @@
 import * as stylex from '@stylexjs/stylex';
 import {radiusVars, borderVars} from '../theme/tokens.stylex';
 
-// A grouped control may be followed by context-layer infrastructure rather
-// than another control. Popovers, inert markers, and native dialog surfaces
-// are not visual group members; skip them when finding the trailing edge.
-const IS_LAST_ITEM = ':not(:has(~ *:not([popover]):not(template):not(dialog)))';
+/**
+ * The internal marker every InputGroup member sets on the element that carries
+ * its group styles: compatible inputs, Button addons and InputGroupText. The
+ * group's edge rules name members by it instead of a universal selector. Not
+ * public API.
+ */
+export const inputGroupItemProps = {
+  'data-astryx-input-group-item': '',
+} as const;
+const MEMBER = '[data-astryx-input-group-item]';
+
+// Anything a caller places after a member (a wrapped Button, a custom element)
+// still counts as following it, so the trailing edge keeps today's rule over
+// any sibling; only context-layer infrastructure (popovers, inert markers,
+// native dialog surfaces) is skipped. Followers are not always members, so
+// this rule cannot name them by the marker.
+const FOLLOWED = ':has(~ *:not([popover]):not(template):not(dialog))';
+const IS_LAST_ITEM = `:not(${FOLLOWED})`;
 
 // Button consumes InputGroup context anywhere below the group, including buttons
 // inside an input's own implementation. Keep the visual adaptation on direct
 // children so internal clear, calendar, and disclosure actions stay unchanged.
-const DIRECT_INPUT_GROUP_ADDON = ':where(.astryx-input-group > *)';
-const DIRECT_INPUT_GROUP_ADDON_FOCUS_VISIBLE =
-  ':where(.astryx-input-group > *):focus-visible';
-const DIRECT_INPUT_GROUP_ADDON_NOT_FIRST =
-  ':where(.astryx-input-group > *):not(:first-child)';
-const DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER =
-  ':where(.astryx-input-group > *):has(~ *:not([popover]):not(template):not(dialog))';
+const DIRECT_INPUT_GROUP_ADDON = `:where(.astryx-input-group > ${MEMBER})`;
+const DIRECT_INPUT_GROUP_ADDON_FOCUS_VISIBLE = `${DIRECT_INPUT_GROUP_ADDON}:focus-visible`;
+const DIRECT_INPUT_GROUP_ADDON_NOT_FIRST = `${DIRECT_INPUT_GROUP_ADDON}:not(:first-child)`;
+const DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER = `${DIRECT_INPUT_GROUP_ADDON}${FOLLOWED}`;
 
 export const groupStyles = stylex.create({
   buttonAddon: {

package/src/Item/Item.test.tsx

@@ -3,7 +3,7 @@
 /**
  * @file Item.test.tsx
  * @input Uses vitest, @testing-library/react, Item component
- * @output Unit tests for Item
+ * @output Unit tests for Item, including flat marker DOM and numbered-row scope
  * @position Testing; validates Item component implementation
  *
  * SYNC: When Item component changes, update tests to match new behavior
@@ -31,6 +31,7 @@ import {rulesDeclaredFor} from '../__tests__/pressState';
 import userEvent from '@testing-library/user-event';
 import {Item} from './Item';
 import {ItemDescriptionContext} from './ItemDescriptionContext';
+import {List, ListItem} from '../List';
 
 /**
  * Item in delegation mode: `interactiveRef` points at a nested control that
@@ -479,6 +480,12 @@ describe('Item', () => {
     expect(root?.querySelector('[data-testid="marker"]')).toBeInTheDocument();
     expect(root?.querySelector('[data-testid="start"]')).toBeInTheDocument();
     expect(root?.querySelector('[data-testid="end"]')).toBeInTheDocument();
+    // A bullet or caller-owned marker needs no extra formatting group: marker,
+    // start, primary and end retain the released flat row structure.
+    expect(root?.children).toHaveLength(4);
+    expect(button?.parentElement).toBe(root);
+    expect(screen.getByTestId('start').parentElement?.parentElement).toBe(root);
+    expect(screen.getByTestId('end').parentElement?.parentElement).toBe(root);
     expect(
       button?.querySelector('[data-testid="marker"]'),
     ).not.toBeInTheDocument();
@@ -592,6 +599,38 @@ describe('Item', () => {
     expect(hasStrut()).toBe(false);
   });
 
+  it('groups only the numbered composing row, not marked Items in its slots', () => {
+    render(
+      <List listStyle="decimal">
+        <ListItem
+          data-testid="numbered-row"
+          label="Numbered"
+          startContent={<span data-testid="numbered-start">S</span>}
+          endContent={
+            <Item
+              data-testid="nested-row"
+              label="Nested item"
+              marker={<span>•</span>}
+              startContent={<span data-testid="nested-start">S</span>}
+              endContent={<span>E</span>}
+            />
+          }
+        />
+      </List>,
+    );
+    const numbered = screen.getByTestId('numbered-row');
+    expect(numbered.children).toHaveLength(2);
+    const group = numbered.children[1];
+    expect(
+      screen.getByTestId('numbered-start').parentElement?.parentElement,
+    ).toBe(group);
+    const nested = screen.getByTestId('nested-row');
+    expect(nested.children).toHaveLength(4);
+    expect(
+      screen.getByTestId('nested-start').parentElement?.parentElement,
+    ).toBe(nested);
+  });
+
   // ===========================================================================
   // Description rendering
   // ===========================================================================
@@ -721,6 +760,7 @@ describe('swipeActions', () => {
     vi.useRealTimers();
   });
 
+  /** The first finger down: the primary touch pointer. */
   function touch(
     element: Element,
     type: 'pointerDown' | 'pointerMove' | 'pointerUp' | 'pointerCancel',
@@ -731,11 +771,29 @@ describe('swipeActions', () => {
     fireEvent[type](element, {
       clientX: x,
       clientY: y,
+      isPrimary: true,
       pointerId: 7,
       pointerType: 'touch',
     });
   }
 
+  /** A second finger: a touch pointer that is not the primary one. */
+  function secondFinger(
+    element: Element,
+    type: 'pointerDown' | 'pointerMove' | 'pointerUp' | 'pointerCancel',
+    x: number,
+    y = 10,
+  ) {
+    vi.advanceTimersByTime(10);
+    fireEvent[type](element, {
+      clientX: x,
+      clientY: y,
+      isPrimary: false,
+      pointerId: 8,
+      pointerType: 'touch',
+    });
+  }
+
   /** The time a settle takes, plus the frame before it. */
   const settled = () => void act(() => vi.advanceTimersByTime(250));
 
@@ -958,6 +1016,105 @@ describe('swipeActions', () => {
     });
   });
 
+  describe('a pinch', () => {
+    /** A touchmove listing both fingers; true when the row cancelled it. */
+    const pinchMoveCancelled = (row: Element, x: number) =>
+      !fireEvent.touchMove(row, {
+        cancelable: true,
+        touches: [
+          {clientX: x, clientY: 10},
+          {clientX: 300 - x, clientY: 10},
+        ],
+      });
+
+    it('lets the touch go when a second finger lands on the row before the axis is decided, and cancels nothing', () => {
+      const {row} = renderRow();
+      touch(row, 'pointerDown', 100);
+      secondFinger(row, 'pointerDown', 60);
+      // The fingers spread apart; the first one travels toward the leading
+      // side far past the axis lock.
+      touch(row, 'pointerMove', 130);
+      secondFinger(row, 'pointerMove', 30);
+      touch(row, 'pointerMove', 160);
+      expect(pinchMoveCancelled(row, 160)).toBe(false);
+      void act(() => vi.advanceTimersByTime(20));
+      expect(travelOf(row)).toBe('');
+      // The browser takes the pinch.
+      touch(row, 'pointerCancel', 160);
+      secondFinger(row, 'pointerCancel', 0);
+      settled();
+      expect(travelOf(row)).toBe('');
+    });
+
+    it('lets the touch go when the second finger lands off the row', () => {
+      const {row} = renderRow();
+      touch(row, 'pointerDown', 100);
+      secondFinger(document.body, 'pointerDown', 60, 200);
+      touch(row, 'pointerMove', 130);
+      touch(row, 'pointerMove', 160);
+      expect(pinchMoveCancelled(row, 160)).toBe(false);
+      void act(() => vi.advanceTimersByTime(20));
+      expect(travelOf(row)).toBe('');
+      touch(row, 'pointerCancel', 160);
+    });
+
+    it('never starts a drag from a finger that is not the first one down', () => {
+      const {row} = renderRow();
+      // The first finger is somewhere else on the page; this one lands on
+      // the row and travels sideways.
+      secondFinger(row, 'pointerDown', 100);
+      secondFinger(row, 'pointerMove', 130);
+      secondFinger(row, 'pointerMove', 160);
+      expect(pinchMoveCancelled(row, 160)).toBe(false);
+      void act(() => vi.advanceTimersByTime(20));
+      expect(travelOf(row)).toBe('');
+      secondFinger(row, 'pointerUp', 160);
+    });
+
+    it('keeps a drag the row already owns when a second finger lands', () => {
+      const {row} = renderRow();
+      touch(row, 'pointerDown', 10);
+      touch(row, 'pointerMove', 30);
+      touch(row, 'pointerMove', 45);
+      void act(() => vi.advanceTimersByTime(20));
+      expect(travelOf(row)).toBe('35px');
+      secondFinger(row, 'pointerDown', 200);
+      touch(row, 'pointerMove', 60);
+      expect(pinchMoveCancelled(row, 60)).toBe(true);
+      void act(() => vi.advanceTimersByTime(20));
+      expect(travelOf(row)).toBe('50px');
+      touch(row, 'pointerUp', 60);
+      secondFinger(row, 'pointerUp', 200);
+      settled();
+      expect(travelOf(row)).toBe('72px');
+    });
+
+    it('stops listening to the document once the axis is decided or the touch ends', () => {
+      const add = vi.spyOn(document, 'addEventListener');
+      const remove = vi.spyOn(document, 'removeEventListener');
+      try {
+        const {row} = renderRow();
+        const watching = () =>
+          add.mock.calls.filter(([type]) => type === 'pointerdown').length -
+          remove.mock.calls.filter(([type]) => type === 'pointerdown').length;
+        const before = watching();
+        touch(row, 'pointerDown', 10);
+        expect(watching()).toBe(before + 1);
+        touch(row, 'pointerMove', 40);
+        expect(watching()).toBe(before);
+        touch(row, 'pointerUp', 40);
+        settled();
+        touch(row, 'pointerDown', 10);
+        expect(watching()).toBe(before + 1);
+        touch(row, 'pointerUp', 12);
+        expect(watching()).toBe(before);
+      } finally {
+        add.mockRestore();
+        remove.mockRestore();
+      }
+    });
+  });
+
   it('does not move toward a side without entries', () => {
     const {row} = renderRow({
       leading: [{label: 'Unread', onActivate: vi.fn()}],

package/src/Item/Item.tsx

@@ -5,7 +5,11 @@
 /**
  * @file Item.tsx
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
- * @output Exports Item component, ItemProps type; publishes the shared inline inset
+ * @output Exports Item component, ItemProps type; publishes the shared inline inset.
+ *   Only numbered composing rows keep their start/label/end slots in one flex
+ *   group, through Item's private exact-marker scope; other marked rows keep
+ *   their flat children. This lets List share a counter track without changing
+ *   those slots' own layout.
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
  *
  * The swipe actions live in ItemSwipeLayer, reached only through a dynamic
@@ -28,6 +32,7 @@
 import {
   lazy,
   Suspense,
+  use,
   useCallback,
   useId,
   useRef,
@@ -45,6 +50,7 @@ import {
 import type {BaseProps} from '../BaseProps';
 import {isRenderable, mergeProps} from '../utils';
 import {ItemDescriptionContext} from './ItemDescriptionContext';
+import {ItemMarkerColumnsContext} from './ItemMarkerColumnsContext';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {computeTargetAndRel} from '../Link/computeTargetAndRel';
 import {useLinkComponent} from '../Link/useLinkComponent';
@@ -352,6 +358,22 @@ const styles = stylex.create({
     textAlign: 'start',
     borderRadius: radiusVars['--radius-element'],
   },
+  // One content cell beside the marker. Its slots retain the row's flex
+  // alignment and gap, including first-line alignment and tall start content.
+  // A numbered List can then subgrid the row into marker/content columns.
+  markerContent: {
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    alignItems: 'inherit',
+    alignSelf: 'stretch',
+    gap: 'inherit',
+  },
+  markerContentFirstLine: {
+    // A tall start/end slot moves the first text baseline down. The marker
+    // must follow that baseline, not the stretched group's top edge.
+    alignSelf: 'baseline',
+  },
   alignStart: {
     alignItems: 'flex-start',
   },
@@ -503,11 +525,13 @@ const styles = stylex.create({
   },
   // Swipe actions. The root translates by the drag's travel and settles on
   // the clock the gesture writes; `pan-y` lets the browser keep scrolling the
-  // list while the row owns horizontal movement. The hover transition keeps
-  // its own clock beside the transform's.
+  // list while the row owns horizontal movement, and `pinch-zoom` leaves a
+  // two-finger pinch that starts on the row to the browser, so the page stays
+  // zoomable (WCAG 1.4.4). The hover transition keeps its own clock beside
+  // the transform's.
   swipeRoot: {
     isolation: 'isolate',
-    touchAction: 'pan-y',
+    touchAction: 'pan-y pinch-zoom',
     transform: `translate3d(${SWIPE_TRAVEL}, 0, 0)`,
     transitionProperty: 'background-color, transform',
     transitionDuration: `${durationVars['--duration-fast-min']}, ${SWIPE_DURATION}`,
@@ -584,6 +608,7 @@ export function Item({
   ...restProps
 }: ItemProps) {
   const pressable = usePressFeedback();
+  const columnMarker = use(ItemMarkerColumnsContext);
   const LinkComponent = useLinkComponent();
 
   // Delegation mode: the row is an enlarged click/tap target for a nested
@@ -736,9 +761,8 @@ export function Item({
     onClick?.(e);
   };
 
-  const innerContent = (
+  const content = (
     <>
-      {marker}
       {startContent != null && (
         <span
           {...stylex.props(
@@ -898,7 +922,18 @@ export function Item({
       onClick={rootOnClick}>
       <ItemDescriptionContext
         value={hasRenderableDescription ? descriptionID : null}>
-        {innerContent}
+        {isRenderable(marker) && marker}
+        {isRenderable(marker) && columnMarker === marker ? (
+          <span
+            {...stylex.props(
+              styles.markerContent,
+              align === 'first-line' && styles.markerContentFirstLine,
+            )}>
+            {content}
+          </span>
+        ) : (
+          content
+        )}
       </ItemDescriptionContext>
       {hasSwipe && (
         // The panels: out-of-flow children of this root, so the DOM is the one

package/src/Item/ItemMarkerColumns.a11y.chromium.spec.ts

@@ -0,0 +1,211 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y scope core/Item core/List core/Markdown core/DropdownMenu ^apps/storybook/stories/Item
+
+/**
+ * @file ItemMarkerColumns.a11y.chromium.spec.ts
+ * @input Built Item marker anatomy, mixed task, and selectable menu stories
+ * @output Minimal DOM counts and unchanged row pixels at rest/open, fine/coarse
+ * @position Item/List browser regression; receipts and captures stay in test outputs
+ */
+
+import {createHash} from 'node:crypto';
+import {readFile, writeFile} from 'node:fs/promises';
+import {basename, join} from 'node:path';
+import {expect, test, type Page} from '@playwright/test';
+import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
+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 () => storybook?.close());
+
+async function open(page: Page, story: string, dir: string) {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${story}&viewMode=story&globals=direction:${dir};colorMode:light;astryxTheme:neutral`,
+  );
+  await holdMotionStill(page);
+  await page.evaluate(async () => document.fonts.ready);
+}
+
+async function capture(
+  page: Page,
+  selector: string,
+  name: string,
+  file: string,
+) {
+  const target = page.locator(selector);
+  await expect(target).toBeVisible();
+  const geometry = await target.evaluate(root => {
+    const origin = root.getBoundingClientRect();
+    const rect = (element: Element) => {
+      const box = element.getBoundingClientRect();
+      return {
+        x: box.x - origin.x,
+        y: box.y - origin.y,
+        width: box.width,
+        height: box.height,
+      };
+    };
+    return {
+      bodyElements: document.body.querySelectorAll('*').length,
+      componentElements: root.querySelectorAll('*').length,
+      rows: Array.from(root.querySelectorAll('.astryx-item')).map(row => ({
+        case:
+          row.closest('[data-marker-case]')?.getAttribute('data-marker-case') ??
+          row.getAttribute('role') ??
+          'task',
+        children: row.children.length,
+        elements: row.querySelectorAll('*').length,
+        rect: rect(row),
+        slots: Array.from(
+          row.querySelectorAll(
+            '[data-anatomy-slot], input, [role="checkbox"], [role="radio"]',
+          ),
+        ).map(slot => ({
+          name:
+            slot.getAttribute('data-anatomy-slot') ??
+            slot.getAttribute('role') ??
+            slot.tagName,
+          rect: rect(slot),
+        })),
+        startIsDirect:
+          row.querySelector('[data-anatomy-slot="start"]')?.parentElement
+            ?.parentElement === row,
+      })),
+    };
+  });
+  const image = await target.screenshot({path: file});
+  return {
+    name,
+    ...geometry,
+    pixelSha256: createHash('sha256').update(image).digest('hex'),
+  };
+}
+
+for (const pointer of ['fine', 'coarse'] as const) {
+  for (const dir of ['ltr', 'rtl'] as const) {
+    test(`numbered marker scope preserves row pixels (${pointer}, ${dir})`, async ({
+      browser,
+    }, testInfo) => {
+      const context = await browser.newContext({
+        viewport: {width: 1280, height: 900},
+        hasTouch: pointer === 'coarse',
+      });
+      const page = await context.newPage();
+      try {
+        const states: Awaited<ReturnType<typeof capture>>[] = [];
+        await open(page, 'core-item--marker-anatomy', dir);
+        expect(
+          await page.evaluate(() => matchMedia('(pointer: coarse)').matches),
+        ).toBe(pointer === 'coarse');
+        const fixture = '[data-marker-anatomy]';
+        states.push(
+          await capture(
+            page,
+            fixture,
+            'anatomy-rest',
+            testInfo.outputPath('anatomy-rest.png'),
+          ),
+        );
+        await page.getByRole('button', {name: 'Toggle marker menu'}).click();
+        await expect(page.getByRole('menuitem')).toBeVisible();
+        await page.mouse.move(1200, 850);
+        states.push(
+          await capture(
+            page,
+            fixture,
+            'anatomy-open',
+            testInfo.outputPath('anatomy-open.png'),
+          ),
+        );
+
+        await open(page, 'a11y-menu--dropdown-selectable', dir);
+        states.push(
+          await capture(
+            page,
+            '[data-a11y-activations]',
+            'menu-rest',
+            testInfo.outputPath('menu-rest.png'),
+          ),
+        );
+        await page.getByRole('button', {name: 'View', exact: true}).click();
+        await expect(page.getByRole('menuitemcheckbox')).toBeVisible();
+        await expect(page.getByRole('menuitemradio')).toHaveCount(2);
+        await page.mouse.move(1200, 850);
+        states.push(
+          await capture(
+            page,
+            '[role="menu"]',
+            'menu-open',
+            testInfo.outputPath('menu-open.png'),
+          ),
+        );
+
+        await open(page, 'richtext-richtexteditor--markdown-parity', dir);
+        const task =
+          '[data-parity-surface="markdown"] [data-parity-block="list-task-mixed"]';
+        states.push(
+          await capture(
+            page,
+            task,
+            'mixed-task',
+            testInfo.outputPath('mixed-task.png'),
+          ),
+        );
+        await writeFile(
+          testInfo.outputPath('receipt.json'),
+          JSON.stringify({pointer, dir, states}, null, 2),
+        );
+
+        for (const state of states.filter(state =>
+          state.name.startsWith('anatomy'),
+        )) {
+          for (const row of state.rows) {
+            expect(row.children, row.case).toBe(
+              row.case === 'numbered'
+                ? 2
+                : row.case === 'unmarked-item'
+                  ? 3
+                  : 4,
+            );
+            expect(row.startIsDirect, row.case).toBe(row.case !== 'numbered');
+          }
+        }
+        // Before/after pixels are compared only when the retained local receipt
+        // is supplied. CI keeps the structural proof and emits its own receipt.
+        const before = process.env.ASTRYX_MARKER_ANATOMY_BEFORE;
+        if (before != null) {
+          const prior = JSON.parse(
+            await readFile(
+              join(before, basename(testInfo.outputDir), 'receipt.json'),
+              'utf8',
+            ),
+          ) as {states: typeof states};
+          for (const state of states) {
+            const previous = prior.states.find(
+              value => value.name === state.name,
+            );
+            expect(previous, state.name).toBeDefined();
+            expect(state.pixelSha256, `${state.name}: unchanged pixels`).toBe(
+              previous?.pixelSha256,
+            );
+            expect(
+              state.rows.map(row => row.rect),
+              `${state.name}: unchanged geometry`,
+            ).toEqual(previous?.rows.map(row => row.rect));
+          }
+        }
+      } finally {
+        await context.close();
+      }
+    });
+  }
+}

package/src/Item/ItemMarkerColumnsContext.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ItemMarkerColumnsContext.tsx
+ * @input The exact marker element supplied by a numbered composing row
+ * @output Private ItemMarkerColumnsContext; not part of the public Item exports
+ * @position Item-owned seam for the marker/content formatting group
+ *
+ * Numbered ListItem rows need two subgrid cells. Other marked Items keep their
+ * flat flex children. Marker identity, rather than an inherited boolean,
+ * confines the group to that one row: an Item nested in a slot has a different
+ * marker and does not inherit the formatting request.
+ */
+
+import {createContext, type ReactNode} from 'react';
+
+export const ItemMarkerColumnsContext = createContext<ReactNode>(null);
+ItemMarkerColumnsContext.displayName = 'ItemMarkerColumnsContext';

package/src/Item/ItemSwipeLayer.tsx

@@ -175,6 +175,15 @@ const swipeVariantStyles = stylex.create({
   destructive: {
     backgroundColor: colorVars['--color-error'],
     color: colorVars['--color-on-error'],
+    // Forced colors replace the fill with Canvas; a border keeps the
+    // destructive fill's shape visible (architecture:theme-tokens INV11). A
+    // border, not an outline, leaves the shared focus ring intact.
+    borderWidth: {default: 0, '@media (forced-colors: active)': '1px'},
+    borderStyle: {default: 'none', '@media (forced-colors: active)': 'solid'},
+    borderColor: {
+      default: null,
+      '@media (forced-colors: active)': 'CanvasText',
+    },
   },
 });
 

package/src/Item/__tests__/ItemSwipeActions.a11y.chromium.spec.ts

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