@ankhorage/zora 25.8.12 → 25.8.14

package/src/features/matrix-grid/adapters/inbound/MatrixGrid.protected-focus.test.tsx

@@ -0,0 +1,252 @@
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+import { expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const browserKeys = [
+  'window',
+  'document',
+  'Node',
+  'navigator',
+  'ShadowRoot',
+  'IS_REACT_ACT_ENVIRONMENT',
+] as const;
+const webDistRoot = join(import.meta.dir, '../../../../../web-dist');
+const load = (path: string) => import(pathToFileURL(join(webDistRoot, path)).href);
+
+interface MatrixCell {
+  readonly columnId: string;
+  readonly id: string;
+  readonly rowId: string;
+}
+
+interface MatrixLayout {
+  readonly columns: readonly { readonly id: string; readonly size: number }[];
+  readonly rows: readonly { readonly id: string; readonly size: number }[];
+}
+type MatrixGridComponent = React.ComponentType<{
+  readonly cells: readonly MatrixCell[];
+  readonly height: number;
+  readonly layout: MatrixLayout;
+  readonly protectedCellIds?: readonly string[];
+  readonly renderCell: (cell: MatrixCell) => React.ReactNode;
+  readonly testID: string;
+  readonly width: number;
+}>;
+type ZoraProviderComponent = React.ComponentType<{ readonly children: React.ReactNode }>;
+
+/*** Mount MatrixGrid through React Native Web and restore the ambient DOM after each assertion. */
+async function withMatrixDom(assertion: (host: HTMLElement, browser: Window) => Promise<void>) {
+  const browser = new Window();
+  const previous = browserKeys.map(
+    (key) => [key, Object.getOwnPropertyDescriptor(globalThis, key)] as const,
+  );
+  Object.assign(globalThis, {
+    IS_REACT_ACT_ENVIRONMENT: true,
+    window: browser,
+    document: browser.document,
+    Node: browser.Node,
+    navigator: browser.navigator,
+    ShadowRoot: browser.ShadowRoot,
+  });
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  try {
+    await assertion(host, browser);
+  } finally {
+    browser.close();
+    for (const [key, descriptor] of previous) {
+      if (descriptor) Object.defineProperty(globalThis, key, descriptor);
+      else Reflect.deleteProperty(globalThis, key);
+    }
+  }
+}
+
+/*** Load the compiled MatrixGrid and provider used by React Native Web interaction tests. */
+async function loadMatrixGrid() {
+  const { MatrixGrid } = (await load('components/matrix-grid/MatrixGrid.js')) as {
+    MatrixGrid: MatrixGridComponent;
+  };
+  const { ZoraProvider } = (await load('runtime/ZoraProvider.js')) as {
+    ZoraProvider: ZoraProviderComponent;
+  };
+  return { MatrixGrid, ZoraProvider };
+}
+
+test('retains focus when protected terminal cells block all four arrow directions', async () => {
+  await withMatrixDom(async (host, browser) => {
+    const root = createRoot(host);
+    const { MatrixGrid, ZoraProvider } = await loadMatrixGrid();
+    const layout = {
+      columns: Array.from({ length: 3 }, (_, index) => ({ id: `column-${index}`, size: 20 })),
+      rows: Array.from({ length: 3 }, (_, index) => ({ id: `row-${index}`, size: 20 })),
+    };
+    const cells = [
+      { columnId: 'column-1', id: 'up', rowId: 'row-0' },
+      { columnId: 'column-0', id: 'left', rowId: 'row-1' },
+      { columnId: 'column-1', id: 'origin', rowId: 'row-1' },
+      { columnId: 'column-2', id: 'right', rowId: 'row-1' },
+      { columnId: 'column-1', id: 'down', rowId: 'row-2' },
+    ];
+    try {
+      act(() =>
+        root.render(
+          <ZoraProvider>
+            <MatrixGrid
+              cells={cells}
+              height={60}
+              layout={layout}
+              protectedCellIds={['left', 'right', 'up', 'down']}
+              testID="terminal-protected-matrix"
+              width={60}
+              renderCell={(cell) => <span>{cell.id}</span>}
+            />
+          </ZoraProvider>,
+        ),
+      );
+      const origin = host.querySelector<HTMLElement>(
+        '[data-testid="terminal-protected-matrix-cell-origin"]',
+      );
+      if (!origin) throw new Error('Missing terminal-protected focus origin.');
+      act(() => origin.focus());
+      for (const key of ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']) {
+        act(() => {
+          void origin.dispatchEvent(new browser.KeyboardEvent('keydown', { bubbles: true, key }));
+        });
+        expect(document.activeElement).toBe(origin);
+      }
+    } finally {
+      act(() => root.unmount());
+    }
+  });
+});
+
+test('skips consecutive protected cells and retains the origin when a direction has no navigable cell', async () => {
+  await withMatrixDom(async (host, browser) => {
+    const root = createRoot(host);
+    const { MatrixGrid, ZoraProvider } = await loadMatrixGrid();
+    const layout = {
+      columns: Array.from({ length: 4 }, (_, index) => ({ id: `column-${index}`, size: 20 })),
+      rows: [{ id: 'row-0', size: 20 }],
+    };
+    const cells = ['a', 'b', 'c', 'd'].map((id, index) => ({
+      columnId: `column-${index}`,
+      id,
+      rowId: 'row-0',
+    }));
+    const render = (protectedCellIds: readonly string[], testID: string) => (
+      <ZoraProvider>
+        <MatrixGrid
+          cells={cells}
+          height={20}
+          layout={layout}
+          protectedCellIds={protectedCellIds}
+          testID={testID}
+          width={80}
+          renderCell={(cell) => <span>{cell.id}</span>}
+        />
+      </ZoraProvider>
+    );
+    try {
+      act(() => root.render(render(['b', 'c'], 'consecutive-protected-matrix')));
+      const a = host.querySelector<HTMLElement>(
+        '[data-testid="consecutive-protected-matrix-cell-a"]',
+      );
+      const d = host.querySelector<HTMLElement>(
+        '[data-testid="consecutive-protected-matrix-cell-d"]',
+      );
+      if (!a || !d) throw new Error('Missing consecutive-protected cells.');
+      act(() => {
+        a.focus();
+        void a.dispatchEvent(
+          new browser.KeyboardEvent('keydown', { bubbles: true, key: 'ArrowRight' }),
+        );
+      });
+      expect(document.activeElement).toBe(d);
+
+      act(() => root.render(render(['b', 'c', 'd'], 'blocked-direction-matrix')));
+      const blockedOrigin = host.querySelector<HTMLElement>(
+        '[data-testid="blocked-direction-matrix-cell-a"]',
+      );
+      if (!blockedOrigin) throw new Error('Missing blocked-direction focus origin.');
+      act(() => {
+        blockedOrigin.focus();
+        void blockedOrigin.dispatchEvent(
+          new browser.KeyboardEvent('keydown', { bubbles: true, key: 'ArrowRight' }),
+        );
+      });
+      expect(document.activeElement).toBe(blockedOrigin);
+    } finally {
+      act(() => root.unmount());
+    }
+  });
+});
+
+test('reconciles roving focus when protected cells change and leaves fully protected matrices without a tab stop', async () => {
+  await withMatrixDom(async (host, browser) => {
+    const root = createRoot(host);
+    const { MatrixGrid, ZoraProvider } = await loadMatrixGrid();
+    const layout = {
+      columns: Array.from({ length: 3 }, (_, index) => ({ id: `column-${index}`, size: 20 })),
+      rows: [{ id: 'row-0', size: 20 }],
+    };
+    const cells = ['a', 'b', 'c'].map((id, index) => ({
+      columnId: `column-${index}`,
+      id,
+      rowId: 'row-0',
+    }));
+    let setProtectedCellIds: React.Dispatch<React.SetStateAction<readonly string[]>> | undefined;
+
+    function DynamicProtectionMatrix() {
+      const [protectedCellIds, setProtected] = React.useState<readonly string[]>([]);
+      setProtectedCellIds = setProtected;
+      return (
+        <ZoraProvider>
+          <MatrixGrid
+            cells={cells}
+            height={20}
+            layout={layout}
+            protectedCellIds={protectedCellIds}
+            testID="dynamic-protected-matrix"
+            width={60}
+            renderCell={(cell) => <span>{cell.id}</span>}
+          />
+        </ZoraProvider>
+      );
+    }
+
+    try {
+      act(() => root.render(<DynamicProtectionMatrix />));
+      const a = host.querySelector<HTMLElement>('[data-testid="dynamic-protected-matrix-cell-a"]');
+      if (!a) throw new Error('Missing dynamic-protection focus origin.');
+      act(() => a.focus());
+      act(() => setProtectedCellIds?.(['a']));
+      const protectedA = host.querySelector<HTMLElement>(
+        '[data-testid="dynamic-protected-matrix-cell-a"]',
+      );
+      const b = host.querySelector<HTMLElement>('[data-testid="dynamic-protected-matrix-cell-b"]');
+      if (!protectedA || !b) throw new Error('Missing dynamic-protection cells.');
+      expect(protectedA.getAttribute('aria-disabled')).toBe('true');
+      expect(protectedA.getAttribute('tabindex')).not.toBe('0');
+      expect(b.getAttribute('tabindex')).toBe('0');
+      act(() => {
+        b.focus();
+        void b.dispatchEvent(
+          new browser.KeyboardEvent('keydown', { bubbles: true, key: 'ArrowRight' }),
+        );
+      });
+      const c = host.querySelector<HTMLElement>('[data-testid="dynamic-protected-matrix-cell-c"]');
+      expect(document.activeElement).toBe(c);
+
+      act(() => setProtectedCellIds?.(['a', 'b', 'c']));
+      expect(
+        host.querySelectorAll('[data-testid^="dynamic-protected-matrix-cell-"][tabindex="0"]'),
+      ).toHaveLength(0);
+    } finally {
+      act(() => root.unmount());
+    }
+  });
+});

package/src/features/matrix-grid/adapters/inbound/MatrixGrid.test.tsx

@@ -67,6 +67,7 @@ type MatrixGridComponent = React.ComponentType<{
   readonly layout: typeof layout;
   readonly onSelectionChange?: (ids: readonly string[]) => void;
   readonly onViewportChange?: (viewport: unknown) => void;
+  readonly protectedCellIds?: readonly string[];
   readonly renderCell: (cell: { readonly id: string }) => React.ReactNode;
   readonly readOnly?: boolean;
   readonly selectedCellIds?: readonly string[];
@@ -320,6 +321,84 @@ test('navigates sparse cells by keyboard and applies range and modifier selectio
   });
 });
 
+test('keeps protected cells disabled, unselected, and out of keyboard ranges', async () => {
+  await withMatrixDom(async (host, browser) => {
+    const selections: (readonly string[])[] = [];
+    const root = createRoot(host);
+    const { MatrixGrid } = (await load('components/matrix-grid/MatrixGrid.js')) as {
+      MatrixGrid: MatrixGridComponent;
+    };
+    const { ZoraProvider } = (await load('runtime/ZoraProvider.js')) as {
+      ZoraProvider: ZoraProviderComponent;
+    };
+    const protectedLayout = {
+      columns: [
+        { id: 'column-0', size: 20 },
+        { id: 'column-1', size: 20 },
+        { id: 'column-2', size: 20 },
+      ],
+      rows: [{ id: 'row-0', size: 20 }],
+    };
+    const protectedCells = [
+      { columnId: 'column-0', id: 'a1', rowId: 'row-0' },
+      { columnId: 'column-1', id: 'b1', rowId: 'row-0' },
+      { columnId: 'column-2', id: 'c1', rowId: 'row-0' },
+    ];
+
+    function ProtectedMatrix() {
+      const [selectedIds, setSelectedIds] = React.useState<readonly string[]>(['a1']);
+      return (
+        <ZoraProvider>
+          <MatrixGrid
+            cells={protectedCells}
+            height={40}
+            layout={protectedLayout}
+            protectedCellIds={['b1']}
+            selectedCellIds={selectedIds}
+            selectionMode="multi"
+            testID="protected-matrix"
+            width={60}
+            onSelectionChange={(ids) => {
+              selections.push(ids);
+              setSelectedIds(ids);
+            }}
+            renderCell={(cell) => <span>{cell.id}</span>}
+          />
+        </ZoraProvider>
+      );
+    }
+
+    try {
+      act(() => root.render(<ProtectedMatrix />));
+      const a1 = host.querySelector<HTMLElement>('[data-testid="protected-matrix-cell-a1"]');
+      const b1 = host.querySelector<HTMLElement>('[data-testid="protected-matrix-cell-b1"]');
+      if (!a1 || !b1) throw new Error('Missing protected matrix cells.');
+      expect(b1.getAttribute('aria-disabled')).toBe('true');
+      act(() => {
+        void b1.dispatchEvent(new browser.MouseEvent('click', { bubbles: true }));
+        void b1.dispatchEvent(
+          new browser.KeyboardEvent('keydown', { bubbles: true, key: 'Enter' }),
+        );
+        void b1.dispatchEvent(new browser.KeyboardEvent('keydown', { bubbles: true, key: ' ' }));
+        a1.focus();
+        void a1.dispatchEvent(
+          new browser.KeyboardEvent('keydown', {
+            bubbles: true,
+            key: 'ArrowRight',
+            shiftKey: true,
+          }),
+        );
+      });
+      const c1 = host.querySelector<HTMLElement>('[data-testid="protected-matrix-cell-c1"]');
+      expect(c1).not.toBeNull();
+      expect(document.activeElement).toBe(c1);
+      expect(selections).toEqual([['a1', 'c1']]);
+    } finally {
+      act(() => root.unmount());
+    }
+  });
+});
+
 test('does not capture keyboard input from interactive cell content and respects read-only selection', async () => {
   await withMatrixDom(async (host, browser) => {
     const selections: (readonly string[])[] = [];

package/src/features/matrix-grid/adapters/inbound/MatrixGrid.tsx

@@ -29,6 +29,7 @@ function MatrixGridInner({
   onSelectionChange,
   onViewportChange,
   overscanPixels = 160,
+  protectedCellIds = [],
   readOnly = false,
   renderCell,
   selectedCellIds = [],
@@ -57,6 +58,11 @@ function MatrixGridInner({
   );
   const [visibleIds, setVisibleIds] = React.useState<readonly string[]>([]);
   const anchorId = React.useRef<string | null>(null);
+  const protectedCellIdSet = React.useMemo(() => new Set(protectedCellIds), [protectedCellIds]);
+  const isNavigable = React.useCallback(
+    (id: string) => !protectedCellIdSet.has(id),
+    [protectedCellIdSet],
+  );
 
   const handleViewportChange = React.useCallback(
     (proposal: GridViewport) => {
@@ -68,7 +74,7 @@ function MatrixGridInner({
 
   const activateCell = React.useCallback(
     (cell: GridMatrixCellPlacement, event: unknown) => {
-      if (interactionPolicy === 'passive' || readOnly) return;
+      if (interactionPolicy === 'passive' || readOnly || protectedCellIdSet.has(cell.id)) return;
       const intent = isRangeSelectionEvent(event)
         ? 'range'
         : resolveSelectionEventIntent(event, 'pointer');
@@ -80,6 +86,7 @@ function MatrixGridInner({
           anchorId.current,
           intent,
           selectionMode,
+          protectedCellIdSet,
         ),
       );
       if (intent !== 'range') anchorId.current = cell.id;
@@ -91,6 +98,7 @@ function MatrixGridInner({
       selectedCellIds,
       selectionMode,
       sparseIndex.entries,
+      protectedCellIdSet,
     ],
   );
   const handleKeyboardNavigation = React.useCallback(
@@ -106,6 +114,7 @@ function MatrixGridInner({
     sparseIndex,
     interactionPolicy === 'passive',
     visibleIds,
+    isNavigable,
     handleKeyboardNavigation,
   );
   const focusedPlacement = React.useMemo(() => {
@@ -148,6 +157,7 @@ function MatrixGridInner({
             activateCell,
             keyboard,
             interactionPolicy === 'passive',
+            protectedCellIdSet.has(cell.id),
             readOnly,
             testID,
           );
@@ -171,6 +181,7 @@ function renderMatrixCell(
   activateCell: (cell: GridMatrixCellPlacement, event: unknown) => void,
   keyboard: ReturnType<typeof useMatrixGridKeyboardFocus>,
   passive: boolean,
+  protectedCell: boolean,
   readOnly: boolean,
   testID: string | undefined,
 ) {
@@ -181,7 +192,7 @@ function renderMatrixCell(
       onKeyDown={(event) => {
         if (keyboard.onKeyDown(cell.id, event.key, event.shiftKey)) return true;
         if (!['Enter', ' '].includes(event.key)) return false;
-        if (passive || readOnly) return false;
+        if (passive || protectedCell || readOnly) return false;
         activateCell(cell, event);
         return true;
       }}
@@ -191,9 +202,9 @@ function renderMatrixCell(
         accessibilityActions={[{ name: 'activate' }]}
         accessibilityLabel={`Cell ${cell.id}`}
         accessibilityRole="button"
-        accessibilityState={{ disabled: passive, selected }}
-        disabled={passive}
-        focusable={Platform.OS !== 'web' || canInteract}
+        accessibilityState={{ disabled: passive || protectedCell, selected }}
+        disabled={passive || protectedCell}
+        focusable={!protectedCell && (Platform.OS !== 'web' || canInteract)}
         style={[
           styles.cell,
           {

package/src/features/matrix-grid/adapters/inbound/useMatrixGridKeyboardFocus.ts

@@ -8,6 +8,7 @@ export function useMatrixGridKeyboardFocus(
   index: MatrixGridSparseIndex,
   disabled: boolean,
   visibleIds: readonly string[],
+  isNavigable: (id: string) => boolean,
   onNavigate: (targetId: string, originId: string, shiftKey: boolean) => void,
 ) {
   const [focusedId, setFocusedId] = React.useState<string | null>(null);
@@ -16,9 +17,19 @@ export function useMatrixGridKeyboardFocus(
   const cellRefs = React.useRef(new Map<string, FocusableCell>());
   const visibleIdSet = React.useMemo(() => new Set(visibleIds), [visibleIds]);
   const tabStopId =
-    focusedId !== null && visibleIdSet.has(focusedId)
+    focusedId !== null && visibleIdSet.has(focusedId) && isNavigable(focusedId)
       ? focusedId
-      : visibleIds.find((id) => index.positionById.has(id));
+      : visibleIds.find((id) => index.positionById.has(id) && isNavigable(id));
+
+  React.useEffect(() => {
+    if (focusedRef.current !== null && !isNavigable(focusedRef.current)) {
+      focusedRef.current = null;
+      setFocusedId(null);
+    }
+    if (pendingFocusRef.current !== null && !isNavigable(pendingFocusRef.current)) {
+      pendingFocusRef.current = null;
+    }
+  }, [isNavigable]);
 
   const onFocus = React.useCallback((id: string) => {
     pendingFocusRef.current = null;
@@ -44,7 +55,7 @@ export function useMatrixGridKeyboardFocus(
         return false;
       }
       const originId = focusedRef.current ?? id;
-      const nextId = getMatrixGridNextFocusId(index, originId, key);
+      const nextId = resolveNextNavigableId(index, originId, key, isNavigable);
       if (nextId === null || nextId === originId) return true;
 
       focusedRef.current = nextId;
@@ -59,12 +70,28 @@ export function useMatrixGridKeyboardFocus(
       }
       return true;
     },
-    [disabled, index, onNavigate],
+    [disabled, index, isNavigable, onNavigate],
   );
 
   return { focusedId, onFocus, onKeyDown, registerCell, tabStopId };
 }
 
+/*** Skip protected sparse cells while retaining the nearest deterministic directional navigation. */
+function resolveNextNavigableId(
+  index: MatrixGridSparseIndex,
+  originId: string,
+  key: string,
+  isNavigable: (id: string) => boolean,
+): string | null {
+  let candidate = getMatrixGridNextFocusId(index, originId, key);
+  while (candidate !== null && candidate !== originId && !isNavigable(candidate)) {
+    const nextCandidate = getMatrixGridNextFocusId(index, candidate, key);
+    if (nextCandidate === candidate) return originId;
+    candidate = nextCandidate;
+  }
+  return candidate;
+}
+
 interface FocusableCell {
   focus: () => void;
 }

package/src/features/matrix-grid/application/resolveMatrixGridSelection.test.ts

@@ -51,21 +51,28 @@ const cells = [
 
 describe('resolveMatrixGridSelection', () => {
   test('preserves the canonical single and multi selection intent rules', () => {
-    expect(resolveMatrixGridSelection(cells, ['a1'], 'b1', 'a1', 'toggle', 'single')).toEqual([
-      'b1',
-    ]);
-    expect(resolveMatrixGridSelection(cells, ['a1'], 'b1', 'a1', 'toggle', 'multi')).toEqual([
-      'a1',
-      'b1',
-    ]);
+    expect(
+      resolveMatrixGridSelection(cells, ['a1'], 'b1', 'a1', 'toggle', 'single', new Set()),
+    ).toEqual(['b1']);
+    expect(
+      resolveMatrixGridSelection(cells, ['a1'], 'b1', 'a1', 'toggle', 'multi', new Set()),
+    ).toEqual(['a1', 'b1']);
   });
 
   test('uses the selection contract for a sparse rectangular shift range', () => {
-    expect(resolveMatrixGridSelection(cells, ['a1'], 'b2', 'a1', 'range', 'multi')).toEqual([
-      'a1',
-      'b1',
-      'a2',
-      'b2',
-    ]);
+    expect(
+      resolveMatrixGridSelection(cells, ['a1'], 'b2', 'a1', 'range', 'multi', new Set()),
+    ).toEqual(['a1', 'b1', 'a2', 'b2']);
+  });
+
+  test('excludes protected cells from direct and range selection proposals', () => {
+    const protectedCellIds = new Set(['b1', 'a2']);
+
+    expect(
+      resolveMatrixGridSelection(cells, ['a1'], 'b1', 'a1', 'replace', 'multi', protectedCellIds),
+    ).toEqual(['a1']);
+    expect(
+      resolveMatrixGridSelection(cells, ['a1'], 'b2', 'a1', 'range', 'multi', protectedCellIds),
+    ).toEqual(['a1', 'b2']);
   });
 });

package/src/features/matrix-grid/application/resolveMatrixGridSelection.ts

@@ -12,7 +12,9 @@ export function resolveMatrixGridSelection(
   anchorId: string | null,
   intent: MatrixGridSelectionIntent,
   mode: SelectionMode,
+  protectedCellIds: ReadonlySet<string>,
 ): readonly string[] {
+  if (protectedCellIds.has(cellId)) return selectedIds;
   if (mode === 'single') return applySelectionIntent(selectedIds, cellId, 'replace');
   if (intent !== 'range') return applySelectionIntent(selectedIds, cellId, intent);
 
@@ -23,6 +25,7 @@ export function resolveMatrixGridSelection(
   return cells
     .filter(
       (cell) =>
+        !protectedCellIds.has(cell.id) &&
         cell.rowIndex >= Math.min(anchor.rowIndex, target.rowIndex) &&
         cell.rowIndex <= Math.max(anchor.rowIndex, target.rowIndex) &&
         cell.columnIndex >= Math.min(anchor.columnIndex, target.columnIndex) &&

package/src/types/matrix-grid.ts

@@ -22,6 +22,8 @@ export interface MatrixGridProps extends ZoraBaseProps {
   readonly overscanPixels?: number;
   /** Retains focus navigation while suppressing cell-selection mutations. */
   readonly readOnly?: boolean;
+  /** Cells that remain visible but cannot receive focus or change the controlled selection. */
+  readonly protectedCellIds?: readonly string[];
   readonly selectedCellIds?: readonly string[];
   readonly selectionMode?: SelectionMode;
   readonly onSelectionChange?: (ids: readonly string[]) => void;

package/web-dist/components/grid-interactions/GridInteractions.js

@@ -293,6 +293,7 @@ function GridInteractionsKeyboardProxy({
   React.useEffect(() => () => onSpaceKeyChange(false), [onSpaceKeyChange]);
   return /* @__PURE__ */ jsx("div", {
     "aria-label": "Grid interaction keyboard controls",
+    role: "group",
     onBlur: () => onSpaceKeyChange(false),
     onKeyDown: (event) => {
       if (!enabled)
@@ -314,11 +315,18 @@ function GridInteractionsKeyboardProxy({
       if (isSpaceKey(event))
         onSpaceKeyChange(false);
     },
-    style: { display: "contents" },
+    style: keyboardBoundaryStyle,
     tabIndex: enabled ? 0 : -1,
     children
   });
 }
+var keyboardBoundaryStyle = {
+  alignSelf: "stretch",
+  display: "flex",
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0
+};
 function isSpaceKey(event) {
   return event.code === "Space" || event.key === " ";
 }
@@ -392,7 +400,6 @@ function GridInteractions({
   return /* @__PURE__ */ jsx2(import_react_native.View, {
     accessible: true,
     accessibilityLabel: "Grid interaction surface",
-    accessibilityRole: "adjustable",
     ref: surfaceRef,
     testID,
     onResponderGrant: (event) => {