@astryxdesign/core 0.7.0 → 0.7.1-canary.2b6d129

package/src/BottomSheet/BottomSheet.test.tsx

@@ -14,6 +14,7 @@ import {act, render, screen, fireEvent} from '@testing-library/react';
 import {createRef, useState} from 'react';
 import {BottomSheet} from './BottomSheet';
 import {BottomSheetSwitcher} from './BottomSheetSwitcher';
+import {__resetInteractionModalityForTest} from '../utils/interactionModality';
 
 // A sheet has no stops unless its host asks for them, so the tests that
 // exercise detents pass their own. These three — a 14% peek, a half-height
@@ -2351,6 +2352,119 @@ describe('BottomSheet', () => {
 
       expect(document.activeElement).toBe(finalFocusRef.current);
     });
+
+    // The returned focus shows the focus-visible ring only after keyboard
+    // input (`architecture:interaction-modality` INV1). A plain focus() leaves
+    // that to the browser, which rings it after a pointer close: WebKit after
+    // a tap, and Chromium when the sheet was opened from the keyboard.
+    describe('ring on the returned focus', () => {
+      beforeEach(() => {
+        __resetInteractionModalityForTest();
+      });
+
+      afterEach(() => {
+        vi.restoreAllMocks();
+      });
+
+      function openThenClose(closeWith: 'pointer' | 'keyboard') {
+        render(<Harness />);
+        const opener = screen.getByRole('button', {name: 'Open sheet'});
+        opener.focus();
+        fireEvent.click(opener);
+        const done = screen.getByRole('button', {name: 'Done'});
+        if (closeWith === 'pointer') {
+          fireEvent.pointerDown(done);
+        } else {
+          fireEvent.keyDown(done, {key: 'Enter'});
+        }
+        fireEvent.click(done);
+        return opener;
+      }
+
+      it('asks the browser for no ring after a pointer close', () => {
+        const opener = openThenClose('pointer');
+        const focus = vi.spyOn(opener, 'focus');
+        finishSheetExit();
+
+        expect(opener).toHaveFocus();
+        expect(focus.mock.calls).toEqual([[{focusVisible: false}]]);
+      });
+
+      it('leaves the ring to the browser after a keyboard close', () => {
+        const opener = openThenClose('keyboard');
+        const focus = vi.spyOn(opener, 'focus');
+        finishSheetExit();
+
+        expect(opener).toHaveFocus();
+        expect(focus.mock.calls).toEqual([[]]);
+      });
+
+      it('clears a ring the native close already drew before refocusing', () => {
+        const opener = openThenClose('pointer');
+        // The browser's own dialog close restores focus to the opener, with a
+        // ring, before the sheet moves focus, and focusing the focused element
+        // changes nothing.
+        HTMLDialogElement.prototype.close = vi.fn(function (
+          this: HTMLDialogElement,
+        ) {
+          this.removeAttribute('open');
+          opener.focus();
+        });
+        const matches = HTMLElement.prototype.matches;
+        vi.spyOn(HTMLElement.prototype, 'matches').mockImplementation(function (
+          this: HTMLElement,
+          selector: string,
+        ) {
+          return selector === ':focus-visible'
+            ? this === opener
+            : matches.call(this, selector);
+        });
+        const blur = vi.spyOn(opener, 'blur');
+        const focus = vi.spyOn(opener, 'focus');
+        finishSheetExit();
+
+        expect(blur).toHaveBeenCalledTimes(1);
+        expect(focus.mock.calls.at(-1)).toEqual([{focusVisible: false}]);
+        expect(blur.mock.invocationCallOrder[0]).toBeLessThan(
+          focus.mock.invocationCallOrder.at(-1) ?? 0,
+        );
+        expect(opener).toHaveFocus();
+      });
+
+      it('asks for no ring on an explicit final focus target too', () => {
+        const finalFocusRef = createRef<HTMLButtonElement>();
+        function ExplicitFocusHarness() {
+          const [isOpen, setIsOpen] = useState(true);
+          return (
+            <>
+              <button ref={finalFocusRef} type="button">
+                Adaptive trigger
+              </button>
+              <BottomSheet
+                isOpen={isOpen}
+                onOpenChange={setIsOpen}
+                finalFocusRef={finalFocusRef}
+                label="Filters">
+                <button type="button" onClick={() => setIsOpen(false)}>
+                  Done
+                </button>
+              </BottomSheet>
+            </>
+          );
+        }
+
+        render(<ExplicitFocusHarness />);
+        const done = screen.getByRole('button', {name: 'Done'});
+        fireEvent.pointerDown(done);
+        fireEvent.click(done);
+        const target = finalFocusRef.current!;
+        const focus = vi.spyOn(target, 'focus');
+        finishSheetExit();
+
+        expect(target).toHaveFocus();
+        expect(focus.mock.calls).toEqual([[{focusVisible: false}]]);
+      });
+    });
   });
 
   describe('initial focus', () => {

package/src/BottomSheet/BottomSheet.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file BottomSheet.tsx
- * @input Uses React, StyleX, core hooks, shared layer dismissal, named BottomSheetPanel, BottomSheetSwitcherContext
+ * @input Uses React, StyleX, core hooks, shared layer dismissal, the shared interaction modality, named BottomSheetPanel, BottomSheetSwitcherContext
  * @output Exports BottomSheet component and BottomSheetProps
  * @position Public BottomSheet router plus private standalone/switcher hosts
  *
@@ -46,6 +46,8 @@ import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 import {useDevWarning, useScrollLock} from '../hooks';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
+import {focusForLastInput} from '../utils/focusReturn';
+import {useInteractionModalityTracking} from '../utils/interactionModality';
 import {
   BottomSheetPanel,
   type BottomSheetPanelMotion,
@@ -320,12 +322,20 @@ function StandaloneBottomSheet({
         dialog.close();
       }
       setIsPresented(false);
-      (finalFocusRef?.current ?? triggerRef.current)?.focus();
+      // The returned focus shows the focus-visible ring only after keyboard
+      // input (`architecture:interaction-modality` INV1). The native close
+      // may already have restored focus to the target with a ring; the helper
+      // clears it first.
+      const returnTarget = finalFocusRef?.current ?? triggerRef.current;
+      if (returnTarget != null) {
+        focusForLastInput(returnTarget);
+      }
       triggerRef.current = null;
     },
     [finalFocusRef, isOpen],
   );
 
+  useInteractionModalityTracking();
   useScrollLock(shouldPresent && hasScrim);
   useDevWarning(
     'BottomSheet',

package/src/BottomSheet/__tests__/BottomSheetFocusReturn.a11y.browser.spec.ts

@@ -0,0 +1,96 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file BottomSheetFocusReturn.a11y.browser.spec.ts
+ * @input The `Core/DropdownMenu` action-sheet story with a trigger the caller
+ *   renders, in a built Storybook, and real Chromium/WebKit pointer and
+ *   keyboard input.
+ * @output Browser evidence that the focus a BottomSheet returns when it closes
+ *   follows the last input (docs/architecture/interaction-modality.md INV1):
+ *   no ring after a pointer close, the ring after a keyboard close.
+ * @position Cross-browser proof; jsdom only proves which focus call the sheet
+ *   makes. The menu's sheet returns focus through BottomSheet's
+ *   `finalFocusRef`, and a control the caller renders carries no style of its
+ *   own that would hide a ring, so the ring shown is the browser's answer.
+ *   Chromium rings it when a keyboard-opened sheet is closed by a pointer;
+ *   WebKit also rings it after a tap open and a tap close.
+ */
+
+import {expect, test, type Locator, 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();
+});
+
+async function mount(page: Page): Promise<Locator> {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-dropdownmenu--action-sheet-custom-trigger&viewMode=story`,
+  );
+  const trigger = page.getByRole('button', {
+    name: 'Project actions',
+    exact: true,
+  });
+  await expect(trigger).toBeVisible();
+  return trigger;
+}
+
+async function openFromKeyboard(page: Page, trigger: Locator): Promise<void> {
+  await trigger.focus();
+  await page.keyboard.press('Enter');
+  await expect(page.getByRole('dialog')).toBeVisible();
+}
+
+function row(page: Page): Locator {
+  return page.getByRole('dialog').getByRole('button', {name: /Edit project/});
+}
+
+async function expectReturnedFocus(
+  page: Page,
+  trigger: Locator,
+  ring: boolean,
+): Promise<void> {
+  await expect(page.getByRole('dialog')).toBeHidden();
+  await expect(trigger).toBeFocused();
+  expect(
+    await trigger.evaluate(element => element.matches(':focus-visible')),
+  ).toBe(ring);
+}
+
+test('a keyboard-opened sheet closed by a pointer pick returns focus without a ring', async ({
+  page,
+}) => {
+  const trigger = await mount(page);
+  await openFromKeyboard(page, trigger);
+  await row(page).click();
+  await expectReturnedFocus(page, trigger, false);
+});
+
+test('a pointer open and pointer pick return focus without a ring', async ({
+  page,
+}) => {
+  const trigger = await mount(page);
+  await trigger.click();
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await row(page).click();
+  await expectReturnedFocus(page, trigger, false);
+});
+
+test('a keyboard-opened sheet closed by Escape keeps the ring', async ({
+  page,
+}) => {
+  const trigger = await mount(page);
+  await openFromKeyboard(page, trigger);
+  await page.keyboard.press('Escape');
+  await expectReturnedFocus(page, trigger, true);
+});

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

@@ -15,12 +15,11 @@
  * output—not an event wrapper, speculative internal structure, or a node
  * created only for layout plumbing."
  *
- * This is not observable in the unit lane and not observable to the probe-reach
- * gate either. jsdom resolves no cascade, so it cannot say which element paints.
- * The gate's reach check asks whether a target's override lands on the element
- * carrying the class, and it does — that element simply is not the one a reader
- * sees. Only a real engine can be asked the question that matters: does styling
- * the documented target change the pill?
+ * This is not observable in the unit lane: jsdom resolves no cascade, so it
+ * cannot say which element paints. An override can land on the element carrying
+ * the class while that element is not the one a reader sees. Only a real engine
+ * can be asked the question that matters: does styling the documented target
+ * change the pill?
  *
  * The pill is identified structurally, as the button's parent element, so every
  * measurement below is independent of where the class currently sits.