@dxos/plugin-navtree 0.8.4-main.67995b8 → 0.8.4-main.69d29f4

package/src/capabilities/state/state.ts

@@ -0,0 +1,121 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { Path } from '@dxos/react-ui-list';
+
+import { meta } from '../../meta';
+import { type NavTreeCapabilities as NC, NavTreeCapabilities } from '../../types';
+
+const KEY = `${meta.id}/state/v1`;
+
+/** Default item state for new entries. */
+const defaultItemState: NC.NavTreeItemState = { open: false, current: false, alternateTree: false };
+
+/** Default state entries for initial tree structure. */
+// TODO(thure): Initialize these dynamically.
+const defaultStateEntries: [string, NC.NavTreeItemState][] = [
+  ['root', { open: true, current: false }],
+  ['root~dxos.org/plugin/space-spaces', { open: true, current: false }],
+  ['root~dxos.org/plugin/files', { open: true, current: false }],
+];
+
+const getInitialState = (): Map<string, NC.NavTreeItemState> => {
+  const stringified = localStorage.getItem(KEY);
+  if (!stringified) {
+    return new Map(defaultStateEntries);
+  }
+
+  try {
+    const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
+    return new Map(cached.map(([key, value]) => [key, { open: value.open, current: false }]));
+  } catch {
+    return new Map(defaultStateEntries);
+  }
+};
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const registry = yield* Capability.get(Common.Capability.AtomRegistry);
+    const layoutAtom = yield* Capability.get(Common.Capability.Layout);
+
+    // Backing state for persistence (not reactive).
+    const backingState = getInitialState();
+
+    // Per-path atom family for fine-grained reactivity.
+    // keepAlive prevents atoms from being garbage collected when components unmount,
+    // ensuring state is preserved across deletion/restoration cycles.
+    const itemAtomFamily = Atom.family((pathString: string) =>
+      Atom.make<NC.NavTreeItemState>(backingState.get(pathString) ?? { ...defaultItemState }).pipe(Atom.keepAlive),
+    );
+
+    const getItemAtom = (path: string[]): Atom.Atom<NC.NavTreeItemState> => {
+      const pathString = Path.create(...path);
+      return itemAtomFamily(pathString);
+    };
+
+    const getItem = (path: string[]): NC.NavTreeItemState => {
+      return registry.get(getItemAtom(path));
+    };
+
+    const setItem = (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => {
+      const pathString = Path.create(...path);
+      const atom = itemAtomFamily(pathString);
+      const currentValue = registry.get(atom);
+      const newValue = { ...currentValue, [key]: next };
+
+      // Update the atom.
+      registry.set(atom, newValue);
+
+      // Update backing state and persist to localStorage.
+      backingState.set(pathString, newValue);
+      localStorage.setItem(KEY, JSON.stringify(Array.from(backingState.entries())));
+    };
+
+    // Subscribe to layout changes to update current state.
+    let previous: string[] = [];
+    const unsubscribe = registry.subscribe(layoutAtom, (layout) => {
+      const removed = previous.filter((id) => !layout.active.includes(id));
+      previous = layout.active;
+
+      const handleUpdate = () => {
+        // Mark removed items as not current.
+        removed.forEach((id) => {
+          const keys = Array.from(backingState.keys()).filter((key) => Path.last(key) === id);
+          keys.forEach((key) => {
+            setItem(Path.parts(key), 'current', false);
+          });
+        });
+
+        // Mark active items as current.
+        layout.active.forEach((id: string) => {
+          const keys = Array.from(new Set([...backingState.keys(), id])).filter((key) => Path.last(key) === id);
+          keys.forEach((key) => {
+            setItem(Path.parts(key), 'current', true);
+          });
+        });
+      };
+
+      // TODO(wittjosiah): This is setTimeout because there's a race between the keys being initialized.
+      //   Keys are initialized on the first render of an item in the navtree.
+      //   This could be avoided if the location was a path as well and not just an id.
+      const timeout = setTimeout(handleUpdate, 500);
+      handleUpdate();
+      return () => clearTimeout(timeout);
+    });
+
+    return Capability.contributes(
+      NavTreeCapabilities.State,
+      {
+        getItem,
+        getItemAtom,
+        setItem,
+      },
+      () => Effect.sync(() => unsubscribe()),
+    );
+  }),
+);

package/src/components/CommandsDialog/CommandsDialog.tsx

@@ -2,117 +2,128 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useMemo, useState } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 
-import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
-import { type ActionLike, isAction, isActionGroup } from '@dxos/app-graph';
+import { Common } from '@dxos/app-framework';
+import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
+import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions } from '@dxos/plugin-graph';
-import { Button, Dialog, Icon, useTranslation, toLocalizedString } from '@dxos/react-ui';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import {
-  cardDialogContent,
-  cardDialogHeader,
-  cardDialogPaddedOverflow,
-  cardDialogSearchListRoot,
-} from '@dxos/react-ui-stack';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { Button, Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { osTranslations } from '@dxos/ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { KEY_BINDING, NAVTREE_PLUGIN } from '../../meta';
+import { KEY_BINDING, meta } from '../../meta';
+
+export type CommandsDialogContentProps = {
+  selected?: string;
+};
 
 // TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
-export const CommandsDialogContent = ({ selected: initial }: { selected?: string }) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const [selected, setSelected] = useState<string | undefined>(initial);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { graph } = useAppGraph();
+export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogContentProps>(
+  ({ selected: initial }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const { invokeSync } = useOperationInvoker();
+    const runAction = useActionRunner();
+    const { graph } = useAppGraph();
+    const [selected, setSelected] = useState<string | undefined>(initial);
 
-  // Traverse graph.
-  // TODO(burdon): Factor out commonality with shortcut dialog.
-  const allActions = useMemo(() => {
-    // TODO(burdon): Get from navtree (not keyboard).
-    const current = Keyboard.singleton.getCurrentContext();
-    const actionMap = new Set<string>();
-    const actions: ActionLike[] = [];
-    graph.traverse({
-      visitor: (node, path) => {
-        if (
-          (isAction(node) || isActionGroup(node)) &&
-          !actionMap.has(node.id) &&
-          current.startsWith(path.slice(0, -1).join('/'))
-        ) {
-          actionMap.add(node.id);
-          actions.push(node);
-        }
-      },
-    });
+    // Traverse graph.
+    // TODO(burdon): Factor out commonality with shortcut dialog.
+    const allActions = useMemo(() => {
+      // TODO(burdon): Get from navtree (not keyboard).
+      const current = Keyboard.singleton.getCurrentContext();
+      const actionMap = new Set<string>();
+      const actions: Node.ActionLike[] = [];
+      Graph.traverse(graph, {
+        visitor: (node, path) => {
+          if (
+            (Node.isAction(node) || Node.isActionGroup(node)) &&
+            !actionMap.has(node.id) &&
+            current.startsWith(path.slice(0, -1).join('/'))
+          ) {
+            actionMap.add(node.id);
+            actions.push(node);
+          }
+        },
+      });
 
-    actions.sort((a, b) => {
-      return toLocalizedString(a.properties.label, t)
-        ?.toLowerCase()
-        .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
-    });
+      actions.sort((a, b) => {
+        return toLocalizedString(a.properties.label, t)
+          ?.toLowerCase()
+          .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
+      });
 
-    return actions;
-  }, [graph]);
+      return actions;
+    }, [graph]);
 
-  const group = allActions.find(({ id }) => id === selected);
-  const groupActions = useActions(graph, group?.id);
-  const actions = isActionGroup(group) ? groupActions : allActions;
+    const group = allActions.find(({ id }) => id === selected);
+    const groupActions = useActions(graph, group?.id);
+    const actions = Node.isActionGroup(group) ? groupActions : allActions;
 
-  return (
-    <Dialog.Content classNames={cardDialogContent}>
-      <Dialog.Title classNames={cardDialogHeader}>{t('commands dialog title', { ns: NAVTREE_PLUGIN })}</Dialog.Title>
+    const { results, handleSearch } = useSearchListResults({
+      items: actions,
+      extract: (action) => toLocalizedString(action.properties.label, t),
+    });
 
-      {/* TODO(burdon): BUG: Overscrolls container. */}
-      <SearchList.Root label={t('command list input placeholder')} classNames={cardDialogSearchListRoot}>
-        <SearchList.Input placeholder={t('command list input placeholder')} />
-        <SearchList.Content classNames={cardDialogPaddedOverflow}>
-          {actions?.map((action) => {
-            const label = toLocalizedString(action.properties.label, t);
-            const shortcut =
-              typeof action.properties.keyBinding === 'string'
-                ? action.properties.keyBinding
-                : action.properties.keyBinding?.[getHostPlatform()];
-            return (
-              <SearchList.Item
-                value={label}
-                key={action.id}
-                onSelect={() => {
-                  if (action.properties.disabled) {
-                    return;
-                  }
+    return (
+      <Dialog.Content ref={forwardedRef}>
+        <Dialog.Title>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
+        <SearchList.Root onSearch={handleSearch}>
+          <div aria-label={t('command list input placeholder')} role='combobox' aria-expanded='true'>
+            <SearchList.Input placeholder={t('command list input placeholder')} />
+            <SearchList.Content>
+              <SearchList.Viewport>
+                {results.map((action) => {
+                  const shortcut =
+                    typeof action.properties.keyBinding === 'string'
+                      ? action.properties.keyBinding
+                      : action.properties.keyBinding?.[getHostPlatform()];
 
-                  if (isActionGroup(action)) {
-                    setSelected(action.id);
-                    return;
-                  }
+                  return (
+                    <SearchList.Item
+                      value={action.id}
+                      key={action.id}
+                      label={toLocalizedString(action.properties.label, t)}
+                      icon={action.properties.icon}
+                      suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
+                      onSelect={() => {
+                        if (action.properties.disabled) {
+                          return;
+                        }
 
-                  void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
-                  setTimeout(() => {
-                    const node = graph.getConnections(group?.id ?? action.id, 'inbound')[0];
-                    void (node && isAction(action) && action.data({ parent: node, caller: KEY_BINDING }));
-                  });
-                }}
-                classNames='flex items-center gap-2'
-                disabled={action.properties.disabled}
-                {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-              >
-                <Icon icon={action.properties.icon} size={4} />
-                <span className='grow truncate'>{label}</span>
-                {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
-              </SearchList.Item>
-            );
-          })}
-        </SearchList.Content>
-      </SearchList.Root>
+                        if (Node.isActionGroup(action)) {
+                          setSelected(action.id);
+                          return;
+                        }
 
-      <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
-        <Dialog.Close asChild>
-          <Button classNames='is-full'>{t('close label', { ns: 'os' })}</Button>
-        </Dialog.Close>
-      </div>
-    </Dialog.Content>
-  );
-};
+                        invokeSync(Common.LayoutOperation.UpdateDialog, { state: false });
+                        setTimeout(() => {
+                          const node = Graph.getConnections(graph, group?.id ?? action.id, 'inbound')[0];
+                          if (node && Node.isAction(action)) {
+                            void runAction(action, { parent: node, caller: KEY_BINDING });
+                          }
+                        });
+                      }}
+                      classNames='flex items-center gap-2'
+                      disabled={action.properties.disabled}
+                      {...(action.properties?.testId && {
+                        'data-testid': action.properties.testId,
+                      })}
+                    />
+                  );
+                })}
+              </SearchList.Viewport>
+            </SearchList.Content>
+          </div>
+        </SearchList.Root>
+        <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
+          <Dialog.Close asChild>
+            <Button classNames='is-full'>{t('close label', { ns: osTranslations })}</Button>
+          </Dialog.Close>
+        </div>
+      </Dialog.Content>
+    );
+  },
+);

package/src/components/CommandsDialog/CommandsTrigger.tsx

@@ -4,29 +4,20 @@
 
 import React from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
-import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../../meta';
+import { COMMANDS_DIALOG, meta } from '../../meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { invokeSync } = useOperationInvoker();
+  const { t } = useTranslation(meta.id);
   return (
     <Button
       classNames='m-1 pli-1 lg:pli-2'
-      onClick={() =>
-        dispatch(
-          createIntent(LayoutAction.UpdateDialog, {
-            part: 'dialog',
-            subject: COMMANDS_DIALOG,
-            options: {
-              blockAlign: 'start',
-            },
-          }),
-        )
-      }
+      onClick={() => invokeSync(Common.LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })}
     >
       <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>
       <Icon icon='ph--magnifying-glass--regular' size={5} />

package/src/components/NavTree/NavTree.stories.tsx

@@ -2,36 +2,23 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
-import { Schema } from 'effect';
-import React from 'react';
-
-import {
-  Capabilities,
-  IntentPlugin,
-  LayoutAction,
-  SettingsPlugin,
-  contributes,
-  createResolver,
-  defineCapability,
-  useCapability,
-} from '@dxos/app-framework';
+import { Atom, type Registry } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { type KeyboardEvent, useCallback, useRef } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { useAtomCapability } from '@dxos/app-framework/react';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { live } from '@dxos/live-object';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
+import { OperationResolver } from '@dxos/operation';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { useAttentionAttributes, useAttention } from '@dxos/react-ui-attention';
+import { withTheme } from '@dxos/react-ui/testing';
+import { useAttention, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
-import { defaultTx, mx } from '@dxos/react-ui-theme';
-import { withLayout } from '@dxos/storybook-utils';
+import { mx } from '@dxos/ui-theme';
 
 import { NavTreePlugin } from '../../NavTreePlugin';
 import { storybookGraphBuilders } from '../../testing';
@@ -40,7 +27,7 @@ import { NavTreeContainer } from '../NavTreeContainer';
 
 faker.seed(1234);
 
-const StoryState = defineCapability<{ tab: string }>('story-state');
+const StoryState = Capability.make<Atom.Atom<{ tab: string }>>('story-state');
 
 // TODO(burdon): Fix outline (e.g., button in sidebar nav is clipped when focused).
 // TODO(burdon): Consider similar containment of: Table, Sheet, Kanban Column, Form, etc.
@@ -52,7 +39,7 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
   const { hasAttention } = useAttention(attendableId);
   console.log('hasAttention', hasAttention);
   return (
-    <div className='flex p-1 items-center border-b border-separator'>
+    <div className='flex p-1 items-center border-be border-separator'>
       <IconButton
         density='coarse'
         icon='ph--atom--regular'
@@ -68,6 +55,15 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
 
 const StoryPlank = ({ attendableId }: { attendableId: string }) => {
   const attentionAttrs = useAttentionAttributes(attendableId);
+  const rootElement = useRef<HTMLDivElement | null>(null);
+
+  // NOTE(thure): This is the same workaround as in Plank, but that component is out of scope for this story.
+  // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.target === event.currentTarget && event.key === 'Escape') {
+      rootElement.current?.closest('main')?.focus();
+    }
+  }, []);
 
   return (
     <StackItem.Root
@@ -75,10 +71,12 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
       {...attentionAttrs}
       classNames='bg-baseSurface border-ie border-separator'
       size={30}
+      onKeyDown={handleKeyDown}
+      ref={rootElement}
     >
       <StoryPlankHeading attendableId={attendableId} />
       <StackItem.Content toolbar>
-        <Toolbar.Root classNames='border-b border-subduedSeparator'>
+        <Toolbar.Root classNames='border-be border-subduedSeparator'>
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
@@ -99,7 +97,7 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
 };
 
 const DefaultStory = () => {
-  const state = useCapability(StoryState);
+  const state = useAtomCapability(StoryState);
 
   return (
     <Main.Root complementarySidebarState='closed'>
@@ -116,85 +114,92 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof NavTreeContainer> = {
+const meta = {
   title: 'plugins/plugin-navtree/NavTree',
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
+        ...corePlugins(),
+        StorybookPlugin({
+          initialState: { sidebarState: 'expanded' },
+        }),
+
         NavTreePlugin(),
       ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders(context)),
-        contributes(Capabilities.IntentResolver, [
-          createResolver({
-            intent: LayoutAction.UpdateLayout,
-            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
-              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
-            resolve: ({ subject }) => {
-              const state = context.getCapability(StoryState);
-              state.tab = subject;
-            },
-          }),
-        ]),
-      ],
+      capabilities: () => {
+        const storyStateAtom = Atom.make({ tab: 'space-0' }).pipe(Atom.keepAlive);
+        return [
+          Capability.contributes(StoryState, storyStateAtom),
+          Capability.contributes(Common.Capability.AppGraphBuilder, storybookGraphBuilders()),
+          Capability.contributes(Common.Capability.OperationResolver, [
+            OperationResolver.make({
+              operation: Common.LayoutOperation.SwitchWorkspace,
+              handler: ({ subject }) =>
+                Effect.gen(function* () {
+                  const registry: Registry.Registry = yield* Capability.get(Common.Capability.AtomRegistry);
+                  registry.set(storyStateAtom, { tab: subject });
+                }),
+            }),
+          ]),
+        ];
+      },
     }),
-    withLayout({ fullscreen: true }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof NavTreeContainer>;
 
 export default meta;
 
 type Story = StoryObj<typeof NavTreeContainer>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-// TODO(wittjosiah): Deduplicate plugins/capabilities with default story.
-export const WithClient: Story = {
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
-        NavTreePlugin(),
-        ClientPlugin({
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        SpacePlugin(),
-        // Needs to be last so that the dialog and popovers have access to all contexts.
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-      ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        contributes(Capabilities.IntentResolver, [
-          createResolver({
-            intent: LayoutAction.UpdateLayout,
-            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
-              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
-            resolve: ({ subject }) => {
-              const state = context.getCapability(StoryState);
-              state.tab = subject;
-            },
-          }),
-        ]),
-      ],
-    }),
-    withLayout({ fullscreen: true }),
-  ],
+    // Find the element with treegrid role and click on its parent
+    const treegridElement = await canvas.findByRole('treegrid');
+    const treegridParent = treegridElement.parentElement;
+    if (treegridParent) {
+      await userEvent.click(treegridParent);
+    }
+
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is on an element with attribute data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Shift-Tab
+    await userEvent.keyboard('{Shift>}{Tab}{/Shift}');
+
+    // Press Enter
+    await userEvent.keyboard('{Enter}');
+
+    // Confirm that focus is now on an element with data-attendable-id="space-0:object-0"
+    await expect(document.activeElement).toHaveAttribute('data-attendable-id', 'space-0:object-0');
+
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
+  },
 };