diff --git a/src/elements/ia-item-navigator/ia-item-navigator.ts b/src/elements/ia-item-navigator/ia-item-navigator.ts
index c88808e..ef66ee5 100644
--- a/src/elements/ia-item-navigator/ia-item-navigator.ts
+++ b/src/elements/ia-item-navigator/ia-item-navigator.ts
@@ -248,23 +248,30 @@ export class IAItemNavigator
 
   toggleMenu(forceValue: boolean | undefined = undefined): void {
     this.menuOpened = forceValue !== undefined ? forceValue : !this.menuOpened;
-    if (this.menuOpened) {
-      // Move focus to the <ia-itemnav-menu-slider>
-      this.updateComplete.then(() => {
-        const closeButton = this.menuSlider?.shadowRoot?.querySelector(
-          'button.close',
-        ) as HTMLElement;
-        closeButton?.focus();
-      });
-    } else {
-      // Move focus back to the menu toggle button
-      this.updateComplete.then(() => {
+    this.moveFocusForDrawer();
+  }
+
+  /**
+   * Opening the drawer moves focus into it; closing hands focus back to the
+   * toggle. Without this, opening from the shortcut rail would leave focus on
+   * a button that is about to be hidden, dropping it to the document.
+   */
+  private moveFocusForDrawer(): void {
+    this.updateComplete.then(() => {
+      if (this.menuOpened) {
+        this.menuSlider?.focusDrawer();
+      } else {
         this.toggleMenuButton?.focus();
-      });
-    }
+      }
+    });
   }
 
+  /**
+   * Closing the drawer also closes whatever panel was open inside it, so the
+   * two can't disagree and a stale panel can't reappear on the next open.
+   */
   closeMenu(): void {
+    this.openMenu = undefined;
     this.toggleMenu(false);
   }
 
@@ -307,13 +314,15 @@ export class IAItemNavigator
   }
 
   get menuToggleButton(): TemplateResult {
+    const label = this.menuOpened ? 'Close side panel' : 'Open side panel';
     return html`
       <button
         class="toggle-menu"
         @click=${() => this.toggleMenu()}
-        title="Open side panel"
-        aria-label="Open side panel"
-        aria-expanded="false"
+        title=${label}
+        aria-label=${label}
+        aria-expanded=${this.menuOpened}
+        aria-controls="menu"
       >
         ${ellipsesIcon}
       </button>
@@ -326,22 +335,27 @@ export class IAItemNavigator
 
   get renderSideMenu(): TemplateResult {
     return html`
-      <nav>
+      <nav aria-label="Item navigation">
         <div
           class="minimized ${classMap({ hidden: this.menuOpened })}"
           part="minimized-menu"
         >
           ${this.shortcuts} ${this.menuToggleButton}
         </div>
-        <div id="menu" ?inert=${!this.menuOpened}>
+        <!-- Closed drawers are inert, so what is off-screen is also out of
+             the tab order and the accessibility tree. -->
+        <div
+          id="menu"
+          role="group"
+          aria-label="Item navigation menu"
+          ?inert=${!this.menuOpened}
+        >
           <ia-itemnav-menu-slider
             .menus=${this.menuContents}
             .selectedMenu=${this.selectedMenuId}
             @menuTypeSelected=${this.setOpenMenu}
             @menuPanelClosed=${this.closeSidePanel}
             @menuSliderClosed=${this.closeMenu}
-            manuallyHandleClose
-            open
           ></ia-itemnav-menu-slider>
         </div>
       </nav>
@@ -353,6 +367,9 @@ export class IAItemNavigator
   openShortcut(selectedMenuId: MenuId = ''): void {
     this.openMenu = selectedMenuId;
     this.menuOpened = true;
+    // The rail hides itself once the drawer opens, taking the focused
+    // shortcut with it, so focus has to be placed deliberately.
+    this.moveFocusForDrawer();
   }
 
   get shortcuts(): TemplateResult {
@@ -362,18 +379,22 @@ export class IAItemNavigator
       }
 
       return html`
-        <button
-          class="shortcut ${id}"
-          @click=${() => this.openShortcut(id)}
-          title=${label}
-          aria-label=${label}
-          aria-expanded="false"
-        >
-          ${icon}
-        </button>
+        <li>
+          <button
+            class="shortcut ${id}"
+            @click=${() => this.openShortcut(id)}
+            title=${label}
+            aria-label=${label}
+            aria-expanded=${this.menuOpened && this.openMenu === id}
+          >
+            ${icon}
+          </button>
+        </li>
       `;
     });
-    return html`<div class="shortcuts">${shortcuts}</div>`;
+    return html`<ul class="shortcuts" role="list">
+      ${shortcuts}
+    </ul>`;
   }
   /** End Menu Shortcuts */
 
@@ -566,6 +587,15 @@ export class IAItemNavigator
           margin: auto;
         }
 
+        /* The rail is a list for assistive tech; strip the list chrome so it
+           still reads as a row of icons. */
+        .shortcuts,
+        .shortcuts li {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+
         .toggle-menu .ia-icon,
         .shortcuts .ia-icon {
           width: ${iconWidth};
diff --git a/src/elements/ia-item-navigator/ia-itemnav-menu-button.ts b/src/elements/ia-item-navigator/ia-itemnav-menu-button.ts
index b25b9f5..04a64a8 100644
--- a/src/elements/ia-item-navigator/ia-itemnav-menu-button.ts
+++ b/src/elements/ia-item-navigator/ia-itemnav-menu-button.ts
@@ -6,6 +6,7 @@ import {
   type CSSResultGroup,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import themeStyles from '@src/themes/theme-styles';
 
 /**
@@ -69,11 +70,14 @@ export class IAItemNavMenuButton extends LitElement {
   }
 
   get linkButton(): TemplateResult {
+    // A followable link really does navigate, so it is a link and nothing
+    // more; only the in-place variant is a disclosure.
     return html`
       <a
         href=${this.href}
         class="menu-item"
-        aria-expanded=${this.selected}
+        aria-label=${this.label}
+        aria-expanded=${ifDefined(this.followable ? undefined : this.selected)}
         @click=${this.followable ? undefined : this.onClick}
         >${this.menuItem}</a
       >
@@ -84,6 +88,7 @@ export class IAItemNavMenuButton extends LitElement {
     return html`
       <button
         class="menu-item"
+        aria-label=${this.label}
         aria-expanded=${this.selected}
         @click=${this.onClick}
       >
diff --git a/src/elements/ia-item-navigator/ia-itemnav-menu-slider.test.ts b/src/elements/ia-item-navigator/ia-itemnav-menu-slider.test.ts
index 21b10c8..1192be5 100644
--- a/src/elements/ia-item-navigator/ia-itemnav-menu-slider.test.ts
+++ b/src/elements/ia-item-navigator/ia-itemnav-menu-slider.test.ts
@@ -26,7 +26,7 @@ async function sliderWith(
   menus: MenuProviderInterface[],
 ): Promise<IAItemNavMenuSlider> {
   const el = await fixture<IAItemNavMenuSlider>(
-    html`<ia-itemnav-menu-slider open></ia-itemnav-menu-slider>`,
+    html`<ia-itemnav-menu-slider></ia-itemnav-menu-slider>`,
   );
   el.menus = menus;
   await el.updateComplete;
@@ -46,18 +46,59 @@ describe('IAItemNavMenuSlider', () => {
     expect(el.shadowRoot?.querySelector('button.close')).to.exist;
   });
 
-  test('selecting a menu opens its panel; re-selecting it closes it', async () => {
+  test('reports the selection instead of deciding it', async () => {
     const el = await sliderWith([provider('a'), provider('b')]);
+    const selected = vi.fn();
+    el.addEventListener('menuTypeSelected', selected);
 
-    el.setSelectedMenu(new CustomEvent('x', { detail: { id: 'a' } }));
+    const menuButton = el.shadowRoot?.querySelector('ia-itemnav-menu-button');
+    (
+      menuButton?.shadowRoot?.querySelector('button') as HTMLButtonElement
+    ).click();
     await el.updateComplete;
-    expect(el.selectedMenu).to.equal('a');
+
+    // The navigator owns which panel is open, so there is only ever one copy
+    // of that state to keep straight.
+    expect(selected).toHaveBeenCalledOnce();
+    expect(selected.mock.calls[0][0].detail.id).to.equal('a');
+    expect(el.selectedMenu).to.equal('');
+  });
+
+  test('opens whichever panel the host selects', async () => {
+    const el = await sliderWith([provider('a'), provider('b')]);
+    el.selectedMenu = 'b';
+    await el.updateComplete;
+
     expect(el.selectedMenuClass).to.equal('open');
+    expect(
+      el.shadowRoot?.querySelector('.selected-menu .panel-body')?.textContent,
+    ).to.contain('b body');
+  });
+
+  test('a closed panel is out of the tab order and the a11y tree', async () => {
+    const el = await sliderWith([provider('a')]);
+    const panel = el.shadowRoot?.querySelector('.content') as HTMLElement;
 
-    el.setSelectedMenu(new CustomEvent('x', { detail: { id: 'a' } }));
+    expect(panel.hasAttribute('inert'), 'closed panel should be inert').to.be
+      .true;
+
+    el.selectedMenu = 'a';
     await el.updateComplete;
-    expect(el.selectedMenu).to.equal('');
-    expect(el.selectedMenuClass).to.equal('');
+    expect(panel.hasAttribute('inert'), 'open panel should be reachable').to.be
+      .false;
+  });
+
+  test('names the panel by its heading', async () => {
+    const el = await sliderWith([provider('a')]);
+    el.selectedMenu = 'a';
+    await el.updateComplete;
+
+    const panel = el.shadowRoot?.querySelector('.content') as HTMLElement;
+    const headingId = panel.getAttribute('aria-labelledby');
+    expect(headingId).to.exist;
+    expect(
+      el.shadowRoot?.querySelector(`#${headingId}`)?.textContent,
+    ).to.contain('a label');
   });
 
   test('renders the selected provider body', async () => {
@@ -69,24 +110,35 @@ describe('IAItemNavMenuSlider', () => {
     expect(body?.textContent).to.contain('b body');
   });
 
-  test('closeMenu emits menuSliderClosed; manuallyHandleClose keeps it open', async () => {
+  test('the drawer close button asks the host to close the drawer', async () => {
     const el = await sliderWith([provider('a')]);
-    el.manuallyHandleClose = true;
-    await el.updateComplete;
-
     const listener = vi.fn();
     el.addEventListener('menuSliderClosed', listener);
 
-    el.closeMenu();
+    (
+      el.shadowRoot?.querySelector('.menu > button.close') as HTMLButtonElement
+    ).click();
+
     expect(listener).toHaveBeenCalledOnce();
-    expect(el.open).to.equal(true); // left for the host to close
+  });
+
+  test('the two close buttons are named for what they close', async () => {
+    const el = await sliderWith([provider('a')]);
+    el.selectedMenu = 'a';
+    await el.updateComplete;
+
+    const drawerClose = el.shadowRoot?.querySelector('.menu > button.close');
+    const panelClose = el.shadowRoot?.querySelector(
+      '.content header button.close',
+    );
 
-    el.manuallyHandleClose = false;
-    el.closeMenu();
-    expect(el.open).to.equal(false);
+    expect(drawerClose?.getAttribute('aria-label')).to.equal(
+      'Close navigation',
+    );
+    expect(panelClose?.getAttribute('aria-label')).to.equal('Close a label');
   });
 
-  test('closing the sub-panel emits menuPanelClosed and clears the selection, without closing the drawer', async () => {
+  test('closing the sub-panel leaves the drawer alone', async () => {
     const el = await sliderWith([provider('a'), provider('b')]);
     el.selectedMenu = 'a';
     await el.updateComplete;
@@ -101,12 +153,9 @@ describe('IAItemNavMenuSlider', () => {
     ) as HTMLButtonElement;
     expect(closeButton).to.exist;
     closeButton.click();
-    await el.updateComplete;
 
-    expect(el.selectedMenu).to.equal('');
     expect(panelClosed).toHaveBeenCalledOnce();
     expect(panelClosed.mock.calls[0][0].detail.id).to.equal('a');
-    // Closing the sub-panel is independent of the drawer's open/close.
     expect(drawerClosed).not.toHaveBeenCalled();
   });
 
@@ -115,39 +164,50 @@ describe('IAItemNavMenuSlider', () => {
     el.selectedMenu = 'a';
     await el.updateComplete;
 
-    const closed = vi.fn();
-    el.addEventListener('menuSliderClosed', closed);
+    const panelClosed = vi.fn();
+    const drawerClosed = vi.fn();
+    el.addEventListener('menuPanelClosed', panelClosed);
+    el.addEventListener('menuSliderClosed', drawerClosed);
     const main = el.shadowRoot?.querySelector('.main') as HTMLElement;
 
-    // First Escape closes the panel, not the drawer.
+    // First Escape reaches for the panel, not the drawer.
     main.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    await el.updateComplete;
-    expect(el.selectedMenu).to.equal('');
-    expect(closed).not.toHaveBeenCalled();
+    expect(panelClosed).toHaveBeenCalledOnce();
+    expect(drawerClosed).not.toHaveBeenCalled();
 
-    // Second Escape closes the drawer.
+    // Once the host has cleared the selection, Escape closes the drawer.
+    el.selectedMenu = '';
+    await el.updateComplete;
     main.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    expect(closed).toHaveBeenCalledOnce();
+    expect(drawerClosed).toHaveBeenCalledOnce();
   });
 
-  test('closePanel skips focus restoration when nothing was selected', async () => {
-    const el = await sliderWith([provider('a')]);
+  test('closing a panel hands focus back to the button that opened it', async () => {
+    const el = await sliderWith([provider('a'), provider('b')]);
+    el.selectedMenu = 'b';
+    await el.updateComplete;
+
+    // The host clears the selection in response to menuPanelClosed.
     el.selectedMenu = '';
     await el.updateComplete;
-    // menuId is empty → the focus-restore block is skipped, no throw.
-    expect(() => el.closePanel()).to.not.throw();
-    expect(el.selectedMenu).to.equal('');
+
+    const buttons = el.shadowRoot?.querySelectorAll('ia-itemnav-menu-button');
+    expect(el.shadowRoot?.activeElement).to.equal(buttons?.[1]);
   });
 
-  test('closePanel tolerates a previously-selected menu that is no longer present', async () => {
-    const el = await sliderWith([provider('a'), provider('b')]);
-    // A selected id that isn't in the current menus → findIndex returns -1.
-    el.selectedMenu = 'ghost';
-    await el.updateComplete;
-    el.closePanel();
+  test('opening a panel moves focus into it', async () => {
+    const el = await sliderWith([provider('a')]);
+    el.selectedMenu = 'a';
     await el.updateComplete;
-    await el.updateComplete; // let the queued focus-restore microtask run
-    expect(el.selectedMenu).to.equal('');
+
+    expect(el.shadowRoot?.activeElement).to.equal(
+      el.shadowRoot?.querySelector('.content'),
+    );
+  });
+
+  test('closePanel is safe when nothing is selected', async () => {
+    const el = await sliderWith([provider('a')]);
+    expect(() => el.closePanel()).to.not.throw();
   });
 
   test('ignores non-Escape keydowns', async () => {
@@ -192,14 +252,6 @@ describe('IAItemNavMenuSlider', () => {
     expect(header?.querySelector('.custom-action')).to.not.exist;
   });
 
-  test('animateMenuOpen adds the animate class', async () => {
-    const el = await sliderWith([provider('a')]);
-    el.animateMenuOpen = true;
-    await el.updateComplete;
-    expect(el.sliderDetailsClass).to.contain('animate');
-    expect(el.shadowRoot?.querySelector('.menu.animate')).to.exist;
-  });
-
   test('renders menu buttons with details, followable and href wired through', async () => {
     const el = await sliderWith([
       provider('plain'),
diff --git a/src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts b/src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts
index a210b17..b976a07 100644
--- a/src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts
+++ b/src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts
@@ -3,6 +3,7 @@ import {
   html,
   LitElement,
   nothing,
+  type PropertyValues,
   TemplateResult,
   type CSSResultGroup,
 } from 'lit';
@@ -10,6 +11,7 @@ import { customElement, property, query } from 'lit/decorators.js';
 import themeStyles from '@src/themes/theme-styles';
 import { collapseSidebarIcon } from './icons';
 import './ia-itemnav-menu-button';
+import type { IAItemNavMenuButton } from './ia-itemnav-menu-button';
 import { MenuProviderInterface } from './interfaces/menu-interfaces';
 
 const sliderEvents = {
@@ -25,95 +27,100 @@ const sliderEvents = {
 export class IAItemNavMenuSlider extends LitElement {
   @property({ type: Array }) menus: MenuProviderInterface[] = [];
 
-  @property({ type: Boolean }) open = false;
-
-  @property({ type: Boolean }) manuallyHandleClose = false;
-
+  /**
+   * Which panel is open. The navigator owns this — the slider only reports
+   * what the user did and renders whatever comes back, so there is one copy
+   * of the state rather than two that have to agree.
+   */
   @property({ type: String }) selectedMenu = '';
 
   @property({ type: Object }) selectedMenuAction:
     | TemplateResult
     | typeof nothing = nothing;
 
-  @property({ type: Boolean }) animateMenuOpen = false;
+  @query('.content') private panel?: HTMLElement;
 
-  @query('.content.open button.close') contentCloseButton!: HTMLElement;
+  @query('.menu-list') private menuList?: HTMLUListElement;
 
-  @query('.menu-list') menuList!: HTMLUListElement;
+  @query('.menu > button.close') private drawerCloseButton?: HTMLElement;
 
-  updated(): void {
+  /** Focus should follow what the user did, not the first render. */
+  private isFirstRender = true;
+
+  protected updated(changed: PropertyValues): void {
     const actionButton = this.selectedMenuDetails?.actionButton || nothing;
-    const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
-    if (actionButtonHasChanged) {
+    if (actionButton !== this.selectedMenuAction) {
       this.selectedMenuAction = actionButton;
     }
+
+    if (!this.isFirstRender && changed.has('selectedMenu')) {
+      this.moveFocusForSelection(changed.get('selectedMenu') as string);
+    }
+    this.isFirstRender = false;
   }
 
   /**
-   * Event handler, captures state of selected menu
+   * Opening a panel moves focus into it, so it is announced by name; closing
+   * hands focus back to the button that opened it.
    */
-  setSelectedMenu({ detail }: CustomEvent): void {
-    const { id } = detail;
-    this.selectedMenu = this.selectedMenu === id ? '' : id;
-    this.selectedMenuAction = this.selectedMenuDetails?.actionButton || nothing;
-    this.updateComplete.then(() => {
-      this.contentCloseButton?.focus();
-    });
+  private moveFocusForSelection(previousMenu: string): void {
+    if (this.selectedMenu) {
+      this.panel?.focus();
+    } else if (previousMenu) {
+      this.menuButtonFor(previousMenu)?.focus();
+    }
+  }
+
+  private menuButtonFor(menuId: string): IAItemNavMenuButton | undefined {
+    const buttons =
+      this.menuList?.querySelectorAll<IAItemNavMenuButton>(
+        'ia-itemnav-menu-button',
+      ) ?? [];
+    return [...buttons].find((button) => button.buttonId === menuId);
   }
 
   /**
-   * closes menu drawer
+   * Moves focus into the drawer — the open panel if there is one, otherwise
+   * the first thing worth acting on. Exposed so the navigator doesn't have to
+   * reach through this component's shadow DOM to place focus.
    */
-  closeMenu(): void {
-    if (!this.manuallyHandleClose) {
-      this.open = false;
+  focusDrawer(): void {
+    if (this.selectedMenu) {
+      this.panel?.focus();
+      return;
     }
-    const { closeDrawer } = sliderEvents;
-    const drawerClosed = new CustomEvent(closeDrawer, {
-      detail: this.selectedMenuDetails,
-    });
-    this.dispatchEvent(drawerClosed);
+    const firstMenuButton = this.menuList?.querySelector<HTMLElement>(
+      'ia-itemnav-menu-button',
+    );
+    (firstMenuButton ?? this.drawerCloseButton)?.focus();
   }
 
-  closePanel(): void {
-    const menuId = this.selectedMenu;
-    this.selectedMenu = '';
-    this.selectedMenuAction = nothing;
+  /** Asks the navigator to close the whole drawer. */
+  closeMenu(): void {
+    this.dispatchEvent(
+      new CustomEvent(sliderEvents.closeDrawer, {
+        detail: this.selectedMenuDetails,
+      }),
+    );
+  }
 
-    // Notify the host so it can clear its own record of the open channel,
-    // keeping the sub-panel's open/close independent of — but consistent
-    // with — the drawer's open/close.
+  /** Asks the navigator to close just the open panel. */
+  closePanel(): void {
     this.dispatchEvent(
       new CustomEvent(sliderEvents.closePanel, {
-        detail: { id: menuId },
+        detail: { id: this.selectedMenu },
       }),
     );
-
-    // Return focus to the menu button that was previously selected
-    if (menuId) {
-      this.updateComplete.then(() => {
-        const menuIndex = this.menus.findIndex((menu) => menu.id === menuId);
-        if (menuIndex !== -1) {
-          const menuButton = this.menuList.querySelector(
-            `li:nth-child(${menuIndex + 1}) ia-itemnav-menu-button`,
-          ) as HTMLElement;
-          menuButton?.focus();
-        }
-      });
-    }
   }
 
-  /**
-   * Handle keyboard events, specifically ESC key to close menu details
-   */
+  /** Escape closes the panel first, then the drawer. */
   handleKeyDown(event: KeyboardEvent): void {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      if (this.selectedMenu) {
-        this.closePanel();
-      } else {
-        this.closeMenu();
-      }
+    if (event.key !== 'Escape') return;
+    event.preventDefault();
+    if (this.selectedMenu) {
+      this.closePanel();
+    } else {
+      this.closeMenu();
     }
   }
 
@@ -123,12 +130,6 @@ export class IAItemNavMenuSlider extends LitElement {
 
   /* render */
 
-  get sliderDetailsClass(): string {
-    const animate = this.animateMenuOpen ? 'animate' : '';
-    const state = this.open ? 'open' : '';
-    return `${animate} ${state}`;
-  }
-
   get selectedMenuClass(): string {
     return this.selectedMenu ? 'open' : '';
   }
@@ -138,7 +139,6 @@ export class IAItemNavMenuSlider extends LitElement {
       (menu) => html`
         <li>
           <ia-itemnav-menu-button
-            @menuTypeSelected=${this.setSelectedMenu}
             .icon=${menu.icon}
             .label=${menu.label}
             .menuDetails=${menu.menuDetails || ''}
@@ -162,17 +162,18 @@ export class IAItemNavMenuSlider extends LitElement {
     const actionBlock = hasAction
       ? html`<span class="custom-action">${this.selectedMenuAction}</span>`
       : nothing;
+    const closeLabel = label ? `Close ${label}` : 'Close this panel';
     return html`
       <header class=${headerClass}>
         <div class="details">
-          <h3>${label}</h3>
+          <h3 id="panel-title">${label}</h3>
           <span class="extra-details">${menuDetails}</span>
         </div>
         ${actionBlock}
         <button
           class="close"
-          aria-label="Close this menu"
-          title="Close this menu"
+          aria-label=${closeLabel}
+          title=${closeLabel}
           @click=${this.closePanel}
         >
           ${collapseSidebarIcon}
@@ -185,8 +186,8 @@ export class IAItemNavMenuSlider extends LitElement {
     return html`
       <button
         class="close"
-        aria-label="Close this menu"
-        title="Close this menu"
+        aria-label="Close navigation"
+        title="Close navigation"
         @click=${this.closeMenu}
       >
         ${collapseSidebarIcon}
@@ -196,16 +197,23 @@ export class IAItemNavMenuSlider extends LitElement {
 
   /** @inheritdoc */
   render(): TemplateResult {
+    const panelOpen = !!this.selectedMenu;
     return html`
       <div class="main" @keydown=${this.handleKeyDown}>
-        <div class="menu ${this.sliderDetailsClass}">
+        <div class="menu">
           ${this.closeButton}
-          <ul class="menu-list">
+          <ul class="menu-list" role="list">
             ${this.menuItems}
           </ul>
+          <!-- Closed panels are inert so the tab order and the accessibility
+               tree agree with what is on screen; the slide is a consequence
+               of the class, not something to wait on. -->
           <div
             class="content ${this.selectedMenuClass}"
-            @menuTypeSelected=${this.setSelectedMenu}
+            role="region"
+            aria-labelledby="panel-title"
+            tabindex="-1"
+            ?inert=${!panelOpen}
           >
             ${this.renderMenuHeader}
             <section>
@@ -275,10 +283,8 @@ export class IAItemNavMenuSlider extends LitElement {
           height: 100%;
         }
 
-        .animate {
-          transition: transform ${transitionTiming} ease-out;
-        }
-
+        /* The drawer's own slide is owned by the navigator's #menu; this just
+           fills it. */
         .menu {
           position: absolute;
           top: 0;
@@ -290,7 +296,6 @@ export class IAItemNavMenuSlider extends LitElement {
           font-size: 1.4em;
           color: var(--item-navigator-text-color--);
           background: var(--item-navigator-menu-slider-bg--);
-          transform: translateX(calc(${sliderWidth} * -1));
         }
 
         button {
@@ -378,10 +383,14 @@ export class IAItemNavMenuSlider extends LitElement {
           flex-direction: column;
         }
 
-        .open {
+        .content.open {
           transform: translateX(0);
         }
 
+        .content:focus {
+          outline: none;
+        }
+
         .menu-list {
           padding: 0;
           margin: 0;
diff --git a/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.test.ts b/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.test.ts
index 158077d..7396677 100644
--- a/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.test.ts
+++ b/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.test.ts
@@ -113,41 +113,87 @@ describe('IAItemNavViewableFilesPanel', () => {
     expect(el.shadowRoot?.querySelector('.pdf-label')).to.not.exist;
   });
 
-  test('scrolls the active file into view after first render (scrollIntoViewIfNeeded)', async () => {
-    const el = await fixture<IAItemNavViewableFilesPanel>(
-      html`<ia-itemnav-viewable-files-panel
-        subPrefix="v1"
-        .fileList=${[file({ title: 'v1', file_subprefix: 'v1' })]}
-      ></ia-itemnav-viewable-files-panel>`,
+  /** Renders the panel inside a short, scrolling box like the drawer's. */
+  async function scrollingPanel(
+    subPrefix: string,
+    count = 25,
+  ): Promise<{ el: IAItemNavViewableFilesPanel; box: HTMLElement }> {
+    const files = Array.from({ length: count }, (_, i) =>
+      file({ title: `v${i}`, file_subprefix: `v${i}` }),
     );
-    const active = el.shadowRoot?.querySelector<
-      HTMLElement & { scrollIntoViewIfNeeded?: (c: boolean) => void }
-    >('.content.active');
-    expect(active).to.exist;
-    // firstUpdated schedules the scroll behind a 350ms timeout.
-    await new Promise((resolve) => setTimeout(resolve, 400));
-    // No assertion beyond "did not throw" — chromium provides
-    // scrollIntoViewIfNeeded, exercising that branch.
-    expect(active).to.exist;
+    const box = await fixture<HTMLElement>(
+      html`<div style="height: 80px; overflow: auto">
+        <ia-itemnav-viewable-files-panel
+          .subPrefix=${subPrefix}
+          .fileList=${files}
+        ></ia-itemnav-viewable-files-panel>
+      </div>`,
+    );
+    const el = box.querySelector(
+      'ia-itemnav-viewable-files-panel',
+    ) as IAItemNavViewableFilesPanel;
+    await el.updateComplete;
+    return { el, box };
+  }
+
+  /** Whether the active row is actually within the scrolling box. */
+  function activeRowIsVisible(
+    el: IAItemNavViewableFilesPanel,
+    box: HTMLElement,
+  ): boolean {
+    const active = el.shadowRoot?.querySelector('.content.active');
+    if (!active) return false;
+    const row = active.getBoundingClientRect();
+    const view = box.getBoundingClientRect();
+    return row.top >= view.top - 1 && row.bottom <= view.bottom + 1;
+  }
+
+  test('brings the active file into view without waiting on a timer', async () => {
+    const { el, box } = await scrollingPanel('v20');
+
+    // No sleep: the row is in place as soon as the update completes.
+    expect(activeRowIsVisible(el, box), 'active row should be scrolled to').to
+      .be.true;
   });
 
-  test('falls back to scrollIntoView when scrollIntoViewIfNeeded is unavailable', async () => {
-    const el = await fixture<IAItemNavViewableFilesPanel>(
-      html`<ia-itemnav-viewable-files-panel
-        subPrefix="v1"
-        .fileList=${[file({ title: 'v1', file_subprefix: 'v1' })]}
-      ></ia-itemnav-viewable-files-panel>`,
+  test('follows the active file when the selection moves', async () => {
+    const { el, box } = await scrollingPanel('v0');
+    expect(activeRowIsVisible(el, box)).to.be.true;
+
+    el.subPrefix = 'v24';
+    await el.updateComplete;
+    await el.updateComplete;
+
+    expect(activeRowIsVisible(el, box), 'should follow the new selection').to.be
+      .true;
+  });
+
+  test('scrolls once the file list arrives, not only on first render', async () => {
+    // Hosts commonly build the panel first and hand it a list afterwards.
+    const box = await fixture<HTMLElement>(
+      html`<div style="height: 80px; overflow: auto">
+        <ia-itemnav-viewable-files-panel
+          .subPrefix=${'v20'}
+        ></ia-itemnav-viewable-files-panel>
+      </div>`,
+    );
+    const el = box.querySelector(
+      'ia-itemnav-viewable-files-panel',
+    ) as IAItemNavViewableFilesPanel;
+    await el.updateComplete;
+
+    el.fileList = Array.from({ length: 25 }, (_, i) =>
+      file({ title: `v${i}`, file_subprefix: `v${i}` }),
     );
-    const active = el.shadowRoot?.querySelector<HTMLElement>('.content.active');
-    // Remove the Chrome-only API so the cross-browser branch runs.
-    (
-      active as unknown as { scrollIntoViewIfNeeded?: unknown }
-    ).scrollIntoViewIfNeeded = undefined;
-    let called = false;
-    active!.scrollIntoView = () => {
-      called = true;
-    };
-    await new Promise((resolve) => setTimeout(resolve, 400));
-    expect(called).to.equal(true);
+    await el.updateComplete;
+    await el.updateComplete;
+
+    expect(activeRowIsVisible(el, box)).to.be.true;
+  });
+
+  test('leaves an already-visible row where it is', async () => {
+    const { el, box } = await scrollingPanel('v0');
+    expect(box.scrollTop).to.equal(0);
+    expect(activeRowIsVisible(el, box)).to.be.true;
   });
 });
diff --git a/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts b/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts
index dff03cc..c40e03c 100644
--- a/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts
+++ b/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts
@@ -3,6 +3,7 @@ import {
   html,
   LitElement,
   nothing,
+  type PropertyValues,
   TemplateResult,
   type CSSResultGroup,
 } from 'lit';
@@ -34,26 +35,34 @@ export class IAItemNavViewableFilesPanel extends LitElement {
 
   @property({ type: Boolean, reflect: true }) addSortToUrl = false;
 
-  firstUpdated(): void {
-    const activeFile =
-      this.shadowRoot?.querySelector<HTMLElement>('.content.active');
-    // allow for css animations to run before scrolling to active file
-    setTimeout(() => {
-      // `scrollIntoViewIfNeeded` only auto-scrolls when the element is out of
-      // view (Chrome, Safari); `scrollIntoView` is the cross-browser fallback.
-      const scrollable = activeFile as HTMLElement & {
-        scrollIntoViewIfNeeded?: (center: boolean) => void;
-      };
-      if (scrollable?.scrollIntoViewIfNeeded) {
-        scrollable.scrollIntoViewIfNeeded(true);
-      } else {
-        activeFile?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest',
-        });
-      }
-    }, 350);
+  /**
+   * Keeps the active file in view whenever the list or the selection changes.
+   *
+   * Both are needed: hosts commonly build this panel once and hand it a
+   * `fileList` afterwards, and the selection can move while the panel stays
+   * open. Reacting to the change means there is nothing to wait on — the row
+   * exists by the time the update completes.
+   */
+  protected updated(changed: PropertyValues): void {
+    if (changed.has('fileList') || changed.has('subPrefix')) {
+      this.revealActiveFile();
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    // Hosts reuse this element across opens, and the scroll container it sits
+    // in may have been reset while it was away.
+    this.revealActiveFile();
+  }
+
+  private async revealActiveFile(): Promise<void> {
+    await this.updateComplete;
+    // `nearest` leaves an already-visible row alone, which is what the
+    // Chrome-only `scrollIntoViewIfNeeded` used to buy us.
+    this.shadowRoot
+      ?.querySelector<HTMLElement>('.content.active')
+      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
   }
 
   fileUrl(item: ViewableFileInfo): string {