@immediately-run/grove 0.1.2 → 0.1.4

package/src/components/GroveNav.test.tsx

@@ -21,10 +21,8 @@ const NAV = {
   navigationState: { sandboxPath: '/app/x' },
 };
 
-const mount = async (shell: Partial<GroveShell>) => {
-  const host = document.createElement('div');
-  document.body.appendChild(host);
-  const full: GroveShell = {
+const fullShell = (shell: Partial<GroveShell>): GroveShell =>
+  ({
     theme: 'default',
     setTheme: vi.fn(),
     light: false,
@@ -52,7 +50,12 @@ const mount = async (shell: Partial<GroveShell>) => {
     missing: false,
     directory: { status: 'idle' },
     ...shell,
-  } as unknown as GroveShell;
+  }) as unknown as GroveShell;
+
+const mount = async (shell: Partial<GroveShell>) => {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  const full: GroveShell = fullShell(shell);
   await act(async () => {
     createRoot(host).render(
       <TinkerableContext.Provider value={NAV as never}>
@@ -87,3 +90,140 @@ describe('the theme menu (R3-308 — two independent axes)', () => {
     expect(host.querySelectorAll('.gtm__row').length).toBeGreaterThan(1);
   });
 });
+
+describe('the theme menu contract (R3-608)', () => {
+  const openMenu = async (over: Partial<GroveShell>) => {
+    const host = await mount({ menuOpen: true, theme: 'default', light: false, ...over });
+    return host;
+  };
+
+  it('Escape returns focus to the theme button (and closes, via the shell state it drives)', async () => {
+    // The shell's setMenuOpen drives the re-render like the real one would:
+    // focus-return rides the hook's cleanup when the menu actually closes.
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    const shell = { menuOpen: false, theme: 'default', light: false, setMenuOpen: vi.fn() } as Parameters<typeof fullShell>[0];
+    await act(async () => {
+      root.render(
+        <TinkerableContext.Provider value={NAV as never}>
+          <GroveShellContext.Provider value={fullShell(shell)}>
+            <GroveNav />
+          </GroveShellContext.Provider>
+        </TinkerableContext.Provider>,
+      );
+    });
+    const themeButton = host.querySelector('.grove-theme-control') as HTMLButtonElement;
+    themeButton.focus();
+    const renderWith = (menuOpen: boolean) =>
+      act(async () => {
+        root.render(
+          <TinkerableContext.Provider value={NAV as never}>
+            <GroveShellContext.Provider value={fullShell({ ...shell, menuOpen })}>
+              <GroveNav />
+            </GroveShellContext.Provider>
+          </TinkerableContext.Provider>,
+        );
+      });
+    shell.setMenuOpen = vi.fn(((v: boolean) => {
+      if (v === false) void renderWith(false);
+    }) as GroveShell['setMenuOpen']);
+    await renderWith(true);
+    // focus-in: the menu's first control holds focus.
+    const first = host.querySelector('[role="menuitemradio"]') as HTMLElement;
+    expect(document.activeElement).toBe(first);
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+    });
+    expect(shell.setMenuOpen).toHaveBeenCalledWith(false);
+    expect(host.querySelector('.grove-theme-menu')).toBeNull(); // the menu closed
+    expect(document.activeElement).toBe(themeButton);
+  });
+
+  it('arrows move among the menuitems and SELECT the radio they land on', async () => {
+    const setTheme = vi.fn();
+    const host = await openMenu({ setTheme });
+    const items = [...host.querySelectorAll('[role^="menuitem"]')] as HTMLElement[];
+    expect(items.length).toBeGreaterThanOrEqual(3); // themes + dark/light
+    items[0].focus();
+    await act(async () => {
+      items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true }));
+    });
+    expect(document.activeElement).toBe(items[1]);
+    // The landed radio is selected when it was not already checked.
+    expect(setTheme).toHaveBeenCalledTimes(items[1].getAttribute('aria-checked') === 'true' ? 0 : 1);
+  });
+});
+
+describe('the theme menu Tab contract (R3-608 round 2)', () => {
+  it('Tab LEAVES the menu and closes it — never stranded over the scrim', async () => {
+    let renderWith: (menuOpen: boolean) => Promise<void> = async () => undefined;
+    const shell = { menuOpen: false, theme: 'default', light: false, setMenuOpen: vi.fn() } as Parameters<typeof fullShell>[0];
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    renderWith = (menuOpen: boolean) =>
+      act(async () => {
+        root.render(
+          <TinkerableContext.Provider value={NAV as never}>
+            <GroveShellContext.Provider value={fullShell({ ...shell, menuOpen })}>
+              <GroveNav />
+            </GroveShellContext.Provider>
+          </TinkerableContext.Provider>,
+        );
+      });
+    shell.setMenuOpen = vi.fn(((v: boolean) => {
+      if (v === false) void renderWith(false);
+    }) as GroveShell['setMenuOpen']);
+    await renderWith(true);
+    expect(host.querySelector('.grove-theme-menu')).toBeTruthy();
+    const first = host.querySelector('[role="menuitemradio"]') as HTMLElement;
+    await act(async () => {
+      first.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true }));
+    });
+    expect(shell.setMenuOpen).toHaveBeenCalledWith(false);
+    expect(host.querySelector('.grove-theme-menu')).toBeNull(); // closed, not stranded
+  });
+});
+
+describe('the theme menu Tab contract (R3-608 round 3)', () => {
+  it('Tab-close leaves focus where the browser moved it — never yanked back to the trigger', async () => {
+    let renderWith: (menuOpen: boolean) => Promise<void> = async () => undefined;
+    const shell = { menuOpen: false, theme: 'default', light: false, setMenuOpen: vi.fn() } as Parameters<typeof fullShell>[0];
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    renderWith = (menuOpen: boolean) =>
+      act(async () => {
+        root.render(
+          <TinkerableContext.Provider value={NAV as never}>
+            <GroveShellContext.Provider value={fullShell({ ...shell, menuOpen })}>
+              <GroveNav />
+            </GroveShellContext.Provider>
+          </TinkerableContext.Provider>,
+        );
+      });
+    shell.setMenuOpen = vi.fn(((v: boolean) => {
+      if (v === false) void renderWith(false);
+    }) as GroveShell['setMenuOpen']);
+    await renderWith(true);
+    // The page's next tab stop AFTER the menu (the real contract's landing
+    // spot for a Tab-leave).
+    const after = document.createElement('button');
+    after.textContent = 'next stop';
+    host.appendChild(after);
+    const first = host.querySelector('[role="menuitemradio"]') as HTMLElement;
+    first.focus();
+    // Focus the next stop the way the browser's default Tab move would land.
+    await act(async () => {
+      first.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true }));
+      after.focus(); // the default move this key authorizes
+    });
+    expect(shell.setMenuOpen).toHaveBeenCalledWith(false);
+    expect(host.querySelector('.grove-theme-menu')).toBeNull();
+    // The move stands: focus is NOT pulled back to the theme trigger.
+    const themeButton = host.querySelector('.grove-theme-control') as HTMLButtonElement;
+    expect(document.activeElement).toBe(after);
+    expect(document.activeElement).not.toBe(themeButton);
+  });
+});

package/src/components/GroveNav.tsx

@@ -1,6 +1,7 @@
 import { Link } from '@immediately-run/sdk';
-import { useShell } from '../lib/shell';
+import { useShell, EDIT_REFUSED_NOTICE } from '../lib/shell';
 import { getContentRoot } from '../lib/contentRoot';
+import { useOverlayFocusDismiss } from '../hooks/useOverlayFocusDismiss';
 import { THEMES } from '../data/themes';
 import Icon from './Icon';
 
@@ -14,6 +15,9 @@ export default function GroveNav() {
     entryKey,
     writable,
     openEditor,
+    editBusy,
+    editRefused,
+    editHint,
     theme,
     setTheme,
     light,
@@ -33,6 +37,28 @@ export default function GroveNav() {
   // would create a file in Grove's own repo (R3-266).
   const newEntry = () => openEditor(`${getContentRoot()}untitled.mdx`);
 
+  // The theme menu's contract (R3-608): the shared overlay hook with Tab-trap
+  // OFF (menus do not trap Tab), plus the menu keydown map — arrows walk the
+  // menuitems, Escape closes (the hook), focus returns to the theme button.
+  const menuRef = useOverlayFocusDismiss(menuOpen, () => setMenuOpen(false), { trapTab: false });
+  const onMenuKeyDown = (e: React.KeyboardEvent) => {
+    const items = [...(menuRef.current?.querySelectorAll<HTMLElement>('[role^="menuitem"]') ?? [])];
+    if (!items.length) return;
+    const idx = items.indexOf(document.activeElement as HTMLElement);
+    const move = (i: number) => {
+      e.preventDefault();
+      const next = items[(i + items.length) % items.length];
+      next.focus();
+      // APG menu radios: arrows MOVE focus AND activate — the radio the arrow
+      // lands on is selected, so the keyboard alone can change the theme.
+      if (next.getAttribute('role') === 'menuitemradio' && next.getAttribute('aria-checked') !== 'true') next.click();
+    };
+    if (e.key === 'ArrowDown') move(idx + 1);
+    else if (e.key === 'ArrowUp') move(idx - 1);
+    else if (e.key === 'Home') move(0);
+    else if (e.key === 'End') move(items.length - 1);
+  };
+
   return (
     <nav className="grove-nav">
       <button className="grove-hamburger icbtn" aria-label="Menu" onClick={() => setDrawerOpen(true)}>
@@ -54,21 +80,35 @@ export default function GroveNav() {
           <Icon name="search" />
         </button>
         {writable && (
-          <button className="icbtn" aria-label="New entry" onClick={newEntry}>
-            <Icon name="plus" />
-          </button>
+          <>
+            <button
+              className="icbtn"
+              aria-label={editBusy ? 'Opening editor…' : 'New entry'}
+              title={editHint}
+              data-busy={editBusy ? '1' : '0'}
+              disabled={editBusy}
+              onClick={newEntry}
+            >
+              <Icon name="plus" />
+            </button>
+            {editRefused && (
+              <span className="grove-edit-refused" role="status" title={EDIT_REFUSED_NOTICE}>
+                {EDIT_REFUSED_NOTICE}
+              </span>
+            )}
+          </>
         )}
         <button className="icbtn" aria-label="Ask Grove" onClick={askGrove}>
           <Icon name="message" />
         </button>
         <div className="grove-nav__more">
-          <button className="icbtn" title="Theme" aria-expanded={menuOpen} onClick={() => setMenuOpen((o) => !o)}>
+          <button className="icbtn grove-theme-control" title="Theme" aria-expanded={menuOpen} aria-haspopup="menu" onClick={() => setMenuOpen((o) => !o)}>
             ☀
           </button>
           {menuOpen ? (
             <>
               <div className="gtm__scrim" onClick={() => setMenuOpen(false)} />
-              <div className="grove-theme-menu" role="menu">
+              <div className="grove-theme-menu" role="menu" aria-label="Theme" ref={menuRef} tabIndex={-1} onKeyDown={onMenuKeyDown}>
                 <div className="gtm__h">Theme</div>
                 <div className="gtm__list">
                   {THEMES.map((t) => (
@@ -76,6 +116,9 @@ export default function GroveNav() {
                       key={t.id}
                       className="gtm__row"
                       data-cur={theme === t.id ? '1' : '0'}
+                      role="menuitemradio"
+                      aria-checked={theme === t.id}
+                      tabIndex={-1}
                       onClick={() => setTheme(t.id)}
                     >
                       <span className="gtm__sw" style={{ background: t.swatch }} />
@@ -90,10 +133,10 @@ export default function GroveNav() {
                 <div className="gtm__appearance">
                   <div className="gtm__sub">Appearance</div>
                   <div className="gtm__seg">
-                    <button data-on={!light ? '1' : '0'} onClick={() => setLight(false)}>
+                    <button data-on={!light ? '1' : '0'} role="menuitemradio" aria-checked={!light} tabIndex={-1} onClick={() => setLight(false)}>
                       <Icon name="moon" /> Dark
                     </button>
-                    <button data-on={light ? '1' : '0'} onClick={() => setLight(true)}>
+                    <button data-on={light ? '1' : '0'} role="menuitemradio" aria-checked={light} tabIndex={-1} onClick={() => setLight(true)}>
                       <Icon name="sun" /> Light
                     </button>
                   </div>

package/src/components/Icon.tsx

@@ -28,7 +28,6 @@ const PATHS: Record<string, string> = {
   message: 'M21 11.5a8.5 8.5 0 01-12.3 7.6L3 21l1.9-5.7A8.5 8.5 0 1121 11.5z',
   shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
   list: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
-  stop: 'M6 6h12v12H6z',
 };
 
 interface IconProps extends SVGProps<SVGSVGElement> {

package/src/components/InlineProse.tsx

@@ -0,0 +1,37 @@
+// R3-531 — the one component that renders a frontmatter prose field: a
+// `title`/`description`/`scope` parsed by `@immediately-run/mdx-plugins`'s
+// `parseInlineProse` into `code`/`strong`/`em` and text. Every list row, card,
+// header, search hit and sidebar label renders its metadata field through this,
+// so a backtick in the corpus prints as a code span and never as body-font
+// punctuation. The docs fork copies this file VERBATIM (its convention for
+// engine components) — which is why it imports nothing grove-local.
+//
+// Links, images, HTML and JSX are not inline prose and never will be: a title
+// is not a body. Fields that become attributes, labels or prompt strings use
+// the parser's `plainProse` directly instead of this component.
+
+import { Fragment } from 'react';
+import { parseInlineProse, type InlineProseNode } from '@immediately-run/mdx-plugins';
+
+function renderNodes(nodes: InlineProseNode[]): React.ReactNode[] {
+  return nodes.map((n, i) => {
+    if (n.type === 'code') return <code key={i}>{n.value}</code>;
+    if (n.type === 'strong') return <strong key={i}>{renderNodes(n.children)}</strong>;
+    if (n.type === 'emphasis') return <em key={i}>{renderNodes(n.children)}</em>;
+    return <Fragment key={i}>{n.value}</Fragment>;
+  });
+}
+
+export default function InlineProse({
+  text,
+  trimPeriod = false,
+}: {
+  text: string;
+  /** Trim one trailing period, as the list components always have. */
+  trimPeriod?: boolean;
+}) {
+  // Trim before parsing: the corpus ends titles on a period, and the period
+  // sits OUTSIDE any code span, so a raw-string slice is the whole job.
+  const src = trimPeriod && text.endsWith('.') ? text.slice(0, -1) : text;
+  return <Fragment>{renderNodes(parseInlineProse(src))}</Fragment>;
+}

package/src/components/LayoutGallery.tsx

@@ -0,0 +1,65 @@
+import { manifestLayouts, manifestPageVariants, manifestCollections } from '../data/catalogue';
+
+// The layouts gallery (R3-311): the twelve shapes, grouped by the three buckets
+// the catalogue exists as three of — because the MECHANISM differs per bucket (a
+// copyable starter file · a frontmatter key · a component call), and one flat
+// list would promise what a starter cannot deliver. Enumerated from
+// viewer.manifest.json: adding a shape adds a row with no edit to the entry.
+
+function Section({ title, note, children }: { title: string; note: string; children: React.ReactNode }) {
+  return (
+    <section className="gg-section">
+      <h3>{title}</h3>
+      <p className="gg-note">{note}</p>
+      {children}
+    </section>
+  );
+}
+
+export default function LayoutGallery() {
+  return (
+    <div className="gg-gallery">
+      <Section title="Layout starters" note="An `_layout.mdx` file a contributor copies — chrome is content.">
+        {manifestLayouts().map(([id, l]) => (
+          <div className="gg-row" role="listitem" key={id} data-gallery-id={id}>
+            <div className="gg-body">
+              <div className="gg-title">
+                <code>{id}</code>
+                <span className="gg-meta">{l.arranges}</span>
+              </div>
+              <div className="gg-summary">{l.summary}</div>
+            </div>
+          </div>
+        ))}
+      </Section>
+      <Section title="Page variants" note="A frontmatter key on one entry — the page, not the chrome.">
+        {manifestPageVariants().map(([id, v]) => (
+          <div className="gg-row" role="listitem" key={id} data-gallery-id={id}>
+            <div className="gg-body">
+              <div className="gg-title">
+                <code>
+                  {v.key}: {v.value}
+                </code>
+                <span className="gg-meta">{id}</span>
+              </div>
+              <div className="gg-summary">{v.summary}</div>
+            </div>
+          </div>
+        ))}
+      </Section>
+      <Section title="Collection shapes" note="What a list of entries looks like — a component call.">
+        {manifestCollections().map(([id, c]) => (
+          <div className="gg-row" role="listitem" key={id} data-gallery-id={id}>
+            <div className="gg-body">
+              <div className="gg-title">
+                <code>{id}</code>
+                {c.component && <span className="gg-meta">&lt;{c.component}&gt;</span>}
+              </div>
+              <div className="gg-summary">{c.summary}</div>
+            </div>
+          </div>
+        ))}
+      </Section>
+    </div>
+  );
+}

package/src/components/PageView.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Include, Link } from '@immediately-run/sdk';
-import { useShell } from '../lib/shell';
+import { useShell, EDIT_REFUSED_NOTICE } from '../lib/shell';
 import { keyToHref, keyToRepoRel } from '../lib/content';
 import { crumb } from '../lib/wiki';
 import DirectoryView from './DirectoryView';
@@ -19,7 +19,7 @@ declare const module: any;
 // site chrome (nav / sidebar / footer) — that's the layout's job — so the page
 // stays free of shell concerns.
 export default function PageView() {
-  const { entryKey, includePath, layout, showRails, mins, missing, suggestion, writable, openEditor, vw, safe, directory } =
+  const { entryKey, includePath, layout, showRails, mins, missing, suggestion, writable, openEditor, editBusy, editRefused, editHint, vw, safe, directory } =
     useShell();
 
   // A folder URL. `checking` renders nothing rather than the 404: the readdir that
@@ -39,7 +39,22 @@ export default function PageView() {
         </p>
         <div className="grove-state__actions">
           <Link className="btn-ghost" href="/"><Icon name="chevron-right" /> Back to home</Link>
-          {writable ? <button className="btn-primary" onClick={() => openEditor(entryKey)}><Icon name="file-plus" /> Create it</button> : null}
+          {writable ? (
+            <>
+            <button
+              className="btn-primary"
+              data-busy={editBusy ? '1' : '0'}
+              title={editHint}
+              disabled={editBusy}
+              onClick={() => openEditor(entryKey)}
+            >
+              <Icon name="file-plus" />{editBusy ? 'Opening editor…' : 'Create it'}
+            </button>
+              {editRefused && (
+                <span className="grove-edit-refused" role="status">{EDIT_REFUSED_NOTICE}</span>
+              )}
+            </>
+          ) : null}
         </div>
       </div>
     );

package/src/components/Search.test.tsx

@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+// The ⌘K palette (R3-608): Escape returns focus to the REAL trigger, and
+// `aria-activedescendant` tracks the highlight through the REAL fuzzy filter
+// over a real entry list — only the attributes are new, so the assertions ride
+// the same matcher the production query uses.
+import { describe, expect, it, vi } from 'vitest';
+import { act } from 'react';
+import { useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { TinkerableContext } from '@immediately-run/sdk/TinkerableContext';
+
+const { default: Search } = await import('./Search');
+
+const FILES = {
+  '/app/content/home.mdx': { title: 'Home.', desc: '', tags: [] },
+  '/app/content/wiki/security.mdx': { title: 'Security.', desc: 'threats', tags: ['ops'] },
+  '/app/content/wiki/guide/api.mdx': { title: 'API guide.', desc: 'endpoints', tags: ['dev'] },
+  '/app/content/wiki/guide/deploy.mdx': { title: 'Deploying.', desc: 'shipping', tags: ['dev', 'ops'] },
+};
+
+const NAV = {
+  outerHref: 'https://example.immediately.run/app/x',
+  navigationState: { sandboxPath: '/app/x', provider: 'github', namespace: 'immediately-run', repository: 'docs', ref: 'main', hash: '', search: '' },
+  routingSpec: {} as never,
+  filesMetadata: FILES,
+};
+
+/** Search mounted open; closing UNMOUNTS it (the parent's job — focus return
+ *  rides the unmount cleanup). */
+function SearchHost({ onClose }: { onClose: () => void }) {
+  const [show, setShow] = useState(true);
+  return (
+    <div>
+      <button onClick={onClose}>trigger</button>
+      {show ? (
+        <Search
+          onClose={() => {
+            setShow(false);
+            onClose();
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+async function mountSearch(onClose: () => void, preFocus?: HTMLElement): Promise<{ root: Root; container: HTMLElement }> {
+  // The trigger must hold focus BEFORE the palette mounts — the hook captures
+  // it at open as the focus-return target.
+  preFocus?.focus();
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(
+      <TinkerableContext.Provider value={NAV as never}>
+        <SearchHost onClose={onClose} />
+      </TinkerableContext.Provider>,
+    );
+  });
+  return { root, container };
+}
+
+describe('the ⌘K palette (R3-608)', () => {
+  it('Escape closes and focus RETURNS to the real trigger', async () => {
+    const onClose = vi.fn();
+    const trigger = document.createElement('button');
+    trigger.textContent = 'trigger';
+    document.body.appendChild(trigger);
+    const { container } = await mountSearch(onClose, trigger);
+    // The palette moved focus INTO its input on open (the hook's focus-in).
+    const input = container.querySelector('input[role="combobox"]') as HTMLInputElement;
+    expect(document.activeElement).toBe(input);
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(document.activeElement).toBe(trigger);
+    trigger.remove();
+  });
+
+  it('aria-activedescendant tracks the highlight through the real fuzzy filter', async () => {
+    const onClose = vi.fn();
+    const { container } = await mountSearch(onClose);
+    const input = container.querySelector('input[role="combobox"]') as HTMLInputElement;
+    // Combobox semantics present.
+    expect(input.getAttribute('aria-controls')).toBeTruthy();
+    const list = container.querySelector(`#${input.getAttribute('aria-controls')}`) as HTMLElement;
+    expect(list.getAttribute('role')).toBe('listbox');
+    // Unfiltered: the recent list's first entry is highlighted.
+    const first = input.getAttribute('aria-activedescendant');
+    expect(first).toBeTruthy();
+    expect(document.getElementById(first!)).toBeTruthy();
+    // ArrowDown moves the highlight; the attribute names the NEW option.
+    await act(async () => {
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true }));
+    });
+    const second = input.getAttribute('aria-activedescendant');
+    expect(second).not.toBe(first);
+    expect(document.getElementById(second!)?.getAttribute('aria-selected')).toBe('true');
+    // The real filter: typing narrows the list and resets the highlight to the
+    // top — and the referenced option is one the matcher kept.
+    await act(async () => {
+      // The native value setter: React's tracker ignores a bare .value assign.
+      const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!;
+      setter.call(input, 'api');
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    const after = input.getAttribute('aria-activedescendant');
+    expect(after).toBeTruthy();
+    expect(document.getElementById(after!)?.textContent).toContain('API guide');
+  });
+});