From 784d13ff00d4cf46678438dd6ee58fb56295eaab Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 29 Oct 2026 04:57:24 -0400
Subject: [PATCH 1/4] =?UTF-8?q?=E2=99=BF=20fix:=20Keep=20Names,=20Focus=20?=
 =?UTF-8?q?and=20Status=20Messages=20Right=20Across=20the=20Configuration?=
 =?UTF-8?q?=20Page=20and=20App=20Shell?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes the screen reader, keyboard and naming problems an accessibility
review of the configuration page and the app shell found. Ten live axe
scans that failed on main now pass; no rule, tag or element is excluded.

Label in name (WCAG 2.5.3).
- MCP server card header: its aria-label ("Title (key)") left out the
  New badge, source chips and transport line the button also held. The
  button now holds only the title, "Server key" (screen-reader only),
  the key and the New badge, and is named by them. The facts line moved
  out of the button and still describes it. A ::after stretched over
  the header keeps the whole header clickable (the endpoints list's
  row-link pattern), with the actions menu above it.
- Single-field sections renamed an empty list's "Add tool" button after
  the section ("Filtered tools Hidden tools"). A button that shows its
  own text now keeps it as its name and is described by the field's
  name; switches, selects and text fields are still named by it.
- Change review: "Go to field" is named "Go to field: <label>".
- Revert and Remove override: every revert name now starts with the
  words its button shows, e.g. "Remove override (inherits 1,000,000 from
  Base): Starting credits, Role: editor". getRevertLabels also returns a
  compact name starting with "Revert" for the endpoint field chips,
  which show only "Revert". The settings row's fallback "Reset" is named
  "Reset <field>: remove its override".
- Langfuse keys: a stored key's button is named by its label and masked
  value ("Public key pk-lf-...cdef") with "Edit" as its title, and the
  text field that replaces it is labelled "Public key" or "Secret key"
  instead of only by its placeholder. Its hover and focus colors used
  --cui-color-stroke-emphasis, which is not defined; they use
  --cui-color-stroke-intense.

Status messages and descriptions.
- The unsaved-changes bar's count and the tab's "No settings on this tab
  match" message are status messages, so screen readers hear them
  change.
- The unsaved-changes prompt, Revert all admin overrides and the
  confirm-a-choice dialog are described by their body text; click-ui's
  own empty description was read instead.

Focus that fell to <body> or stayed on the dialog.
- Discard in the unsaved-changes bar puts focus on the open tab.
- Remove override (and an MCP field's revert) puts focus on the field it
  reset.
- Jump to puts focus on the heading toggle of the section it scrolls to.
- Escape on an MCP server rename puts focus back on its header.
- Retry after a load error puts focus on the open tab once the page
  loads, or back on Retry if it fails again.
- Removing the last allowed domain moves focus to the question's Cancel,
  and either answer returns it to the input; the question is described
  by its text.
- Blank endpoint focuses the Name field, Back focuses the first
  template, the Preview drawer's Change focuses the picker's search (and
  closing the picker returns to Change), and Import YAML's Continue
  focuses the next step's first control.
- The sidebar user menu gives focus back to the avatar on Escape or a
  click outside; Radix returned it to click-ui's trigger wrapper, which
  can't take it.
- A command menu command that opens a page puts focus on that page's
  title once it renders, unless the page focused something itself.

Create endpoint. Escape, the close button and Cancel decided whether to
ask before discarding from the committed draft only, and text fields
commit on blur, so a Name typed and not yet left was dropped without a
prompt. The focused field is now committed before that check.

App shell.
- Command menu: "No results" was rendered inside the listbox
  (aria-required-children). It is now a status message beside it, and
  the empty listbox is hidden.
- Every page titled the browser tab "LibreChat Admin Panel". Each page
  now sets "<page> · LibreChat Admin Panel" (Dashboard, Configuration,
  Access management, System grants, Help, Sign in, Page not found,
  Something went wrong).
- Toast close buttons were named "cross" and click-ui's search field
  clear buttons "clear input". They are named "Close" and "Clear" in the
  panel's language.

Tests. New unit tests cover each change and fail without it, including
a port of axe 4.14's label-in-name check run over every revert name,
the go-to name, the row fallbacks and the endpoint chips. New live e2e
tests scan the role-profile override rows, the blank endpoint form, the
Preview picker and Import YAML's second step with the WCAG tags in
light and dark, and check focus after Discard, Remove override, Jump to
and an MCP rename. Mock e2e tests cover the user menu, the command
menu's empty state and navigation focus, page titles and toast close
names. WCAG_TAGS and the USER role profile helpers moved to e2e/live.ts
so the specs share them.
---
 e2e/a11y/config.spec.ts                       | 201 +++++++++++++++++-
 e2e/access.spec.ts                            |   4 +-
 e2e/config-shell.spec.ts                      | 187 ++++++++++++----
 e2e/features.spec.ts                          |  12 +-
 e2e/grants.spec.ts                            |   3 +-
 e2e/live.ts                                   |  46 ++++
 e2e/login.spec.ts                             |   3 +-
 e2e/sidebar.spec.ts                           |  11 +
 src/components/CommandMenu.tsx                |  67 ++++--
 src/components/Header.tsx                     |   4 +-
 src/components/Sidebar.tsx                    |  36 +++-
 src/components/__tests__/CommandMenu.test.tsx |  36 +++-
 src/components/__tests__/Sidebar.test.tsx     |  14 +-
 .../access/__tests__/GroupsTab.test.tsx       |   1 +
 .../configuration/ConfigLoadError.tsx         |  33 ++-
 src/components/configuration/ConfigPage.tsx   |   3 +-
 src/components/configuration/ConfigRow.tsx    |  27 ++-
 .../configuration/ConfigTabContent.tsx        |   5 +-
 .../configuration/ImportYamlDialog.tsx        | 111 ++++++----
 .../configuration/NavigationGuardDialog.tsx   |   9 +-
 .../configuration/ResetBaseConfigDialog.tsx   |   8 +-
 src/components/configuration/SettingsRow.tsx  |  68 +++---
 .../configuration/ToolbarFilter.tsx           |   6 +-
 .../__tests__/ConfigLoadError.test.tsx        |  49 +++++
 .../__tests__/ConfigRow.test.tsx              |  33 ++-
 .../__tests__/ConfigTabContent.test.tsx       |  53 +++++
 .../__tests__/ImportYamlDialog.test.tsx       |  20 ++
 .../__tests__/ScopeCascade.test.tsx           |   1 +
 .../__tests__/SettingsRow.test.tsx            |  20 ++
 .../__tests__/descriptions.test.tsx           |  60 ++++++
 .../configuration/fields/ConfirmChoice.tsx    |  11 +-
 .../configuration/fields/DomainListField.tsx  |  20 +-
 .../fields/__tests__/DomainListField.test.tsx |  20 ++
 .../configuration/preview/Drawer.tsx          |  16 +-
 .../configuration/preview/Picker.tsx          |   1 +
 .../preview/__tests__/Drawer.test.tsx         |  11 +
 src/components/configuration/reveal.test.ts   |  28 +++
 src/components/configuration/reveal.ts        |  25 ++-
 .../review/ChangeReview.test.tsx              |  56 ++++-
 .../configuration/review/ChangesBar.tsx       |  52 +++--
 .../sections/LangfuseRenderer.tsx             | 165 +++++++-------
 .../__tests__/LangfuseRenderer.test.tsx       |  78 ++++---
 .../sections/endpoints/Chips.tsx              |   2 +-
 .../sections/endpoints/Create.tsx             |  52 ++++-
 .../CustomEndpointsRenderer.test.tsx          |  30 ++-
 .../features/__tests__/Memory.test.tsx        |   4 +-
 .../configuration/sections/mcp/Card.tsx       | 125 ++++++-----
 .../configuration/sections/mcp/Field.tsx      |  16 +-
 .../sections/mcp/__tests__/Card.test.tsx      |  76 +++++++
 .../sections/mcp/__tests__/Servers.test.tsx   |   4 +-
 src/components/configuration/values/labels.ts |  62 +++---
 .../configuration/values/names.test.tsx       | 176 +++++++++++++++
 src/components/shared/SearchInput.tsx         |   8 +-
 src/hooks/dialogs.ts                          |  64 +++++-
 src/hooks/index.ts                            |   2 +
 src/hooks/labels.test.tsx                     |  46 ++++
 src/hooks/labels.ts                           |  26 +++
 src/hooks/title.test.tsx                      |  21 ++
 src/hooks/title.ts                            |  16 ++
 src/locales/en/translation.json               |  20 +-
 src/routes/__root.tsx                         |   8 +-
 src/routes/_app.tsx                           |  20 +-
 src/routes/login.tsx                          |   3 +
 src/test/a11y.ts                              |  40 ++++
 src/types/config-ui.ts                        |  15 ++
 src/types/review.ts                           |   6 +
 src/types/shared.ts                           |   3 +
 src/types/shell.ts                            |   3 +-
 src/types/values.ts                           |  12 +-
 src/utils/focus.ts                            |  94 +++++++-
 70 files changed, 2121 insertions(+), 447 deletions(-)
 create mode 100644 src/components/configuration/__tests__/ConfigLoadError.test.tsx
 create mode 100644 src/components/configuration/__tests__/ConfigTabContent.test.tsx
 create mode 100644 src/components/configuration/__tests__/descriptions.test.tsx
 create mode 100644 src/components/configuration/sections/mcp/__tests__/Card.test.tsx
 create mode 100644 src/components/configuration/values/names.test.tsx
 create mode 100644 src/hooks/labels.test.tsx
 create mode 100644 src/hooks/labels.ts
 create mode 100644 src/hooks/title.test.tsx
 create mode 100644 src/hooks/title.ts

diff --git a/e2e/a11y/config.spec.ts b/e2e/a11y/config.spec.ts
index 2c20984d..f449ea3d 100644
--- a/e2e/a11y/config.spec.ts
+++ b/e2e/a11y/config.spec.ts
@@ -1,7 +1,17 @@
 import AxeBuilder from '@axe-core/playwright';
 import { test, expect } from '@playwright/test';
 import type { Page } from '@playwright/test';
-import { CONFIG_TABS, LIVE, LIVE_SKIP_REASON, THEMES, openConfigTab } from '../live';
+import {
+  LIVE,
+  THEMES,
+  WCAG_TAGS,
+  CONFIG_TABS,
+  openConfigTab,
+  lockUserProfile,
+  LIVE_SKIP_REASON,
+  selectUserRoleProfile,
+  deleteUserRoleProfile,
+} from '../live';
 
 /**
  * Accessibility and visual-system guardrails for the configuration page (VS-12):
@@ -362,3 +372,192 @@ test.describe('custom endpoint drawer', () => {
     await expect.poll(scrolled).toBeGreaterThan(0);
   });
 });
+
+/** Every WCAG 2.0 and 2.1 A and AA violation axe finds, in `selector` when given. */
+async function wcagViolations(page: Page, selector?: string) {
+  const builder = new AxeBuilder({ page }).withTags(WCAG_TAGS);
+  const results = await (selector ? builder.include(selector) : builder).analyze();
+  return results.violations.map((violation) => ({
+    rule: violation.id,
+    targets: violation.nodes.slice(0, 5).map((node) => node.target.join(' ')),
+  }));
+}
+
+const unsavedBar = (page: Page) => page.getByRole('region', { name: 'Unsaved changes' });
+const activeTab = (page: Page) => page.locator('[role="tab"][data-state="active"]');
+
+async function reviewAndSave(page: Page) {
+  await unsavedBar(page)
+    .getByRole('button', { name: /^Review & save$/ })
+    .click();
+  const dialog = page.getByRole('dialog');
+  await dialog.getByRole('button', { name: /^Save$/ }).click();
+  await expect(dialog).toHaveCount(0);
+  await expect(unsavedBar(page)).toHaveCount(0);
+}
+
+/** Opens Create endpoint and starts a blank endpoint; returns the drawer. */
+async function startBlankEndpoint(page: Page) {
+  await openConfigTab(page, 'custom');
+  await page.getByRole('button', { name: 'Create endpoint' }).click();
+  const drawer = page.getByRole('dialog');
+  const blank = drawer.getByRole('button', { name: /^Blank endpoint/ });
+  await blank.focus();
+  await page.keyboard.press('Enter');
+  return drawer;
+}
+
+/**
+ * Views a dialog swaps in place of another: the control that swapped them is
+ * gone, so focus must land in the new view (not on the dialog itself), and
+ * the new view must pass the WCAG scan.
+ */
+for (const theme of THEMES) {
+  test.describe(`views swapped in place: ${theme}`, () => {
+    test.use({ colorScheme: theme, viewport: { width: 1440, height: 900 } });
+
+    test('Create endpoint, its blank form: focus on Name, no WCAG violations', async ({ page }) => {
+      const drawer = await startBlankEndpoint(page);
+      await expect(drawer.locator('#endpoints-custom-9999-name')).toBeFocused();
+      expect(await wcagViolations(page, '[role="dialog"]')).toEqual([]);
+    });
+
+    test('the Preview drawer after Change: focus in the search, no WCAG violations', async ({
+      page,
+    }) => {
+      await openConfigTab(page, 'system');
+      await page.getByRole('button', { name: 'Preview', exact: true }).click();
+      const drawer = page.getByRole('dialog');
+      await drawer.getByRole('button', { name: 'Change' }).focus();
+      await page.keyboard.press('Enter');
+      await expect(drawer.getByRole('combobox')).toBeFocused();
+      expect(await wcagViolations(page, '[role="dialog"]')).toEqual([]);
+    });
+
+    test('Import YAML, its second step: focus on its first choice, no WCAG violations', async ({
+      page,
+    }) => {
+      await openConfigTab(page, 'system');
+      await page.getByRole('button', { name: 'Import YAML' }).click();
+      const dialog = page.getByRole('dialog');
+      await dialog.getByRole('tab', { name: 'Paste YAML' }).click();
+      await dialog
+        .getByRole('textbox', { name: 'Paste YAML' })
+        .fill('balance:\n  startBalance: 777\n');
+      await dialog.getByRole('button', { name: 'Continue' }).focus();
+      await page.keyboard.press('Enter');
+      await expect(dialog.getByText('Where should these settings go?')).toBeVisible();
+      await expect(dialog.getByRole('radio', { name: /^Base configuration/ })).toBeFocused();
+      expect(await wcagViolations(page, '[role="dialog"]')).toEqual([]);
+    });
+  });
+}
+
+test.describe('a role profile with an override of its own', () => {
+  test.use({ viewport: { width: 1440, height: 900 } });
+  test.describe.configure({ timeout: 180_000 });
+  /** Set once the test creates the USER role's profile, so cleanup deletes only its own. */
+  let createdUserProfile = false;
+
+  lockUserProfile(async (page) => {
+    if (!createdUserProfile) return;
+    createdUserProfile = false;
+    await deleteUserRoleProfile(page, true);
+  });
+
+  test('has no WCAG violations with its sections open, and Remove override keeps focus on the field', async ({
+    page,
+  }) => {
+    await openConfigTab(page, 'system');
+    createdUserProfile = await selectUserRoleProfile(page);
+    await expect(page).toHaveURL(/scope=role(%3A|:)USER/);
+    const start = page.locator('#balance-startBalance');
+    await start.fill('4321');
+    await start.press('Tab');
+    await reviewAndSave(page);
+
+    await hideDevtools(page);
+    await expandSections(page);
+    const remove = page
+      .locator('.settings-row', { has: start })
+      .locator('button.settings-row-action');
+    await expect(remove).toHaveText(/^Remove override \(inherits /);
+    for (const colorScheme of THEMES) {
+      await page.emulateMedia({ colorScheme });
+      await page.waitForFunction(() => document.getAnimations().length === 0);
+      expect(await wcagViolations(page)).toEqual([]);
+    }
+
+    await remove.focus();
+    await page.keyboard.press('Enter');
+    await expect(remove).toHaveCount(0);
+    await expect(start).toBeFocused();
+    await reviewAndSave(page);
+  });
+});
+
+test.describe('focus stays on the page when a control takes itself away', () => {
+  test.use({ colorScheme: 'light', viewport: { width: 1440, height: 900 } });
+
+  test('Discard in the unsaved-changes bar puts focus on the open tab', async ({ page }) => {
+    await openConfigTab(page, 'system');
+    const field = page.locator('#balance-refillAmount');
+    await field.fill('12345');
+    await field.press('Tab');
+    await unsavedBar(page).getByRole('button', { name: 'Discard' }).focus();
+    await page.keyboard.press('Enter');
+    await expect(unsavedBar(page)).toHaveCount(0);
+    await expect(activeTab(page)).toBeFocused();
+  });
+
+  test('Jump to puts focus on the heading of the section it scrolls to', async ({ page }) => {
+    await page.setViewportSize({ width: 1024, height: 800 });
+    await openConfigTab(page, 'features');
+    await page.getByRole('button', { name: 'Jump to…' }).focus();
+    await page.keyboard.press('Enter');
+    for (let i = 0; i < 3; i++) await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+    await expect
+      .poll(() =>
+        page.evaluate(
+          () =>
+            document.activeElement?.matches(
+              'form :is(h2, h3, h4, h5, h6) > button, form button[data-section-id]',
+            ) ?? false,
+        ),
+      )
+      .toBe(true);
+  });
+
+  test('Escape on an MCP server rename puts focus back on its header', async ({ page }) => {
+    await openConfigTab(page, 'mcp');
+    await page.getByRole('button', { name: 'Create MCP server' }).click();
+    const create = page.getByRole('dialog');
+    await create.getByLabel('Server name').fill('e2e-focus');
+    await create.locator('#mcpDraft-url').fill('https://mcp.e2e.example/mcp');
+    await create.locator('#mcpDraft-url').press('Tab');
+    await create.getByRole('button', { name: 'Create', exact: true }).click();
+    await expect(create).toHaveCount(0);
+
+    const card = page.locator('[data-mcp-server="e2e-focus"]');
+    await card.getByRole('button', { name: 'Actions for e2e-focus' }).click();
+    await page.getByRole('menuitem', { name: /^Rename/ }).click();
+    const rename = page.getByRole('textbox', { name: 'Rename e2e-focus' });
+    await expect(rename).toBeFocused();
+    await page.keyboard.press('Escape');
+    await expect(rename).toHaveCount(0);
+    await expect(card.locator('button[data-section-id]')).toBeFocused();
+
+    await unsavedBar(page).getByRole('button', { name: 'Discard' }).click();
+    await expect(card).toHaveCount(0);
+  });
+
+  test('Escape asks before discarding a name typed into a blank endpoint', async ({ page }) => {
+    const drawer = await startBlankEndpoint(page);
+    const name = drawer.locator('#endpoints-custom-9999-name');
+    await name.fill('Draft endpoint');
+    await page.keyboard.press('Escape');
+    await expect(drawer.getByText('Discard this new endpoint?')).toBeVisible();
+    await expect(name).toHaveValue('Draft endpoint');
+  });
+});
diff --git a/e2e/access.spec.ts b/e2e/access.spec.ts
index 74ee7fb0..1f3ebb6d 100644
--- a/e2e/access.spec.ts
+++ b/e2e/access.spec.ts
@@ -12,9 +12,7 @@ import {
   searchField,
   uniqueName,
 } from './access';
-import { AUDITED_WRITES_SKIP_REASON, LIVE, MOCK_FIXTURES_SKIP_REASON } from './live';
-
-const WCAG_TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
+import { LIVE, WCAG_TAGS, MOCK_FIXTURES_SKIP_REASON, AUDITED_WRITES_SKIP_REASON } from './live';
 
 async function hideTanStackDevtools(page: Page) {
   await page.evaluate(() => {
diff --git a/e2e/config-shell.spec.ts b/e2e/config-shell.spec.ts
index b2d18b16..8c18a233 100644
--- a/e2e/config-shell.spec.ts
+++ b/e2e/config-shell.spec.ts
@@ -1,16 +1,25 @@
 import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
 import type { Page, Route } from '@playwright/test';
-import { LIVE, LIVE_SKIP_REASON, lockUserProfile } from './live';
+import {
+  LIVE,
+  WCAG_TAGS,
+  lockUserProfile,
+  LIVE_SKIP_REASON,
+  selectUserRoleProfile,
+  deleteUserRoleProfile,
+  AUDITED_WRITES_SKIP_REASON,
+} from './live';
+import { createGroup, deleteFromList, uniqueName } from './access';
 
 /**
  * Configuration page shell (WS5): loading and error routes, Expand all,
  * field-level search with deep links, URL-driven profile scope, the
- * unsaved-changes guard and the 390 px layout.
- *
- * Needs a LibreChat backend with admin config routes (the default mock backend
- * has none): run with E2E_LIVE=1 against a real stack.
+ * unsaved-changes guard and the 390 px layout. Those need a LibreChat backend
+ * with admin config routes (the default mock backend has none): run with
+ * E2E_LIVE=1 against a real stack. The app shell around every page (the
+ * command menu, page titles, toasts) runs against either backend.
  */
-test.skip(!LIVE, LIVE_SKIP_REASON);
 
 const TABS = ['providers', 'custom', 'specs', 'mcp', 'features', 'files', 'system'];
 /** Collapsed sections, groups and cards (not a model chip's inline editor or a select). */
@@ -37,6 +46,7 @@ function failServerFn(marker: string) {
 }
 
 test.describe('Configuration shell: loading and errors', () => {
+  test.skip(!LIVE, LIVE_SKIP_REASON);
   test('a slow load shows a skeleton and never an editable form before the data', async ({
     page,
   }) => {
@@ -80,6 +90,7 @@ test.describe('Configuration shell: loading and errors', () => {
 });
 
 test.describe('Configuration shell: toolbar', () => {
+  test.skip(!LIVE, LIVE_SKIP_REASON);
   test.describe.configure({ timeout: 120_000 });
 
   for (const tab of TABS) {
@@ -94,6 +105,20 @@ test.describe('Configuration shell: toolbar', () => {
     });
   }
 
+  test("the filter's clear button is named in the panel's language", async ({ page }) => {
+    await openTab(page, 'system');
+    const filter = page.getByRole('textbox', { name: 'Filter this tab…' });
+    await filter.fill('zzzzxx');
+    await expect(
+      page.getByRole('status').filter({ hasText: 'No settings on this tab match' }),
+    ).toBeVisible();
+    const clear = page.getByRole('button', { name: 'Clear', exact: true });
+    await expect(clear).toBeVisible();
+    await expect(page.getByRole('button', { name: 'clear input' })).toHaveCount(0);
+    await clear.click();
+    await expect(filter).toHaveValue('');
+  });
+
   test('the toolbar never covers an Add button scrolled to the top', async ({ page }) => {
     await openTab(page, 'features');
     await page.getByRole('button', { name: 'Expand all' }).click();
@@ -131,6 +156,7 @@ test.describe('Configuration shell: toolbar', () => {
 });
 
 test.describe('Configuration shell: search and deep links', () => {
+  test.skip(!LIVE, LIVE_SKIP_REASON);
   async function search(page: Page, query: string) {
     await page.keyboard.press('Control+k');
     await page.keyboard.type(query);
@@ -180,57 +206,19 @@ test.describe('Configuration shell: search and deep links', () => {
 });
 
 test.describe('Configuration shell: Back from the USER role profile', () => {
+  test.skip(!LIVE, LIVE_SKIP_REASON);
   /** Set once a test creates the USER role's profile, so cleanup never deletes one it found. */
   let createdUserProfile = false;
 
-  /** Opens the scope selector once its profile list has loaded. */
-  async function openScopeSelector(page: Page) {
-    await page.getByRole('button', { name: /^Select scope/ }).click();
-    const dialog = page.getByRole('dialog');
-    await expect(dialog.getByRole('option', { name: /^Base configuration/ })).toBeVisible();
-    return dialog;
-  }
-
-  /** Opens the USER role's profile; on a clean database, creating it opens it. */
-  async function selectUserRole(page: Page) {
-    const dialog = await openScopeSelector(page);
-    const user = dialog.getByRole('option', { name: /^USER / });
-    if ((await user.count()) > 0) {
-      await user.click();
-      return;
-    }
-    await dialog.getByRole('button', { name: 'Create' }).click();
-    await dialog.getByRole('option', { name: 'USER', exact: true }).click();
-    createdUserProfile = true;
-  }
-
-  /**
-   * Deletes the USER role's profile unless something has saved overrides to it since.
-   * The confirm view lists no options and stays up until the delete succeeds, so the
-   * profile list coming back is what proves the delete finished.
-   */
-  async function deleteUserProfile(page: Page) {
-    await openTab(page, 'system');
-    const dialog = await openScopeSelector(page);
-    const user = dialog.getByRole('option', { name: /^USER / });
-    if ((await user.filter({ hasText: 'No overrides' }).count()) === 0) return;
-    await dialog.getByRole('option', { name: 'Delete profile USER', exact: true }).click();
-    await dialog.getByRole('button', { name: 'Delete configuration' }).click();
-    await expect(dialog.getByRole('option', { name: /^Base configuration/ })).toBeVisible({
-      timeout: 10_000,
-    });
-    await expect(user).toHaveCount(0);
-  }
-
   lockUserProfile(async (page) => {
     if (!createdUserProfile) return;
     createdUserProfile = false;
-    await deleteUserProfile(page);
+    await deleteUserRoleProfile(page);
   });
 
   test('Back after selecting a profile restores Base in the URL and the UI', async ({ page }) => {
     await openTab(page, 'system');
-    await selectUserRole(page);
+    createdUserProfile = await selectUserRoleProfile(page);
     await expect(page).toHaveURL(/scope=role(%3A|:)USER/);
     await expect(page.getByRole('button', { name: /^Select scope: USER/ })).toBeVisible();
     await page.goBack();
@@ -240,6 +228,7 @@ test.describe('Configuration shell: Back from the USER role profile', () => {
 });
 
 test.describe('Configuration shell: profile scope and guard', () => {
+  test.skip(!LIVE, LIVE_SKIP_REASON);
   test('a fresh visit opens Base, an unknown profile says so', async ({ page }) => {
     await openTab(page, 'system');
     await expect(page.getByRole('button', { name: /^Select scope: Base/ })).toBeVisible();
@@ -276,6 +265,7 @@ test.describe('Configuration shell: profile scope and guard', () => {
 });
 
 test.describe('Configuration shell: 390 px', () => {
+  test.skip(!LIVE, LIVE_SKIP_REASON);
   test.use({ viewport: { width: 390, height: 844 } });
 
   test('header actions never overlap the title and Import YAML is reachable', async ({
@@ -309,3 +299,106 @@ test.describe('Configuration shell: 390 px', () => {
     await expect(page.getByRole('dialog')).toBeVisible();
   });
 });
+
+test.describe('App shell: command menu', () => {
+  test('says "No results" without an empty listbox, with no WCAG violations', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('header h1')).toBeVisible();
+    await page.keyboard.press('Control+k');
+    const menu = page.getByRole('dialog');
+    await expect(menu).toBeVisible();
+    await page.keyboard.type('zzzzxx');
+    await expect(menu.getByRole('status')).toHaveText('No results found.');
+    await expect(menu.getByRole('listbox')).toHaveCount(0);
+    const results = await new AxeBuilder({ page })
+      .withTags(WCAG_TAGS)
+      .include('[role="dialog"]')
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+
+  test('a command that opens a page puts focus on its title, not on <body>', async ({ page }) => {
+    await page.goto('/');
+    const search = page.getByRole('button', { name: /^Search/ });
+    await search.focus();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await page.keyboard.type('Access');
+    await expect(page.locator('[cmdk-item]').first()).toBeVisible();
+    await page.keyboard.press('Enter');
+    await expect(page).toHaveURL(/\/access/);
+    const title = page.locator('header h1');
+    await expect(title).toHaveText('Access management');
+    await expect(title).toBeFocused();
+    expect(await page.evaluate(() => document.activeElement === document.body)).toBe(false);
+  });
+});
+
+test.describe('App shell: page titles', () => {
+  const PAGES = [
+    { path: '/', title: /^Dashboard · LibreChat Admin Panel$/ },
+    { path: '/configuration', title: /^Configuration · LibreChat Admin Panel$/ },
+    { path: '/access', title: /^Access management · LibreChat Admin Panel$/ },
+    { path: '/grants', title: /^System grants · LibreChat Admin Panel$/ },
+    { path: '/help', title: /^Help · LibreChat Admin Panel$/ },
+    { path: '/no-such-page', title: /^Page not found · LibreChat Admin Panel$/ },
+  ] as const;
+
+  for (const { path, title } of PAGES) {
+    test(`${path} names the browser tab after the page`, async ({ page }) => {
+      await page.goto(path);
+      await expect(page).toHaveTitle(title);
+    });
+  }
+
+  test('a page opened from the sidebar renames the tab', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveTitle(/^Dashboard/);
+    await page.locator('aside a[href*="/grants"]').first().click();
+    await expect(page).toHaveTitle(/^System grants · /);
+  });
+
+  test.describe('signed out', () => {
+    test.use({ storageState: { cookies: [], origins: [] } });
+
+    test('/login names the browser tab "Sign in"', async ({ page }) => {
+      await page.goto('/login');
+      await expect(page).toHaveTitle(/^Sign in · LibreChat Admin Panel$/);
+    });
+  });
+});
+
+test.describe('App shell: toasts', () => {
+  let created: string | undefined;
+
+  test.afterEach(async ({ page }) => {
+    if (!created) return;
+    await deleteFromList(page, 'groups', created);
+    created = undefined;
+  });
+
+  test("a toast's close button is named Close", async ({ page }) => {
+    test.skip(LIVE, AUDITED_WRITES_SKIP_REASON);
+    created = uniqueName('Toast');
+    await createGroup(page, created);
+    const toasts = page.getByRole('region', { name: /^Notifications/ });
+    await expect(toasts.getByRole('listitem')).not.toHaveCount(0);
+    await expect(toasts.getByRole('button', { name: 'Close' }).first()).toBeVisible();
+    await expect(toasts.getByRole('button', { name: 'cross' })).toHaveCount(0);
+  });
+
+  test('the Undo toast of Discard names its close button Close', async ({ page }) => {
+    test.skip(!LIVE, LIVE_SKIP_REASON);
+    await openTab(page, 'system');
+    const field = page.locator('#balance-refillAmount');
+    await field.fill('12345');
+    await field.press('Tab');
+    await page
+      .getByRole('region', { name: 'Unsaved changes' })
+      .getByRole('button', { name: 'Discard' })
+      .click();
+    const toasts = page.getByRole('region', { name: /^Notifications/ });
+    await expect(toasts.getByRole('button', { name: 'Undo' })).toBeVisible();
+    await expect(toasts.getByRole('button', { name: 'Close' })).toBeVisible();
+  });
+});
diff --git a/e2e/features.spec.ts b/e2e/features.spec.ts
index 2e866910..09d170c5 100644
--- a/e2e/features.spec.ts
+++ b/e2e/features.spec.ts
@@ -63,9 +63,7 @@ test.describe('Features editors', () => {
     );
     await expect(memory.getByLabel('Model', { exact: true })).toHaveValue('gpt-4o-mini');
 
-    await memory
-      .getByRole('button', { name: /^Revert Agent to its librechat\.yaml value/ })
-      .click();
+    await memory.getByRole('button', { name: /^Revert to librechat\.yaml \(.*\): Agent$/ }).click();
     await review(page);
     await saveAndWait(page);
     await expect(memory.getByRole('button', { name: 'Existing agent' })).toHaveAttribute(
@@ -119,8 +117,12 @@ test.describe('Features editors', () => {
       web.getByText('Stored encrypted. Only the last characters are shown.'),
     ).toBeVisible();
 
-    await web.getByRole('button', { name: /^Revert Serper API key/ }).click();
-    await web.getByRole('button', { name: /^Revert Search provider/ }).click();
+    await web
+      .getByRole('button', { name: /^(Revert to .+|Remove override): Serper API key$/ })
+      .click();
+    await web
+      .getByRole('button', { name: /^(Revert to .+|Remove override): Search provider$/ })
+      .click();
     await review(page);
     await saveAndWait(page);
   });
diff --git a/e2e/grants.spec.ts b/e2e/grants.spec.ts
index 3b311c2d..972d2339 100644
--- a/e2e/grants.spec.ts
+++ b/e2e/grants.spec.ts
@@ -5,14 +5,13 @@ import type { Page } from '@playwright/test';
 import { createRole, deleteFromList, grantReadUsage, searchField, uniqueName } from './access';
 import {
   LIVE,
+  WCAG_TAGS,
   MOCK_BACKEND_URL,
   MOCK_ADMIN_HEADERS,
   MOCK_FIXTURES_SKIP_REASON,
   AUDITED_WRITES_SKIP_REASON,
 } from './live';
 
-const WCAG_TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
-
 async function hideTanStackDevtools(page: Page) {
   await page.evaluate(() => {
     document
diff --git a/e2e/live.ts b/e2e/live.ts
index 7a8edc89..8dfc3a72 100644
--- a/e2e/live.ts
+++ b/e2e/live.ts
@@ -53,6 +53,9 @@ export const CONFIG_TABS = [
 
 export const THEMES = ['light', 'dark'] as const;
 
+/** The WCAG 2.0 and 2.1 level A and AA rules the panel's axe scans run. */
+export const WCAG_TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
+
 /** Opens a configuration tab and waits until its form has rendered real fields. */
 export async function openConfigTab(page: Page, tab: string) {
   await page.goto(`/configuration?tab=${tab}`);
@@ -187,6 +190,49 @@ export function lockUserProfile(cleanup?: (page: Page) => Promise<void>) {
   });
 }
 
+/** Opens the scope selector once its profile list has loaded. */
+export async function openScopeSelector(page: Page) {
+  await page.getByRole('button', { name: /^Select scope/ }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog.getByRole('option', { name: /^Base configuration/ })).toBeVisible();
+  return dialog;
+}
+
+/**
+ * Opens the USER role's profile; on a clean database, creating it opens it.
+ * Returns whether it created the profile. Call it under `lockUserProfile`.
+ */
+export async function selectUserRoleProfile(page: Page): Promise<boolean> {
+  const dialog = await openScopeSelector(page);
+  const user = dialog.getByRole('option', { name: /^USER / });
+  if ((await user.count()) > 0) {
+    await user.click();
+    return false;
+  }
+  await dialog.getByRole('button', { name: 'Create' }).click();
+  await dialog.getByRole('option', { name: 'USER', exact: true }).click();
+  return true;
+}
+
+/**
+ * Deletes the USER role's profile, unless something has saved overrides to it
+ * since and `force` is unset (a test deleting a profile it created passes it).
+ * The confirm view lists no options and stays up until the delete succeeds,
+ * so the profile list coming back is what proves the delete finished.
+ */
+export async function deleteUserRoleProfile(page: Page, force = false) {
+  await openConfigTab(page, 'system');
+  const dialog = await openScopeSelector(page);
+  const user = dialog.getByRole('option', { name: /^USER / });
+  if (!force && (await user.filter({ hasText: 'No overrides' }).count()) === 0) return;
+  await dialog.getByRole('option', { name: 'Delete profile USER', exact: true }).click();
+  await dialog.getByRole('button', { name: 'Delete configuration' }).click();
+  await expect(dialog.getByRole('option', { name: /^Base configuration/ })).toBeVisible({
+    timeout: 10_000,
+  });
+  await expect(user).toHaveCount(0);
+}
+
 /** click-ui Selects for the a11y specs: each `open` loads the Select's page and returns its trigger. */
 export const SELECTS = [
   {
diff --git a/e2e/login.spec.ts b/e2e/login.spec.ts
index c4261107..6b9f6688 100644
--- a/e2e/login.spec.ts
+++ b/e2e/login.spec.ts
@@ -1,8 +1,7 @@
 import { test, expect } from '@playwright/test';
 import AxeBuilder from '@axe-core/playwright';
 import type { Page, Route } from '@playwright/test';
-
-const WCAG_TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
+import { WCAG_TAGS } from './live';
 
 // Login tests must be unauthenticated
 test.use({ storageState: { cookies: [], origins: [] } });
diff --git a/e2e/sidebar.spec.ts b/e2e/sidebar.spec.ts
index d182b685..39a69322 100644
--- a/e2e/sidebar.spec.ts
+++ b/e2e/sidebar.spec.ts
@@ -192,4 +192,15 @@ test.describe('Sidebar rail', () => {
       expect(fit.ellipsized).toBe(true);
     }
   });
+
+  test('gives focus back to the avatar when its menu closes with Escape', async ({ page }) => {
+    await openSidebar(page, false);
+    const avatar = page.getByRole('button', { name: RINGED[0][1] });
+    await avatar.focus();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menu')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('menu')).toBeHidden();
+    await expect(avatar).toBeFocused();
+  });
 });
diff --git a/src/components/CommandMenu.tsx b/src/components/CommandMenu.tsx
index a80e2e02..870f15ff 100644
--- a/src/components/CommandMenu.tsx
+++ b/src/components/CommandMenu.tsx
@@ -8,11 +8,18 @@ import type * as t from '@/types';
 import { matchesQuery, searchConfigIndex } from './configuration/search';
 import { useSearchIndex, useLocalize, useReturnFocus } from '@/hooks';
 import { CONFIG_TABS } from './configuration/configMeta';
+import { pageTitle, restoreFocusLater } from '@/utils';
 import { CommandDialog } from '@/components/shared';
 import { useTheme } from '@/contexts/ThemeContext';
 
 const MAX_SETTING_HITS = 30;
 
+/**
+ * The command menu (Ctrl+K): pages, tabs, settings and theme actions. "No
+ * results" is a status message beside the listbox, which may hold only
+ * options; the list stays in the DOM, hidden, as the target of the input's
+ * `aria-controls`.
+ */
 export function CommandMenu({ open, onOpenChange }: t.CommandMenuProps) {
   const localize = useLocalize();
   const router = useRouter();
@@ -22,7 +29,8 @@ export function CommandMenu({ open, onOpenChange }: t.CommandMenuProps) {
   const [search, setSearch] = useState('');
   const listRef = useRef<HTMLDivElement>(null);
   const returnFocus = useReturnFocus(open);
-  const navigatedRef = useRef(false);
+  /** The navigation a command started, while its menu closes. */
+  const navigationRef = useRef<Promise<void> | null>(null);
 
   const handleSearchChange = useCallback((value: string) => {
     setSearch(value);
@@ -41,29 +49,38 @@ export function CommandMenu({ open, onOpenChange }: t.CommandMenuProps) {
 
   const close = useCallback(() => handleOpenChange(false), [handleOpenChange]);
 
-  /** Closes for a command that opens a page: where focus goes is then up to that page. */
-  const closeToNavigate = useCallback(() => {
-    navigatedRef.current = true;
-    close();
-  }, [close]);
+  /** Closes for a command that opens a page: focus then goes to that page. */
+  const closeToNavigate = useCallback(
+    (navigate: () => Promise<void>) => {
+      close();
+      navigationRef.current = navigate();
+    },
+    [close],
+  );
 
-  /** Gives focus back to the opener, unless a command opened a page. */
+  /**
+   * Gives focus back to the opener; after a command opened a page, to that
+   * page's title once it has rendered (WCAG 2.4.3), unless the page put focus
+   * somewhere itself (a setting it reveals takes it from the title).
+   */
   const handleCloseAutoFocus = useCallback(
     (event: Event) => {
-      if (navigatedRef.current) {
-        navigatedRef.current = false;
-        event.preventDefault();
+      const navigation = navigationRef.current;
+      navigationRef.current = null;
+      if (!navigation) {
+        returnFocus(event);
         return;
       }
-      returnFocus(event);
+      event.preventDefault();
+      const focusTitle = () => restoreFocusLater([pageTitle]);
+      void navigation.then(focusTitle, focusTitle);
     },
     [returnFocus],
   );
 
   const navigateTo = useCallback(
     (path: string, searchParams?: Record<string, string>) => {
-      closeToNavigate();
-      router.navigate({ to: path, search: searchParams });
+      closeToNavigate(() => router.navigate({ to: path, search: searchParams }));
     },
     [closeToNavigate, router],
   );
@@ -71,16 +88,17 @@ export function CommandMenu({ open, onOpenChange }: t.CommandMenuProps) {
   /** Opens a setting on the configuration page (revealed and focused there), keeping the open profile. */
   const openSetting = useCallback(
     (item: t.ConfigSearchItem) => {
-      closeToNavigate();
       const { pathname, search: current } = router.state.location;
       const scope =
         pathname.startsWith('/configuration') && typeof current.scope === 'string'
           ? current.scope
           : undefined;
-      router.navigate({
-        to: '/configuration',
-        search: { tab: item.tab, field: item.path, ...(scope && { scope }) },
-      });
+      closeToNavigate(() =>
+        router.navigate({
+          to: '/configuration',
+          search: { tab: item.tab, field: item.path, ...(scope && { scope }) },
+        }),
+      );
     },
     [closeToNavigate, router],
   );
@@ -221,13 +239,18 @@ export function CommandMenu({ open, onOpenChange }: t.CommandMenuProps) {
         placeholder={localize('com_cmdk_placeholder')}
         className="flex w-full border-b border-(--cui-color-stroke-default) bg-transparent px-4 py-3 text-sm text-(--cui-color-text-default) outline-none placeholder:text-(--cui-color-text-muted)"
       />
-      <Command.List ref={listRef} className="max-h-[min(28rem,60vh)] overflow-y-auto p-2">
+      <div role="status">
         {isEmpty && (
-          <div className="px-4 py-8 text-center text-sm text-(--cui-color-text-muted)">
+          <p className="m-0 px-4 py-8 text-center text-sm text-(--cui-color-text-muted)">
             {localize('com_cmdk_no_results')}
-          </div>
+          </p>
         )}
-
+      </div>
+      <Command.List
+        ref={listRef}
+        hidden={isEmpty}
+        className="max-h-[min(28rem,60vh)] overflow-y-auto p-2"
+      >
         {staticGroups.map(
           (group) =>
             group.commands.length > 0 && (
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 34376733..04bbdaf8 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -8,6 +8,7 @@ import { useLocalize } from '@/hooks';
  * and the title truncates instead of being overlapped. The search button is
  * named by what it shows ("Search Ctrl+K"; on phones, where only its icon
  * shows, by its screen-reader-only "Search"), so its name holds its label.
+ * The title takes focus from script (`pageTitle`) after a command opens a page.
  */
 export function Header({ title, onSearchClick, children }: t.HeaderProps) {
   const localize = useLocalize();
@@ -21,7 +22,8 @@ export function Header({ title, onSearchClick, children }: t.HeaderProps) {
         <div className="flex min-w-28 flex-1 basis-auto">
           {title ? (
             <h1
-              className="m-0 min-w-0 truncate text-base font-bold text-(--cui-color-text-default)"
+              tabIndex={-1}
+              className="m-0 min-w-0 truncate text-base font-bold text-(--cui-color-text-default) outline-none"
               title={title}
             >
               {title}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 9c0ea612..a21b0004 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,14 +1,14 @@
-import { useState } from 'react';
 import { flushSync } from 'react-dom';
+import { useRef, useState } from 'react';
 import { Icon, Dropdown } from '@clickhouse/click-ui';
 import { Link, useRouter } from '@tanstack/react-router';
 import type * as t from '@/types';
 import { useStripAriaExpanded, useCapabilities, useLocalize } from '@/hooks';
+import { getInitials, isFocusLost, cn } from '@/utils';
 import { DecorativeIcon } from '@/components/shared';
 import libreChatLogo from '@/assets/librechat.svg';
 import { SettingsDialog } from './SettingsDialog';
 import { SystemCapabilities } from '@/constants';
-import { getInitials, cn } from '@/utils';
 import { adminLogoutFn } from '@/server';
 
 const navItems: t.NavItem[] = [
@@ -60,6 +60,8 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
   const userMenuRef = useStripAriaExpanded<HTMLButtonElement>();
   const [menuOpen, setMenuOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  /** An item was chosen: it may move focus itself (Settings opens a dialog), so closing leaves it be. */
+  const chosenRef = useRef(false);
 
   const visibleItems = navItems.filter((item) => {
     if (!item.capability) return true;
@@ -93,11 +95,30 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
    * focus, and the dialog gives focus back to that button when it closes.
    */
   const openSettings = () => {
+    chosenRef.current = true;
     flushSync(() => setMenuOpen(false));
     userMenuRef.current?.focus();
     setSettingsOpen(true);
   };
 
+  /**
+   * Gives focus back to the avatar once the menu closes (Escape, a click
+   * outside): Radix returns it to click-ui's trigger wrapper, which can't take
+   * it, so it fell to `<body>`. After a chosen item, focus it moved stays.
+   */
+  const handleMenuCloseAutoFocus = (event: Event) => {
+    event.preventDefault();
+    const chosen = chosenRef.current;
+    chosenRef.current = false;
+    if (!chosen) {
+      userMenuRef.current?.focus();
+      return;
+    }
+    requestAnimationFrame(() => {
+      if (isFocusLost()) userMenuRef.current?.focus();
+    });
+  };
+
   /** The avatar shows the initials, so its name starts with them (WCAG 2.5.3, label in name). */
   const initials = getUserInitials(user);
   const userName = user?.name || user?.email || '';
@@ -185,7 +206,7 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
                     </span>
                   </button>
                 </Dropdown.Trigger>
-                <Dropdown.Content>
+                <Dropdown.Content onCloseAutoFocus={handleMenuCloseAutoFocus}>
                   <div className="user-dropdown flex min-w-45 flex-col select-none">
                     {user && (
                       <div className="px-3 pt-3 pb-2">
@@ -203,7 +224,14 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
                     <Dropdown.Item icon="settings" onSelect={openSettings}>
                       {localize('com_ui_settings')}
                     </Dropdown.Item>
-                    <Dropdown.Item icon="slide-out" onClick={handleLogout} disabled={isLoggingOut}>
+                    <Dropdown.Item
+                      icon="slide-out"
+                      onClick={() => {
+                        chosenRef.current = true;
+                        void handleLogout();
+                      }}
+                      disabled={isLoggingOut}
+                    >
                       {isLoggingOut ? localize('com_ui_signing_out') : localize('com_ui_sign_out')}
                     </Dropdown.Item>
                   </div>
diff --git a/src/components/__tests__/CommandMenu.test.tsx b/src/components/__tests__/CommandMenu.test.tsx
index 2ba160ff..20811dff 100644
--- a/src/components/__tests__/CommandMenu.test.tsx
+++ b/src/components/__tests__/CommandMenu.test.tsx
@@ -1,10 +1,10 @@
-import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { expectFocusBack, openFrom, pressEscape, renderWithOpener } from '@/test/focus';
 import { ThemeProvider } from '@/contexts/ThemeContext';
 import { CommandMenu } from '../CommandMenu';
 
-const navigate = vi.fn();
+const navigate = vi.fn(() => Promise.resolve());
 
 vi.mock('@tanstack/react-router', () => ({
   useRouter: () => ({ navigate, state: { location: { pathname: '/', search: {} } } }),
@@ -40,7 +40,7 @@ beforeEach(() => {
   navigate.mockClear();
 });
 
-/** The menu beside the header button that opens it. */
+/** The menu beside the header button that opens it, under the page's title. */
 function renderMenu(): HTMLElement {
   return renderWithOpener(
     (open, close) => (
@@ -51,7 +51,14 @@ function renderMenu(): HTMLElement {
         }}
       />
     ),
-    (node) => <ThemeProvider>{node}</ThemeProvider>,
+    (node) => (
+      <ThemeProvider>
+        <header>
+          <h1 tabIndex={-1}>Access management</h1>
+        </header>
+        {node}
+      </ThemeProvider>
+    ),
   );
 }
 
@@ -69,13 +76,30 @@ describe('CommandMenu focus', () => {
     await expectFocusBack(opener);
   });
 
-  it('leaves focus to the page a navigation command opens', async () => {
+  it('puts focus on the title of the page a navigation command opens', async () => {
     const opener = renderMenu();
     await openFrom(opener);
     fireEvent.click(screen.getByRole('option', { name: 'com_nav_access' }));
     expect(navigate).toHaveBeenCalledWith({ to: '/access', search: undefined });
     await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
-    await act(() => new Promise((resolve) => setTimeout(resolve, 20)));
+    await waitFor(() =>
+      expect(screen.getByRole('heading', { name: 'Access management' })).toHaveFocus(),
+    );
     expect(opener).not.toHaveFocus();
   });
 });
+
+describe('CommandMenu with no results', () => {
+  it('says so in a status message outside the listbox, and shows no empty list', async () => {
+    const opener = renderMenu();
+    await openFrom(opener);
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, { target: { value: 'zzzzxx' } });
+    const status = await screen.findByRole('status');
+    expect(status).toHaveTextContent('com_cmdk_no_results');
+    expect(status.closest('[role="listbox"]')).toBeNull();
+    expect(screen.queryByRole('listbox')).toBeNull();
+    const list = document.getElementById(input.getAttribute('aria-controls') ?? '');
+    expect(list).toHaveAttribute('hidden');
+  });
+});
diff --git a/src/components/__tests__/Sidebar.test.tsx b/src/components/__tests__/Sidebar.test.tsx
index 3420e98d..270dc60b 100644
--- a/src/components/__tests__/Sidebar.test.tsx
+++ b/src/components/__tests__/Sidebar.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   RouterProvider,
@@ -143,4 +143,16 @@ describe('Sidebar', () => {
       );
     },
   );
+
+  it('gives focus back to the avatar when its menu closes with Escape', async () => {
+    await renderSidebar(false);
+    const avatar = screen.getByRole('button', { name: AVATAR });
+    avatar.focus();
+    fireEvent.keyDown(avatar, { key: 'ArrowDown' });
+    const menu = await screen.findByRole('menu');
+    await waitFor(() => expect(menu.contains(document.activeElement)).toBe(true));
+    fireEvent.keyDown(menu, { key: 'Escape' });
+    await waitFor(() => expect(screen.queryByRole('menu')).toBeNull());
+    await waitFor(() => expect(avatar).toHaveFocus());
+  });
 });
diff --git a/src/components/access/__tests__/GroupsTab.test.tsx b/src/components/access/__tests__/GroupsTab.test.tsx
index d49ca30c..b3f4892b 100644
--- a/src/components/access/__tests__/GroupsTab.test.tsx
+++ b/src/components/access/__tests__/GroupsTab.test.tsx
@@ -33,6 +33,7 @@ vi.mock('@/hooks', async () => ({
   useLocalize: () => (key: string) => key,
   useCapabilities: () => ({ hasCapability: () => true }),
   useRefreshScopes: () => vi.fn(),
+  useClearButtonLabel: vi.fn(),
   useReturnFocus: (await vi.importActual<typeof import('@/hooks/dialogs')>('@/hooks/dialogs'))
     .useReturnFocus,
 }));
diff --git a/src/components/configuration/ConfigLoadError.tsx b/src/components/configuration/ConfigLoadError.tsx
index 3f365af7..cd9b3a0a 100644
--- a/src/components/configuration/ConfigLoadError.tsx
+++ b/src/components/configuration/ConfigLoadError.tsx
@@ -1,5 +1,7 @@
+import { useEffect, useRef } from 'react';
 import { Button, Icon } from '@clickhouse/click-ui';
 import type * as t from '@/types';
+import { activeConfigTab, pageTitle, restoreFocus, restoreFocusWhenShown } from '@/utils';
 import { useLocalize } from '@/hooks';
 
 function errorMessage(error: unknown): string | null {
@@ -8,7 +10,12 @@ function errorMessage(error: unknown): string | null {
   return null;
 }
 
-/** Danger card with Retry, shown in place of the configuration form when its data fails to load. */
+/**
+ * Danger card with Retry, shown in place of the configuration form when its
+ * data fails to load. A retry that loads the page takes the card, and the
+ * focused Retry with it, away: focus goes to the open tab once the page shows
+ * it. A retry that fails again gives focus back to Retry.
+ */
 export function ConfigLoadError({
   error,
   onRetry,
@@ -18,10 +25,29 @@ export function ConfigLoadError({
 }: t.ConfigLoadErrorProps) {
   const localize = useLocalize();
   const details = errorMessage(error);
+  const alertRef = useRef<HTMLDivElement>(null);
+  const retriedRef = useRef(false);
+  const wasRetrying = useRef(retrying);
+
+  useEffect(() => {
+    const was = wasRetrying.current;
+    wasRetrying.current = retrying;
+    if (!was || retrying) return;
+    retriedRef.current = false;
+    restoreFocus([alertRef.current?.querySelector('button')]);
+  }, [retrying]);
+
+  useEffect(
+    () => () => {
+      if (retriedRef.current) restoreFocusWhenShown([activeConfigTab, pageTitle]);
+    },
+    [],
+  );
 
   return (
     <div className="py-6 pr-4">
       <div
+        ref={alertRef}
         role="alert"
         className="flex flex-col gap-3 rounded-lg border border-(--cui-color-stroke-default) bg-(--cui-color-background-default) p-5"
       >
@@ -53,7 +79,10 @@ export function ConfigLoadError({
             label={localize('com_config_shell_retry')}
             iconLeft={retrying ? 'loading-animated' : 'refresh'}
             disabled={retrying}
-            onClick={onRetry}
+            onClick={() => {
+              retriedRef.current = true;
+              onRetry();
+            }}
           />
         </div>
       </div>
diff --git a/src/components/configuration/ConfigPage.tsx b/src/components/configuration/ConfigPage.tsx
index 464041c0..4090d4b7 100644
--- a/src/components/configuration/ConfigPage.tsx
+++ b/src/components/configuration/ConfigPage.tsx
@@ -471,6 +471,7 @@ export function ConfigPage({
     () => ({ renames: edits.renameEdits, copies: edits.copyEdits }),
     [edits.renameEdits, edits.copyEdits],
   );
+  /** "Jump to…" scrolls to the section and puts focus on its heading, as the list it was chosen from goes away. */
   const jumpTo = useCallback(
     (id: string) => {
       const entry = findTocEntry(tocEntries, id);
@@ -480,7 +481,7 @@ export function ConfigPage({
       revealConfigPath(
         scrollEl,
         { path: entry.path, sectionId: isSection ? undefined : entry.sectionId },
-        { align: 'start', focus: false, highlight: false },
+        { align: 'start', focus: 'heading', highlight: false },
       );
     },
     [tocEntries, scrollEl, setActiveSection],
diff --git a/src/components/configuration/ConfigRow.tsx b/src/components/configuration/ConfigRow.tsx
index b1c899ef..7f596612 100644
--- a/src/components/configuration/ConfigRow.tsx
+++ b/src/components/configuration/ConfigRow.tsx
@@ -7,6 +7,7 @@ import {
   useValuesScope,
   useFieldProfiles,
   useHasValueLayers,
+  useRefocusWhenGone,
 } from '@/hooks';
 import {
   ShadowBadge,
@@ -15,6 +16,7 @@ import {
   FieldProvenance,
   formatConfigValue,
 } from './values';
+import { activeConfigTab, fieldControl } from '@/utils';
 import { ProfileIndicator } from './ProfileIndicator';
 import { StateChip } from '@/components/shared';
 import { inferControlWidth } from './width';
@@ -69,15 +71,8 @@ export function ConfigRow({
   const revertLabels = useRevertLabels(fieldPath ?? '', title);
   const overriddenBy = useFieldProfiles(fieldPath);
   const valuesScope = useValuesScope();
-  if (hidden) return null;
-
   const isPending = Boolean(isPendingReset) || state.isPendingReset;
   const isEdited = !isPending && state.isEdited;
-  const errorText = error ?? state.error;
-  const source = resolveSource(state, isDbOverride, isConfigured);
-  const undo = fieldPath && onDiscardField ? () => onDiscardField(fieldPath) : undefined;
-  const undoLabel = localize('com_config_ui_undo_change', { name: title });
-
   const isChanged = fieldPath != null && previewChangedPaths?.includes(fieldPath);
   /** A stored override LibreChat ignores can be removed even where the section is read-only (D5). */
   const canReset =
@@ -88,6 +83,17 @@ export function ConfigRow({
     (!disabled || state.ignoredOverride) &&
     permissions?.canEdit &&
     onResetField;
+  /** The reset takes its own button away: focus goes to the field it reset. */
+  const requestRefocus = useRefocusWhenGone(Boolean(canReset), [
+    () => fieldControl(fieldId),
+    activeConfigTab,
+  ]);
+  if (hidden) return null;
+
+  const errorText = error ?? state.error;
+  const source = resolveSource(state, isDbOverride, isConfigured);
+  const undo = fieldPath && onDiscardField ? () => onDiscardField(fieldPath) : undefined;
+  const undoLabel = localize('com_config_ui_undo_change', { name: title });
 
   /** Outside a values provider with layers, the row's own flags decide the chip. */
   const fallbackProvenanceChip = (): ReactNode => {
@@ -176,14 +182,17 @@ export function ConfigRow({
   const resetAriaLabel =
     revertLabels?.ariaLabel ??
     (isChanged
-      ? localize('com_a11y_remove_override', { name: title })
+      ? localize('com_a11y_reset_override', { name: title })
       : localize('com_a11y_reset_to_default', { name: title }));
 
   const resetAction = canReset ? (
     <button
       type="button"
       className="settings-row-action"
-      onClick={() => onResetField(fieldPath)}
+      onClick={() => {
+        requestRefocus();
+        onResetField(fieldPath);
+      }}
       aria-label={resetAriaLabel}
     >
       {resetLabel}
diff --git a/src/components/configuration/ConfigTabContent.tsx b/src/components/configuration/ConfigTabContent.tsx
index 16acd8ec..35cd7ef5 100644
--- a/src/components/configuration/ConfigTabContent.tsx
+++ b/src/components/configuration/ConfigTabContent.tsx
@@ -47,10 +47,13 @@ function isSimpleScalar(f: t.SchemaField): boolean {
   return !f.children?.length && f.type !== 'record' && f.type !== 'object';
 }
 
+/** Why the tab shows no settings (a filter, "Set values only"): a status message screen readers hear (WCAG 4.1.3). */
 function EmptyTabState({ message, action }: { message: string; action?: ReactNode }) {
   return (
     <div className="flex flex-col items-center justify-center gap-3 py-16 text-(--cui-color-text-muted)">
-      <span className="text-sm">{message}</span>
+      <span role="status" className="text-sm">
+        {message}
+      </span>
       {action}
     </div>
   );
diff --git a/src/components/configuration/ImportYamlDialog.tsx b/src/components/configuration/ImportYamlDialog.tsx
index afb002ee..562b080a 100644
--- a/src/components/configuration/ImportYamlDialog.tsx
+++ b/src/components/configuration/ImportYamlDialog.tsx
@@ -1,10 +1,10 @@
 import { PrincipalType } from 'librechat-data-provider';
 import { Link, Button, Dialog } from '@clickhouse/click-ui';
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import type * as t from '@/types';
 import { useLocalize, useReturnFocus, useImportPreview, importTargetLabel } from '@/hooks';
+import { errorText, firstControl, termsRefusalUrl, restoreFocusWhenShown } from '@/utils';
 import { Source, Targets, Preview, SyntaxFrame } from './wizard';
-import { errorText, termsRefusalUrl } from '@/utils';
 import { parseImportedYaml } from '@/server';
 
 const STEPS: t.ImportStep[] = ['input', 'target', 'preview'];
@@ -51,6 +51,21 @@ export function ImportYamlDialog({
   );
   const [newName, setNewName] = useState('');
   const [included, setIncluded] = useState<Set<string> | null>(null);
+  const stepRef = useRef<HTMLDivElement>(null);
+  const shownStep = useRef(step);
+
+  /**
+   * Each step's controls replace the last step's, and Continue is disabled
+   * while it checks the YAML, so focus falls to the dialog: it goes to the
+   * new step's first control once that renders.
+   */
+  useEffect(() => {
+    const was = shownStep.current;
+    shownStep.current = step;
+    if (!open || was === step) return;
+    const view = stepRef.current;
+    return restoreFocusWhenShown([() => firstControl(view)], view?.closest('[role="dialog"]'));
+  }, [open, step]);
 
   const target = useMemo((): t.ImportTarget | null => {
     if (mode === 'base') return { type: 'base' };
@@ -238,53 +253,55 @@ export function ImportYamlDialog({
               })}
             </p>
 
-            {step === 'input' && (
-              <Source
-                activeTab={activeTab}
-                onTabChange={(tab) => {
-                  setActiveTab(tab);
-                  clearErrors();
-                }}
-                yamlText={yamlText}
-                onTextChange={(text) => {
-                  setYamlText(text);
-                  clearErrors();
-                }}
-                fileName={fileName}
-                onFile={handleFile}
-              />
-            )}
+            <div ref={stepRef} className="contents">
+              {step === 'input' && (
+                <Source
+                  activeTab={activeTab}
+                  onTabChange={(tab) => {
+                    setActiveTab(tab);
+                    clearErrors();
+                  }}
+                  yamlText={yamlText}
+                  onTextChange={(text) => {
+                    setYamlText(text);
+                    clearErrors();
+                  }}
+                  fileName={fileName}
+                  onFile={handleFile}
+                />
+              )}
 
-            {step === 'target' && (
-              <Targets
-                open={open}
-                currentScope={currentScope}
-                mode={mode}
-                onModeChange={setMode}
-                kind={kind}
-                onKindChange={(next) => {
-                  setKind(next);
-                  setSelected(null);
-                }}
-                selected={selected}
-                onSelect={setSelected}
-                newType={newType}
-                onNewTypeChange={setNewType}
-                newName={newName}
-                onNewNameChange={setNewName}
-              />
-            )}
+              {step === 'target' && (
+                <Targets
+                  open={open}
+                  currentScope={currentScope}
+                  mode={mode}
+                  onModeChange={setMode}
+                  kind={kind}
+                  onKindChange={(next) => {
+                    setKind(next);
+                    setSelected(null);
+                  }}
+                  selected={selected}
+                  onSelect={setSelected}
+                  newType={newType}
+                  onNewTypeChange={setNewType}
+                  newName={newName}
+                  onNewNameChange={setNewName}
+                />
+              )}
 
-            {step === 'preview' && (
-              <Preview
-                preview={preview}
-                targetLabel={targetLabel}
-                isScope={target?.type !== 'base'}
-                included={selection}
-                onToggle={toggle}
-                unknownEnumValues={unknownEnumValues}
-              />
-            )}
+              {step === 'preview' && (
+                <Preview
+                  preview={preview}
+                  targetLabel={targetLabel}
+                  isScope={target?.type !== 'base'}
+                  included={selection}
+                  onToggle={toggle}
+                  unknownEnumValues={unknownEnumValues}
+                />
+              )}
+            </div>
           </div>
 
           <div className="form-dialog-footer">
diff --git a/src/components/configuration/NavigationGuardDialog.tsx b/src/components/configuration/NavigationGuardDialog.tsx
index b467000f..6937a075 100644
--- a/src/components/configuration/NavigationGuardDialog.tsx
+++ b/src/components/configuration/NavigationGuardDialog.tsx
@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { Button, Dialog } from '@clickhouse/click-ui';
 import type * as t from '@/types';
 import { useReturnFocus, useLocalize } from '@/hooks';
@@ -6,6 +7,7 @@ import { activeConfigTab } from '@/utils';
 /**
  * Themed unsaved-changes prompt for leaving the page or switching profile
  * (WS5: SH-6): Save & continue, Discard, or Cancel, with the change count.
+ * Its body text describes the dialog, so screen readers read it on open.
  */
 export function NavigationGuardDialog({
   open,
@@ -17,6 +19,7 @@ export function NavigationGuardDialog({
 }: t.NavigationGuardDialogProps) {
   const localize = useLocalize();
   const returnFocus = useReturnFocus(open, activeConfigTab);
+  const descriptionId = useId();
 
   const title = (() => {
     if (intent.kind === 'scope') {
@@ -40,10 +43,14 @@ export function NavigationGuardDialog({
         showClose
         onClose={onCancel}
         onCloseAutoFocus={returnFocus}
+        aria-describedby={descriptionId}
         className="modal-frost"
       >
         <div className="flex flex-col gap-4">
-          <p className="m-0 text-sm leading-relaxed text-(--cui-color-text-default)">
+          <p
+            id={descriptionId}
+            className="m-0 text-sm leading-relaxed text-(--cui-color-text-default)"
+          >
             {localize('com_config_shell_guard_desc', { count: changeCount })}
           </p>
           <div className="flex flex-wrap items-center justify-end gap-2">
diff --git a/src/components/configuration/ResetBaseConfigDialog.tsx b/src/components/configuration/ResetBaseConfigDialog.tsx
index ebc84198..979a7043 100644
--- a/src/components/configuration/ResetBaseConfigDialog.tsx
+++ b/src/components/configuration/ResetBaseConfigDialog.tsx
@@ -9,6 +9,7 @@ import { ReviewList } from './review';
  * "Revert all admin overrides to librechat.yaml" (RV-5): lists every base
  * override it removes and what each setting goes back to, as a danger action.
  * The list scrolls on its own, so it is a focusable region keyboard users can scroll.
+ * Its body text describes the dialog, so screen readers read it on open.
  */
 export function ResetBaseConfigDialog({
   open,
@@ -22,6 +23,7 @@ export function ResetBaseConfigDialog({
   const localize = useLocalize();
   const returnFocus = useReturnFocus(open, activeConfigTab);
   const listLabelId = useId();
+  const descriptionId = useId();
   const count = overrides?.count ?? 0;
 
   return (
@@ -36,10 +38,14 @@ export function ResetBaseConfigDialog({
         showClose
         onClose={onCancel}
         onCloseAutoFocus={returnFocus}
+        aria-describedby={descriptionId}
         className="modal-frost"
       >
         <div className="flex flex-col gap-4">
-          <p className="m-0 text-sm leading-relaxed text-(--cui-color-text-default)">
+          <p
+            id={descriptionId}
+            className="m-0 text-sm leading-relaxed text-(--cui-color-text-default)"
+          >
             {localize('com_config_review_reset_body')}
           </p>
           {overrides && count > 0 && (
diff --git a/src/components/configuration/SettingsRow.tsx b/src/components/configuration/SettingsRow.tsx
index 7bba20d1..0f024ee1 100644
--- a/src/components/configuration/SettingsRow.tsx
+++ b/src/components/configuration/SettingsRow.tsx
@@ -3,24 +3,48 @@ import type * as t from '@/types';
 import { SoleFieldContext } from '@/contexts/SettingsContext';
 import { SectionControls } from './SectionControls';
 import { SectionHeader } from './SectionHeader';
+import { fieldControl } from '@/utils';
 import { useLocalize } from '@/hooks';
 
-const LABELABLE = 'input, textarea, select, button, [role="switch"], [role="combobox"]';
+/** A button named by the text it shows ("Add tool"), not a switch or a select trigger. */
+const TEXT_BUTTON = 'button:not([role]), button[role="button"]';
+
+/**
+ * Adds `id` to the control's `aria-describedby`. The returned cleanup takes
+ * out only that id, from the attribute as it is then: React may have changed
+ * the rest since (a rename warning that went away), and restoring a snapshot
+ * would bring back a stale id. Undefined when the control already lists it.
+ */
+function addDescription(control: HTMLElement, id: string): (() => void) | undefined {
+  const described = control.getAttribute('aria-describedby')?.split(' ') ?? [];
+  if (described.includes(id)) return undefined;
+  control.setAttribute('aria-describedby', [...described, id].join(' '));
+  return () => {
+    const remaining = (control.getAttribute('aria-describedby') ?? '')
+      .split(' ')
+      .filter((token) => token !== '' && token !== id);
+    if (remaining.length > 0) control.setAttribute('aria-describedby', remaining.join(' '));
+    else control.removeAttribute('aria-describedby');
+  };
+}
 
 /**
  * Names the control after its section in a single-field section: the visible
  * label is the section heading, so `aria-labelledby` (which outranks the
- * control's own `aria-label`) points at "<Section> <field>". Runs after every
- * render because controls can remount without the row re-rendering.
+ * control's own `aria-label`) points at "<Section> <field>". A button that
+ * shows its own text keeps it as its name (WCAG 2.5.3, label in name: an
+ * empty list's "Add tool") and is described by the field's name instead.
+ * Runs after every render because controls can remount without the row
+ * re-rendering.
  */
 function useSoleFieldName(htmlFor: string | undefined, nameId: string) {
   useLayoutEffect(() => {
-    if (!htmlFor) return;
-    const target = document.getElementById(htmlFor);
-    const control = target?.matches(LABELABLE)
-      ? target
-      : target?.querySelector<HTMLElement>(LABELABLE);
-    if (!control || control.hasAttribute('aria-labelledby')) return;
+    const control = fieldControl(htmlFor);
+    if (!control) return;
+    if (control.matches(TEXT_BUTTON) && control.textContent?.trim()) {
+      return addDescription(control, nameId);
+    }
+    if (control.hasAttribute('aria-labelledby')) return;
     control.setAttribute('aria-labelledby', nameId);
     return () => control.removeAttribute('aria-labelledby');
   });
@@ -34,16 +58,9 @@ function useSoleFieldName(htmlFor: string | undefined, nameId: string) {
  */
 function useErrorDescription(htmlFor: string | undefined, hasError: boolean) {
   useLayoutEffect(() => {
-    if (!htmlFor || !hasError) return;
-    const target = document.getElementById(htmlFor);
-    const control = target?.matches(LABELABLE)
-      ? target
-      : target?.querySelector<HTMLElement>(LABELABLE);
+    const control = hasError ? fieldControl(htmlFor) : null;
     if (!control) return;
-    const errorId = `${htmlFor}-error`;
     const setsInvalid = control.getAttribute('aria-invalid') !== 'true';
-    const described = control.getAttribute('aria-describedby')?.split(' ') ?? [];
-    const addsDescription = !described.includes(errorId);
     if (setsInvalid) control.setAttribute('aria-invalid', 'true');
     /**
      * Writes to `aria-invalid` after ours are the control's own (React
@@ -52,26 +69,15 @@ function useErrorDescription(htmlFor: string | undefined, hasError: boolean) {
      */
     const claims = setsInvalid ? new MutationObserver(() => undefined) : null;
     claims?.observe(control, { attributes: true, attributeFilter: ['aria-invalid'] });
-    if (addsDescription) {
-      control.setAttribute('aria-describedby', [...described, errorId].join(' '));
-    }
-    /**
-     * Undo only what this effect added, against the attributes as they are
-     * now: React may have updated them since (a rename warning that went
-     * away), and restoring a snapshot would bring back a stale id.
-     */
+    const removeDescription = addDescription(control, `${htmlFor}-error`);
+    /** Undo only what this effect added, against the attributes as they are now. */
     return () => {
       const reclaimed = (claims?.takeRecords().length ?? 0) > 0;
       claims?.disconnect();
       if (setsInvalid && !reclaimed && control.getAttribute('aria-invalid') === 'true') {
         control.removeAttribute('aria-invalid');
       }
-      if (!addsDescription) return;
-      const remaining = (control.getAttribute('aria-describedby') ?? '')
-        .split(' ')
-        .filter((id) => id !== '' && id !== errorId);
-      if (remaining.length > 0) control.setAttribute('aria-describedby', remaining.join(' '));
-      else control.removeAttribute('aria-describedby');
+      removeDescription?.();
     };
   });
 }
diff --git a/src/components/configuration/ToolbarFilter.tsx b/src/components/configuration/ToolbarFilter.tsx
index 97b4f181..2c7d9f24 100644
--- a/src/components/configuration/ToolbarFilter.tsx
+++ b/src/components/configuration/ToolbarFilter.tsx
@@ -1,7 +1,8 @@
+import { useRef } from 'react';
 import { SearchField } from '@clickhouse/click-ui';
 import type { KeyboardEvent } from 'react';
 import type * as t from '@/types';
-import { useLocalize } from '@/hooks';
+import { useClearButtonLabel, useLocalize } from '@/hooks';
 
 /**
  * "Filter this tab…": narrows the tab to the settings that match, row by row
@@ -10,6 +11,8 @@ import { useLocalize } from '@/hooks';
  */
 export function ToolbarFilter({ value, onChange, hits, onSelect }: t.ToolbarFilterProps) {
   const localize = useLocalize();
+  const fieldRef = useRef<HTMLDivElement>(null);
+  useClearButtonLabel(fieldRef, localize('com_ui_clear'));
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (event.key === 'Escape') {
@@ -25,6 +28,7 @@ export function ToolbarFilter({ value, onChange, hits, onSelect }: t.ToolbarFilt
 
   return (
     <div
+      ref={fieldRef}
       className="cui-field relative w-full max-w-72 min-w-48 flex-1 sm:w-auto"
       onKeyDown={handleKeyDown}
     >
diff --git a/src/components/configuration/__tests__/ConfigLoadError.test.tsx b/src/components/configuration/__tests__/ConfigLoadError.test.tsx
new file mode 100644
index 00000000..0a7ecf76
--- /dev/null
+++ b/src/components/configuration/__tests__/ConfigLoadError.test.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { ConfigLoadError } from '../ConfigLoadError';
+import '@/locales/i18n';
+
+async function nextFrame() {
+  await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
+}
+
+/** The configuration page: an error card until Retry loads it, then the tabs once they render. */
+function Page() {
+  const [state, setState] = useState<'error' | 'loading' | 'ready'>('error');
+  if (state === 'error') {
+    return <ConfigLoadError error={new Error('boom')} onRetry={() => setState('loading')} />;
+  }
+  if (state === 'loading') {
+    return (
+      <button type="button" onClick={() => setState('ready')}>
+        Finish loading
+      </button>
+    );
+  }
+  return (
+    <div role="tablist">
+      <button type="button" role="tab" data-state="active">
+        Providers
+      </button>
+    </div>
+  );
+}
+
+describe('ConfigLoadError', () => {
+  it('puts focus on the open tab once a retry has loaded the page', async () => {
+    render(<Page />);
+    const retry = screen.getByRole('button', { name: 'Retry' });
+    retry.focus();
+    fireEvent.click(retry);
+    expect(screen.queryByRole('alert')).toBeNull();
+    await nextFrame();
+    expect(document.body).toHaveFocus();
+
+    const finish = screen.getByRole('button', { name: 'Finish loading' });
+    act(() => finish.click());
+    await nextFrame();
+    await nextFrame();
+    expect(screen.getByRole('tab', { name: 'Providers' })).toHaveFocus();
+  });
+});
diff --git a/src/components/configuration/__tests__/ConfigRow.test.tsx b/src/components/configuration/__tests__/ConfigRow.test.tsx
index ef7dedf1..9011fd29 100644
--- a/src/components/configuration/__tests__/ConfigRow.test.tsx
+++ b/src/components/configuration/__tests__/ConfigRow.test.tsx
@@ -1,6 +1,7 @@
+import { useState } from 'react';
 import { describe, it, expect, vi } from 'vitest';
 import { PrincipalType } from 'librechat-data-provider';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import type * as t from '@/types';
 import { ConfigValuesProvider } from '@/contexts/ConfigValuesContext';
 import { scopeConfigFixture, scopeLayersFixture, valuesDataFixture } from '@/test/layers';
@@ -152,6 +153,36 @@ describe('ConfigRow', () => {
     expect(onDiscardField).toHaveBeenCalledWith(PATH);
   });
 
+  it('puts focus on the field once its reset takes the Reset button away', async () => {
+    function Row() {
+      const [pending, setPending] = useState(false);
+      return (
+        <ConfigValuesProvider
+          value={values({ configuredPaths: new Set([PATH]), overridePaths: new Set([PATH]) })}
+        >
+          <ConfigRow
+            title="Start balance"
+            fieldId="balance-startBalance"
+            fieldPath={PATH}
+            permissions={{ canView: true, canEdit: true }}
+            isDbOverride
+            isPendingReset={pending}
+            onResetField={() => setPending(true)}
+          >
+            <input id="balance-startBalance" />
+          </ConfigRow>
+        </ConfigValuesProvider>
+      );
+    }
+    render(<Row />);
+    const reset = screen.getByRole('button', { name: /com_a11y_reset_to_default/ });
+    reset.focus();
+    fireEvent.click(reset);
+    expect(reset).not.toBeInTheDocument();
+    await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
+    expect(document.getElementById('balance-startBalance')).toHaveFocus();
+  });
+
   it('shows an error chip, marker and message', () => {
     const { container } = renderRow(values(), { error: 'Must be positive' });
     expect(chipKinds(container)).toEqual(['error']);
diff --git a/src/components/configuration/__tests__/ConfigTabContent.test.tsx b/src/components/configuration/__tests__/ConfigTabContent.test.tsx
new file mode 100644
index 00000000..ef0e495d
--- /dev/null
+++ b/src/components/configuration/__tests__/ConfigTabContent.test.tsx
@@ -0,0 +1,53 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import type * as t from '@/types';
+import { ConfigTabContent } from '../ConfigTabContent';
+import '@/locales/i18n';
+
+/** One section the tab could show; the filter or "Set values only" hides it. */
+const SECTIONS: t.ConfigSectionConfig[] = [
+  {
+    id: 'interface',
+    titleKey: 'com_config_section_interface',
+    fields: [
+      {
+        key: 'customWelcome',
+        path: 'interface.customWelcome',
+        type: 'string',
+        isOptional: true,
+        depth: 1,
+      },
+    ],
+  },
+];
+
+describe('ConfigTabContent empty states', () => {
+  it('announces that the filter matches no setting on the tab as a status message', () => {
+    render(
+      <ConfigTabContent
+        sections={SECTIONS}
+        configValues={{}}
+        editedValues={{}}
+        onFieldChange={vi.fn()}
+        visibleSectionIds={new Set()}
+        filterText="zzzzxx"
+        onClearFilter={vi.fn()}
+      />,
+    );
+    expect(screen.getByRole('status')).toHaveTextContent('No settings on this tab match “zzzzxx”');
+    expect(screen.getByRole('button', { name: 'Clear filter' })).toBeVisible();
+  });
+
+  it('announces that "Set values only" leaves nothing on the tab as a status message', () => {
+    render(
+      <ConfigTabContent
+        sections={SECTIONS}
+        configValues={{}}
+        editedValues={{}}
+        onFieldChange={vi.fn()}
+        showConfiguredOnly
+      />,
+    );
+    expect(screen.getByRole('status')).toHaveTextContent('Nothing is set on this tab');
+  });
+});
diff --git a/src/components/configuration/__tests__/ImportYamlDialog.test.tsx b/src/components/configuration/__tests__/ImportYamlDialog.test.tsx
index 24b8d68a..d8b8c944 100644
--- a/src/components/configuration/__tests__/ImportYamlDialog.test.tsx
+++ b/src/components/configuration/__tests__/ImportYamlDialog.test.tsx
@@ -151,6 +151,26 @@ describe('ImportYamlDialog wizard', () => {
     expect(onClose).toHaveBeenCalled();
   });
 
+  it("puts focus on the target step's first control once Continue has checked the YAML", async () => {
+    renderDialog();
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'Paste YAML' }), { key: 'Enter' });
+    fireEvent.change(await screen.findByRole('textbox', { name: 'Paste YAML' }), {
+      target: { value: 'balance:\n  startBalance: 777\n' },
+    });
+    /**
+     * A browser drops focus from Continue once it is disabled while checking
+     * the YAML; jsdom keeps it there, so the click starts with focus on <body>.
+     */
+    const next = screen.getByRole('button', { name: 'Continue' });
+    next.focus();
+    next.blur();
+    fireEvent.click(next);
+    await screen.findByText('Where should these settings go?');
+    await waitFor(() =>
+      expect(screen.getByRole('radio', { name: /^Base configuration/ })).toHaveFocus(),
+    );
+  });
+
   it('preselects the open profile and compares with its own values', async () => {
     const { onImport } = renderDialog(userScope);
     await toTargets();
diff --git a/src/components/configuration/__tests__/ScopeCascade.test.tsx b/src/components/configuration/__tests__/ScopeCascade.test.tsx
index d73ef899..595c4a09 100644
--- a/src/components/configuration/__tests__/ScopeCascade.test.tsx
+++ b/src/components/configuration/__tests__/ScopeCascade.test.tsx
@@ -37,6 +37,7 @@ vi.mock('@/hooks', async () => {
     useLocalize: () => localize,
     useConfigFeatures: contract.useConfigFeatures,
     useReturnFocus: dialogs.useReturnFocus,
+    useRefocusWhenGone: dialogs.useRefocusWhenGone,
     useScopeActions: scope.useScopeActions,
     useFieldProfiles: scope.useFieldProfiles,
     useFieldState: field.useFieldState,
diff --git a/src/components/configuration/__tests__/SettingsRow.test.tsx b/src/components/configuration/__tests__/SettingsRow.test.tsx
index 32f866db..4a8de6d3 100644
--- a/src/components/configuration/__tests__/SettingsRow.test.tsx
+++ b/src/components/configuration/__tests__/SettingsRow.test.tsx
@@ -142,4 +142,24 @@ describe('SettingsRow', () => {
     );
     expect(screen.getByRole('checkbox')).toHaveAccessibleName('Secure image links');
   });
+
+  it("keeps a button's own text as its name, described by the field's name (an empty list's Add)", () => {
+    render(
+      <SoleFieldContext.Provider value={{ headingId: 'h-ft', sectionTitle: 'Filtered tools' }}>
+        <SettingsRow
+          label="Hidden tools"
+          htmlFor="filteredTools"
+          control={
+            <div id="filteredTools">
+              <button type="button">Add tool</button>
+            </div>
+          }
+        />
+      </SoleFieldContext.Provider>,
+    );
+    const add = screen.getByRole('button');
+    expect(add).not.toHaveAttribute('aria-labelledby');
+    expect(add).toHaveAccessibleName('Add tool');
+    expect(add).toHaveAccessibleDescription('com_config_ui_sole_name:Filtered tools|Hidden tools');
+  });
 });
diff --git a/src/components/configuration/__tests__/descriptions.test.tsx b/src/components/configuration/__tests__/descriptions.test.tsx
new file mode 100644
index 00000000..36c9e5d0
--- /dev/null
+++ b/src/components/configuration/__tests__/descriptions.test.tsx
@@ -0,0 +1,60 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { NavigationGuardDialog } from '../NavigationGuardDialog';
+import { ResetBaseConfigDialog } from '../ResetBaseConfigDialog';
+import { ConfirmChoiceDialog } from '../fields/ConfirmChoice';
+import '@/locales/i18n';
+
+/**
+ * Exactly `text`. Radix adds click-ui's empty hidden description after the
+ * one a dialog names, which leaves a space at the end of the computed text.
+ */
+function only(text: string): RegExp {
+  return new RegExp(`^${text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*$`);
+}
+
+/**
+ * A confirmation dialog is described by its body text, so a screen reader
+ * reads what the choice does as the dialog opens, not only its title.
+ */
+describe('configuration confirmation dialogs', () => {
+  it('describes the unsaved-changes prompt by its body text', () => {
+    render(
+      <NavigationGuardDialog
+        open
+        intent={{ kind: 'leave' }}
+        changeCount={2}
+        onSave={vi.fn()}
+        onDiscard={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    );
+    expect(screen.getByRole('dialog')).toHaveAccessibleDescription(
+      only('You have 2 unsaved changes. Save them first, or discard them to continue.'),
+    );
+  });
+
+  it('describes Revert all admin overrides by its body text', () => {
+    render(<ResetBaseConfigDialog open resetting={false} onConfirm={vi.fn()} onCancel={vi.fn()} />);
+    expect(screen.getByRole('dialog')).toHaveAccessibleDescription(
+      /^Removes every base override saved in the admin panel\. .*This can't be undone\.\s*$/,
+    );
+  });
+
+  it('describes a choice with consequences by its body', () => {
+    render(
+      <ConfirmChoiceDialog
+        open
+        title="Switch file storage?"
+        actions={[{ label: 'Switch', onSelect: vi.fn() }]}
+        onCancel={vi.fn()}
+      >
+        <p>Files already uploaded stay where they are.</p>
+        <p>New uploads go to Amazon S3.</p>
+      </ConfirmChoiceDialog>,
+    );
+    expect(screen.getByRole('dialog')).toHaveAccessibleDescription(
+      only('Files already uploaded stay where they are. New uploads go to Amazon S3.'),
+    );
+  });
+});
diff --git a/src/components/configuration/fields/ConfirmChoice.tsx b/src/components/configuration/fields/ConfirmChoice.tsx
index 06fc0b2c..96a40213 100644
--- a/src/components/configuration/fields/ConfirmChoice.tsx
+++ b/src/components/configuration/fields/ConfirmChoice.tsx
@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { Button, Dialog } from '@clickhouse/click-ui';
 import type * as t from '@/types';
 import { useReturnFocus, useLocalize } from '@/hooks';
@@ -5,7 +6,8 @@ import { useReturnFocus, useLocalize } from '@/hooks';
 /**
  * Asks before a change with consequences beyond the field (switching file
  * storage, accepting every or no file type, opening sign-up to everyone).
- * Cancel keeps the current value; each action applies one outcome.
+ * Cancel keeps the current value; each action applies one outcome. Its body
+ * describes the dialog, so screen readers read it on open.
  */
 export function ConfirmChoiceDialog({
   open,
@@ -16,6 +18,7 @@ export function ConfirmChoiceDialog({
 }: t.ConfirmChoiceDialogProps) {
   const localize = useLocalize();
   const returnFocus = useReturnFocus(open);
+  const descriptionId = useId();
   return (
     <Dialog
       open={open}
@@ -28,10 +31,14 @@ export function ConfirmChoiceDialog({
         showClose
         onClose={onCancel}
         onCloseAutoFocus={returnFocus}
+        aria-describedby={descriptionId}
         className="modal-frost"
       >
         <div className="flex flex-col gap-4">
-          <div className="flex flex-col gap-2 text-sm leading-relaxed text-(--cui-color-text-default)">
+          <div
+            id={descriptionId}
+            className="flex flex-col gap-2 text-sm leading-relaxed text-(--cui-color-text-default)"
+          >
             {children}
           </div>
           <div className="flex flex-wrap items-center justify-end gap-2">
diff --git a/src/components/configuration/fields/DomainListField.tsx b/src/components/configuration/fields/DomainListField.tsx
index 9a553ad5..40f44867 100644
--- a/src/components/configuration/fields/DomainListField.tsx
+++ b/src/components/configuration/fields/DomainListField.tsx
@@ -24,7 +24,8 @@ const ISSUE_KEYS: Record<t.DomainIssue, string> = {
  * entries are validated as LibreChat parses them (host, optional scheme,
  * port or leading `*.`) before they are added on Enter, comma or Add, and
  * pasting a list adds every valid entry. A status line says what the list does: nothing restricts while
- * it is empty, so removing the last entry asks first, and removes the edit
+ * it is empty, so removing the last entry asks first (focus moves to the
+ * question's Cancel, and back to the input once answered), and removes the edit
  * target's own list (D3: an empty list is never written over the list the
  * layer beneath sets, which then applies again). The last entry of a list
  * only the layer beneath sets can't be removed here, and the field says so.
@@ -44,6 +45,7 @@ export function DomainListField({
   const localize = useLocalize();
   const statusId = useId();
   const errorId = useId();
+  const confirmId = useId();
   const inputRef = useRef<HTMLInputElement>(null);
   const policy = getDomainListPolicy(path);
   const [draft, setDraft] = useState('');
@@ -87,8 +89,14 @@ export function DomainListField({
     addEntries(LIST_SEPARATOR.test(draft) ? splitDomainEntries(draft) : [draft.trim()]);
   };
 
-  const clearList = () => {
+  /** Closes the confirmation strip; its buttons go with it, so focus goes back to the input. */
+  const closeConfirm = () => {
     setConfirmingLast(false);
+    inputRef.current?.focus();
+  };
+
+  const clearList = () => {
+    closeConfirm();
     if (onClear() === false) {
       setNotice(localize('com_config_features_domains_keep_one', { source }));
     }
@@ -155,9 +163,12 @@ export function DomainListField({
         <div
           role="alertdialog"
           aria-label={localize('com_config_features_domains_confirm_title')}
+          aria-describedby={confirmId}
           className="flex flex-wrap items-center gap-2 rounded-md border border-(--settings-warn-mark) bg-(--settings-warn-bg) px-3 py-2 text-xs text-(--settings-warn-fg)"
         >
-          <span className="min-w-0 flex-[1_1_14rem]">{confirmText}</span>
+          <span id={confirmId} className="min-w-0 flex-[1_1_14rem]">
+            {confirmText}
+          </span>
           <Button
             htmlType="button"
             type="danger"
@@ -168,7 +179,8 @@ export function DomainListField({
             htmlType="button"
             type="secondary"
             label={localize('com_ui_cancel')}
-            onClick={() => setConfirmingLast(false)}
+            autoFocus
+            onClick={closeConfirm}
           />
         </div>
       )}
diff --git a/src/components/configuration/fields/__tests__/DomainListField.test.tsx b/src/components/configuration/fields/__tests__/DomainListField.test.tsx
index 2040fc76..faf94162 100644
--- a/src/components/configuration/fields/__tests__/DomainListField.test.tsx
+++ b/src/components/configuration/fields/__tests__/DomainListField.test.tsx
@@ -110,6 +110,26 @@ describe('DomainListField', () => {
     expect(onClear).toHaveBeenCalled();
   });
 
+  it('moves focus into the question about the last domain, and back to the input after it', () => {
+    render(<Harness initial={['example.com']} hasOwnValue />);
+    const remove = screen.getByRole('button', { name: 'Remove example.com' });
+    remove.focus();
+    fireEvent.click(remove);
+    const question = screen.getByRole('alertdialog', { name: 'Remove the restriction' });
+    expect(question).toHaveAccessibleDescription(
+      'Remove the last domain? Agent actions will then be able to call any public domain.',
+    );
+    expect(screen.getByRole('button', { name: 'Cancel' })).toHaveFocus();
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    expect(input()).toHaveFocus();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Remove example.com' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Remove restriction' }));
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    expect(input()).toHaveFocus();
+  });
+
   it('says the librechat.yaml list applies again when the own list is removed', () => {
     render(<Harness initial={['mine.com']} hasOwnValue lowerValues={['a.com', 'b.com']} />);
     fireEvent.click(screen.getByRole('button', { name: 'Remove mine.com' }));
diff --git a/src/components/configuration/preview/Drawer.tsx b/src/components/configuration/preview/Drawer.tsx
index 809db621..d249ced8 100644
--- a/src/components/configuration/preview/Drawer.tsx
+++ b/src/components/configuration/preview/Drawer.tsx
@@ -1,16 +1,16 @@
-import { useState } from 'react';
 import { Button } from '@clickhouse/click-ui';
 import * as Dialog from '@radix-ui/react-dialog';
+import { useEffect, useRef, useState } from 'react';
 import { PrincipalType } from 'librechat-data-provider';
 import type * as t from '@/types';
 import { useLocalize, useReturnFocus, useConfigPreview, useConfigFeatures } from '@/hooks';
 import { CloseButton, DecorativeIcon } from '@/components/shared';
+import { cn, restoreFocus, formatScopeName } from '@/utils';
 import { Banner } from '../sections/endpoints/Banner';
 import { getScopeTypeConfig } from '@/constants';
 import { PreviewPicker } from './Picker';
 import { PreviewLayers } from './Layers';
 import { PreviewConfig } from './Config';
-import { cn, formatScopeName } from '@/utils';
 import { sourceLabel } from '../values';
 
 function targetLabel(target: t.PreviewTarget, localize: t.LocalizeFn): string {
@@ -89,6 +89,8 @@ export function PreviewDrawer({ open, onClose, initialTarget }: t.PreviewDrawerP
   const [target, setTarget] = useState(initialTarget);
   const [picking, setPicking] = useState(false);
   const [wasOpen, setWasOpen] = useState(open);
+  const changeRef = useRef<HTMLButtonElement>(null);
+  const wasPicking = useRef(picking);
   if (open !== wasOpen) {
     setWasOpen(open);
     if (open) {
@@ -97,6 +99,15 @@ export function PreviewDrawer({ open, onClose, initialTarget }: t.PreviewDrawerP
     }
   }
 
+  /** Picking or cancelling takes the picker, and the focus in it, away: focus goes back to Change. */
+  useEffect(() => {
+    const was = wasPicking.current;
+    wasPicking.current = picking;
+    if (!was || picking) return;
+    const change = changeRef.current;
+    restoreFocus([change], change?.closest('[role="dialog"]'));
+  }, [picking]);
+
   const config = getScopeTypeConfig(
     target.type === 'BASE' ? 'BASE' : target.principal.principalType,
   );
@@ -141,6 +152,7 @@ export function PreviewDrawer({ open, onClose, initialTarget }: t.PreviewDrawerP
                 </span>
                 {!picking && (
                   <Button
+                    ref={changeRef}
                     htmlType="button"
                     type="secondary"
                     label={localize('com_config_preview_change')}
diff --git a/src/components/configuration/preview/Picker.tsx b/src/components/configuration/preview/Picker.tsx
index 725a2984..9fa24d46 100644
--- a/src/components/configuration/preview/Picker.tsx
+++ b/src/components/configuration/preview/Picker.tsx
@@ -124,6 +124,7 @@ export function PreviewPicker({ target, onPick, onCancel }: t.PreviewPickerProps
         <div className="flex items-center gap-2 border-b border-(--cui-color-stroke-default) px-3">
           <DecorativeIcon name="search" size="sm" />
           <Command.Input
+            autoFocus
             value={userFilter.value}
             onValueChange={userFilter.onChange}
             placeholder={localize(
diff --git a/src/components/configuration/preview/__tests__/Drawer.test.tsx b/src/components/configuration/preview/__tests__/Drawer.test.tsx
index 79d46784..2b5d0314 100644
--- a/src/components/configuration/preview/__tests__/Drawer.test.tsx
+++ b/src/components/configuration/preview/__tests__/Drawer.test.tsx
@@ -257,6 +257,17 @@ describe('PreviewDrawer on a server that resolves configs (resolvedApi)', () =>
     expect(screen.queryByText(/Their role and groups/)).not.toBeInTheDocument();
   });
 
+  it('puts focus in the picker search on Change, and back on Change once the picker closes', () => {
+    renderDrawer({ type: 'PRINCIPAL', principal: jane });
+    const change = screen.getByRole('button', { name: 'Change' });
+    change.focus();
+    fireEvent.click(change);
+    expect(screen.getByRole('combobox')).toHaveFocus();
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Change' })).toHaveFocus();
+  });
+
   describe('Azure groups and Vertex AI before and after LibreChat derives them', () => {
     const groups = ['endpoints', 'azureOpenAI', 'groups'];
     const userLayer = (ignored: t.PreviewIgnored[]): t.PreviewLayer => ({
diff --git a/src/components/configuration/reveal.test.ts b/src/components/configuration/reveal.test.ts
index 84560333..c3d7ea0b 100644
--- a/src/components/configuration/reveal.test.ts
+++ b/src/components/configuration/reveal.test.ts
@@ -209,4 +209,32 @@ describe('revealConfigPath', () => {
     row.blur();
     expect(row.hasAttribute('tabindex')).toBe(false);
   });
+
+  it("with focus 'heading', focuses the section's heading toggle, not its first control", () => {
+    const section = document.createElement('section');
+    section.id = 'section-balance';
+    section.innerHTML = html`<div data-section-id="section-balance">
+        <h2><button type="button" aria-expanded="true">Balance</button></h2>
+      </div>
+      <div><input type="radio" name="on" checked /><input id="balance-startBalance" /></div>`;
+    container.append(section);
+    revealConfigPath(container, { path: 'balance' }, { focus: 'heading', highlight: false });
+    vi.advanceTimersByTime(2_000);
+    expect(document.activeElement).toBe(section.querySelector('h2 > button'));
+  });
+
+  it("with focus 'heading', focuses an entry card's header button", () => {
+    const card = document.createElement('div');
+    card.id = 'section-mcpServers-docs';
+    card.innerHTML = html`<div>
+      <button type="button" data-section-id="section-mcpServers-docs" aria-expanded="false">
+        Docs
+      </button>
+      <button type="button" aria-haspopup="menu">Actions for docs</button>
+    </div>`;
+    container.append(card);
+    revealConfigPath(container, { path: 'mcpServers.docs' }, { focus: 'heading' });
+    vi.advanceTimersByTime(2_000);
+    expect(document.activeElement).toBe(card.querySelector('[data-section-id]'));
+  });
 });
diff --git a/src/components/configuration/reveal.ts b/src/components/configuration/reveal.ts
index d0ece665..dcc5d612 100644
--- a/src/components/configuration/reveal.ts
+++ b/src/components/configuration/reveal.ts
@@ -186,15 +186,22 @@ function focusMovedInto(container: HTMLElement, before: Element | null): boolean
 const CHECKED_RADIO =
   'input[type="radio"]:checked, [role="radio"][aria-checked="true"], [role="group"] button[aria-pressed="true"]';
 
+/** The toggle in a section's, group's or entry card's heading, which names it. */
+const HEADING_TOGGLE = 'button[data-section-id], :is(h2, h3, h4, h5, h6) > button[aria-expanded]';
+
 /**
- * Focuses the target's control; a read-only setting (no control) focuses its
- * row instead, so keyboard and screen-reader users land where the page shows
- * it rather than at the top of the page.
+ * Focuses the target's control (with `heading`, the toggle that heads the
+ * section or card, if it has one); a read-only setting (no control) focuses
+ * its row instead, so keyboard and screen-reader users land where the page
+ * shows it rather than at the top of the page.
  */
-function focusTarget(el: HTMLElement) {
-  const control = el.matches(FOCUSABLE)
-    ? el
-    : (el.querySelector<HTMLElement>(CHECKED_RADIO) ?? el.querySelector<HTMLElement>(FOCUSABLE));
+function focusTarget(el: HTMLElement, heading: boolean) {
+  const toggle = heading ? el.querySelector<HTMLElement>(HEADING_TOGGLE) : null;
+  const control =
+    toggle ??
+    (el.matches(FOCUSABLE)
+      ? el
+      : (el.querySelector<HTMLElement>(CHECKED_RADIO) ?? el.querySelector<HTMLElement>(FOCUSABLE)));
   if (control) {
     control.focus({ preventScroll: true });
     return;
@@ -275,7 +282,9 @@ export function revealConfigPath(
     settleTimers.push(
       window.setTimeout(() => {
         settle();
-        if (focus && !focusMovedInto(container, focusedBefore)) focusTarget(el);
+        if (focus && !focusMovedInto(container, focusedBefore)) {
+          focusTarget(el, focus === 'heading');
+        }
       }, SETTLE_MS[0]),
       window.setTimeout(() => {
         settle();
diff --git a/src/components/configuration/review/ChangeReview.test.tsx b/src/components/configuration/review/ChangeReview.test.tsx
index 955585e9..708f86c5 100644
--- a/src/components/configuration/review/ChangeReview.test.tsx
+++ b/src/components/configuration/review/ChangeReview.test.tsx
@@ -1,13 +1,16 @@
+import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { createToast } from '@clickhouse/click-ui';
 import { configSchema, PrincipalType } from 'librechat-data-provider';
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import type * as t from '@/types';
+import { isLabelInName, visibleText } from '@/test/a11y';
 import { holdErrorToasts, notifyError } from '@/utils';
 import { summarizeChanges, applySaves } from './diff';
 import { extractSchemaTree } from '@/server/config';
 import { ChangeReview } from './ChangeReview';
 import { buildReviewModel } from './group';
+import { ChangesBar } from './ChangesBar';
 import i18n from '@/locales/i18n';
 
 vi.mock('@clickhouse/click-ui', async (importOriginal) => {
@@ -205,7 +208,9 @@ describe('ChangeReview', () => {
     const review = reviewFor([{ fieldPath: 'registration.socialLogins', value: ['openid'] }]);
     render(<ChangeReview review={review} />);
     fireEvent.click(screen.getByRole('button', { name: 'Revert Social logins' }));
-    fireEvent.click(screen.getByRole('button', { name: 'Go to Social logins' }));
+    const goTo = screen.getByRole('button', { name: 'Go to field: Social logins' });
+    expect(isLabelInName(visibleText(goTo), goTo.getAttribute('aria-label') ?? '')).toBe(true);
+    fireEvent.click(goTo);
     expect(review.revertRow).toHaveBeenCalledTimes(1);
     expect(review.goToRow).toHaveBeenCalledTimes(1);
     expect(screen.getByRole('button', { name: 'Save' })).toBeEnabled();
@@ -406,3 +411,50 @@ describe('ChangeReview — what a change deletes with it', () => {
     ).toBeInTheDocument();
   });
 });
+
+describe('ChangesBar', () => {
+  const saves: t.SaveEntry[] = [{ fieldPath: 'registration.socialLogins', value: ['openid'] }];
+  /** jsdom has no ResizeObserver; the bar keeps toasts clear of itself with one. */
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  );
+
+  it('announces how many changes are unsaved in a status message, without its buttons', () => {
+    render(<ChangesBar review={reviewFor(saves)} />);
+    const status = screen.getByRole('status');
+    expect(status).toHaveTextContent(/^1 unsaved change/);
+    expect(within(status).queryByRole('button')).toBeNull();
+    const bar = screen.getByRole('region', { name: 'Unsaved changes' });
+    expect(within(bar).getByRole('button', { name: 'Discard' })).toBeVisible();
+  });
+
+  it('puts focus on the open tab once Discard takes the bar away', async () => {
+    function Page() {
+      const [dirty, setDirty] = useState(true);
+      return (
+        <>
+          <div role="tablist">
+            <button type="button" role="tab" data-state="active">
+              System
+            </button>
+          </div>
+          <ChangesBar
+            review={reviewFor(saves, { isDirty: dirty, discardAll: () => setDirty(false) })}
+          />
+        </>
+      );
+    }
+    render(<Page />);
+    const discard = screen.getByRole('button', { name: 'Discard' });
+    discard.focus();
+    fireEvent.click(discard);
+    expect(screen.queryByRole('region', { name: 'Unsaved changes' })).toBeNull();
+    await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
+    expect(screen.getByRole('tab', { name: 'System' })).toHaveFocus();
+  });
+});
diff --git a/src/components/configuration/review/ChangesBar.tsx b/src/components/configuration/review/ChangesBar.tsx
index ffea3d8b..307c852e 100644
--- a/src/components/configuration/review/ChangesBar.tsx
+++ b/src/components/configuration/review/ChangesBar.tsx
@@ -1,39 +1,46 @@
 import { useRef } from 'react';
 import type * as t from '@/types';
-import { useLocalize, useToastClearance } from '@/hooks';
+import { useLocalize, useToastClearance, useRefocusWhenGone } from '@/hooks';
 import { StickyActionBar } from '@/components/shared';
+import { activeConfigTab } from '@/utils';
 
 /**
  * The unsaved-changes bar (WS7): how many changes Save would write and on
  * which tabs, with Review and Discard (which offers Undo). Shown on every
- * tab, read-only ones included, while edits are pending.
+ * tab, read-only ones included, while edits are pending. Discard takes the bar
+ * away with its own button, so focus goes to the open tab.
  */
 export function ChangesBar({ review }: t.ChangesBarProps) {
+  const requestRefocus = useRefocusWhenGone(review.isDirty, [activeConfigTab]);
   if (!review.isDirty) return null;
-  return <ShownChangesBar review={review} />;
+  return <ShownChangesBar review={review} onDiscard={requestRefocus} />;
 }
 
-function ShownChangesBar({ review }: t.ChangesBarProps) {
+function ShownChangesBar({ review, onDiscard }: t.ShownChangesBarProps) {
   const localize = useLocalize();
   const barRef = useRef<HTMLDivElement>(null);
   useToastClearance(barRef);
   const { count, tabTitles } = review.model;
-  const message =
-    count === 0 ? (
-      <span className="text-(--cui-color-text-muted)">
-        {localize('com_config_review_bar_none')}
-      </span>
-    ) : (
-      <>
-        <span className="font-medium">{localize('com_config_review_bar', { count })}</span>
-        {tabTitles.length > 0 && (
-          <span className="hidden text-(--cui-color-text-muted) sm:inline">
-            {' '}
-            · {tabTitles.join(', ')}
-          </span>
-        )}
-      </>
-    );
+  /** The count is a status message (WCAG 4.1.3): screen readers hear it change without moving to the bar. */
+  const message = (
+    <span role="status" aria-live="polite" aria-atomic="true">
+      {count === 0 ? (
+        <span className="text-(--cui-color-text-muted)">
+          {localize('com_config_review_bar_none')}
+        </span>
+      ) : (
+        <>
+          <span className="font-medium">{localize('com_config_review_bar', { count })}</span>
+          {tabTitles.length > 0 && (
+            <span className="hidden text-(--cui-color-text-muted) sm:inline">
+              {' '}
+              · {tabTitles.join(', ')}
+            </span>
+          )}
+        </>
+      )}
+    </span>
+  );
   return (
     <div ref={barRef} className="shrink-0">
       <StickyActionBar
@@ -41,7 +48,10 @@ function ShownChangesBar({ review }: t.ChangesBarProps) {
         message={message}
         discardLabel={localize('com_config_discard')}
         saveLabel={localize('com_config_review_bar_review')}
-        onDiscard={review.discardAll}
+        onDiscard={() => {
+          onDiscard();
+          review.discardAll();
+        }}
         onSave={review.openReview}
       />
     </div>
diff --git a/src/components/configuration/sections/LangfuseRenderer.tsx b/src/components/configuration/sections/LangfuseRenderer.tsx
index ad9ea275..bed01c4f 100644
--- a/src/components/configuration/sections/LangfuseRenderer.tsx
+++ b/src/components/configuration/sections/LangfuseRenderer.tsx
@@ -25,6 +25,65 @@ function maskPublicKey(publicKey: string): string {
   return `${trimmed.slice(0, 6)}...${trimmed.slice(-4)}`;
 }
 
+/**
+ * One Langfuse key. A stored key shows its masked value as a button named by
+ * the key's label and that value ("Public key pk-lf-...cdef", WCAG 2.5.3);
+ * pressing it swaps in a text field labelled by the key's name.
+ */
+function KeyField({
+  id,
+  label,
+  preview,
+  autoFocus,
+  value,
+  placeholder,
+  disabled,
+  onEdit,
+  onChange,
+}: t.LangfuseKeyFieldProps) {
+  const localize = useLocalize();
+  if (preview === undefined) {
+    return (
+      <TextField
+        id={id}
+        name={id}
+        label={label}
+        autoFocus={autoFocus}
+        autoComplete="off"
+        data-lpignore="true"
+        data-1p-ignore="true"
+        data-bwignore="true"
+        data-form-type="other"
+        value={value}
+        disabled={disabled}
+        placeholder={placeholder}
+        onChange={onChange}
+      />
+    );
+  }
+  const labelId = `${id}-label`;
+  const previewId = `${id}-preview`;
+  return (
+    <div className="flex flex-col gap-1.5">
+      <span id={labelId} className="text-sm font-medium">
+        {label}
+      </span>
+      <button
+        type="button"
+        className="rounded-md border border-(--cui-color-stroke-default) px-3 py-2 text-left hover:border-(--cui-color-stroke-intense) focus-visible:outline-2 focus-visible:outline-(--cui-color-stroke-intense)"
+        disabled={disabled}
+        onClick={onEdit}
+        aria-labelledby={`${labelId} ${previewId}`}
+        title={localize('com_ui_edit')}
+      >
+        <code id={previewId} className="text-sm">
+          {preview}
+        </code>
+      </button>
+    </div>
+  );
+}
+
 function getVerificationLabel(
   state: VerificationState,
   message: string,
@@ -345,79 +404,41 @@ export function LangfuseRenderer({ disabled, isEditingScope }: t.FieldRendererPr
         ))}
       </Select>
 
-      <div className="flex flex-col gap-1.5">
-        <span className="text-sm font-medium">{localize('com_config_langfuse_public_key')}</span>
-        {configured && !editingPublicKey ? (
-          <button
-            type="button"
-            className="rounded-md border border-(--cui-color-stroke-default) px-3 py-2 text-left hover:border-(--cui-color-stroke-emphasis) focus-visible:outline-2 focus-visible:outline-(--cui-color-stroke-emphasis)"
-            disabled={disabled || busy}
-            onClick={() => {
-              hasDraftRef.current = true;
-              setEditingPublicKey(true);
-            }}
-            aria-label={`${localize('com_ui_edit')} ${localize('com_config_langfuse_public_key')}`}
-          >
-            <code className="text-sm">{maskPublicKey(publicKey)}</code>
-          </button>
-        ) : (
-          <TextField
-            id="langfuse-public-token"
-            name="langfuse-public-token"
-            label=""
-            autoFocus={editingPublicKey}
-            autoComplete="off"
-            data-lpignore="true"
-            data-1p-ignore="true"
-            data-bwignore="true"
-            data-form-type="other"
-            value={publicKey}
-            disabled={disabled || busy}
-            placeholder="pk-lf-..."
-            onChange={(value) => {
-              setPublicKey(value);
-              markDraftUnverified();
-            }}
-          />
-        )}
-      </div>
+      <KeyField
+        id="langfuse-public-token"
+        label={localize('com_config_langfuse_public_key')}
+        preview={configured && !editingPublicKey ? maskPublicKey(publicKey) : undefined}
+        autoFocus={editingPublicKey}
+        value={publicKey}
+        placeholder="pk-lf-..."
+        disabled={disabled || busy}
+        onEdit={() => {
+          hasDraftRef.current = true;
+          setEditingPublicKey(true);
+        }}
+        onChange={(value) => {
+          setPublicKey(value);
+          markDraftUnverified();
+        }}
+      />
 
-      <div className="flex flex-col gap-1.5">
-        <span className="text-sm font-medium">{localize('com_config_langfuse_secret_key')}</span>
-        {configured && !editingSecretKey ? (
-          <button
-            type="button"
-            className="rounded-md border border-(--cui-color-stroke-default) px-3 py-2 text-left hover:border-(--cui-color-stroke-emphasis) focus-visible:outline-2 focus-visible:outline-(--cui-color-stroke-emphasis)"
-            disabled={disabled || busy}
-            onClick={() => {
-              hasDraftRef.current = true;
-              setEditingSecretKey(true);
-            }}
-            aria-label={`${localize('com_ui_edit')} ${localize('com_config_langfuse_secret_key')}`}
-          >
-            <code className="text-sm">{status?.secretKeyPreview}</code>
-          </button>
-        ) : (
-          <TextField
-            id="langfuse-private-token"
-            name="langfuse-private-token"
-            label=""
-            autoFocus={editingSecretKey}
-            autoComplete="off"
-            data-lpignore="true"
-            data-1p-ignore="true"
-            data-bwignore="true"
-            data-form-type="other"
-            value={secretKey}
-            disabled={disabled || busy}
-            placeholder="sk-lf-..."
-            onChange={(value) => {
-              setSecretKey(value);
-              markDraftUnverified();
-            }}
-          />
-        )}
-      </div>
+      <KeyField
+        id="langfuse-private-token"
+        label={localize('com_config_langfuse_secret_key')}
+        preview={configured && !editingSecretKey ? (status?.secretKeyPreview ?? '') : undefined}
+        autoFocus={editingSecretKey}
+        value={secretKey}
+        placeholder="sk-lf-..."
+        disabled={disabled || busy}
+        onEdit={() => {
+          hasDraftRef.current = true;
+          setEditingSecretKey(true);
+        }}
+        onChange={(value) => {
+          setSecretKey(value);
+          markDraftUnverified();
+        }}
+      />
 
       <div className="flex min-h-9 items-center justify-end gap-2">
         {isEditing ? (
diff --git a/src/components/configuration/sections/__tests__/LangfuseRenderer.test.tsx b/src/components/configuration/sections/__tests__/LangfuseRenderer.test.tsx
index 4c7ac8de..0b41efc1 100644
--- a/src/components/configuration/sections/__tests__/LangfuseRenderer.test.tsx
+++ b/src/components/configuration/sections/__tests__/LangfuseRenderer.test.tsx
@@ -11,8 +11,17 @@ import {
 } from '@/server';
 import { LangfuseRenderer } from '../LangfuseRenderer';
 
+/** The labels the key tests read by their English text; every other key renders as its id. */
+const { LABELS } = vi.hoisted(() => ({
+  LABELS: {
+    com_config_langfuse_public_key: 'Public key',
+    com_config_langfuse_secret_key: 'Secret key',
+    com_ui_edit: 'Edit',
+  } as Readonly<Record<string, string>>,
+}));
+
 vi.mock('@/hooks', () => ({
-  useLocalize: () => (key: string) => key,
+  useLocalize: () => (key: string) => LABELS[key] ?? key,
 }));
 
 vi.mock('@/utils', () => ({
@@ -29,6 +38,7 @@ vi.mock('@/server', () => ({
 }));
 
 interface TextFieldProps {
+  id?: string;
   label?: string;
   value?: string;
   placeholder?: string;
@@ -79,14 +89,17 @@ vi.mock('@clickhouse/click-ui', () => ({
       ),
     },
   ),
-  TextField: ({ label, value, placeholder, disabled, onChange }: TextFieldProps) => (
-    <input
-      aria-label={label || placeholder}
-      value={value ?? ''}
-      placeholder={placeholder}
-      disabled={disabled}
-      onChange={(event) => onChange?.(event.target.value)}
-    />
+  TextField: ({ id, label, value, placeholder, disabled, onChange }: TextFieldProps) => (
+    <>
+      {label && <label htmlFor={id}>{label}</label>}
+      <input
+        id={id}
+        value={value ?? ''}
+        placeholder={placeholder}
+        disabled={disabled}
+        onChange={(event) => onChange?.(event.target.value)}
+      />
+    </>
   ),
   Icon: () => null,
 }));
@@ -191,6 +204,29 @@ describe('LangfuseRenderer', () => {
     expect(await screen.findByText('com_config_langfuse_verified')).toBeVisible();
   });
 
+  it('names each stored key by its label and masked value, and its text field by its label', async () => {
+    await renderVerified({
+      configured: true,
+      enabled: true,
+      destinations,
+      destination: 'eu',
+      publicKey: 'pk-lf-1234567890abcdef',
+      secretKeyPreview: 'sk-lf-...515f',
+    });
+
+    const publicKey = screen.getByRole('button', { name: /^Public key pk-lf-/ });
+    expect(publicKey).toHaveAccessibleName('Public key pk-lf-...cdef');
+    expect(publicKey).toHaveAccessibleDescription('Edit');
+    expect(screen.getByRole('button', { name: 'Secret key sk-lf-...515f' })).toBeVisible();
+
+    fireEvent.click(publicKey);
+    expect(screen.getByRole('textbox', { name: 'Public key' })).toHaveValue(
+      'pk-lf-1234567890abcdef',
+    );
+    fireEvent.click(screen.getByRole('button', { name: /^Secret key sk-lf-/ }));
+    expect(screen.getByRole('textbox', { name: 'Secret key' })).toHaveValue('');
+  });
+
   it('holds the connection controls until the stored connection is verified', async () => {
     let resolveVerification: ((result: { success: boolean }) => void) | undefined;
     mockTest.mockImplementationOnce(
@@ -210,12 +246,8 @@ describe('LangfuseRenderer', () => {
     renderLangfuse();
 
     expect(await screen.findByText('com_config_langfuse_checking')).toBeVisible();
-    const editPublicKey = screen.getByRole('button', {
-      name: 'com_ui_edit com_config_langfuse_public_key',
-    });
-    const editSecretKey = screen.getByRole('button', {
-      name: 'com_ui_edit com_config_langfuse_secret_key',
-    });
+    const editPublicKey = screen.getByRole('button', { name: /^Public key pk-lf-/ });
+    const editSecretKey = screen.getByRole('button', { name: /^Secret key sk-lf-/ });
     const disable = screen.getByRole('button', { name: 'com_config_langfuse_disable' });
     expect(editPublicKey).toBeDisabled();
     expect(editSecretKey).toBeDisabled();
@@ -320,9 +352,7 @@ describe('LangfuseRenderer', () => {
     mockUpdate.mockResolvedValue({ ...configuredStatus, publicKey: 'pk-lf-new' });
     const { queryClient } = await renderVerified(configuredStatus);
 
-    fireEvent.click(
-      screen.getByRole('button', { name: 'com_ui_edit com_config_langfuse_public_key' }),
-    );
+    fireEvent.click(screen.getByRole('button', { name: /^Public key pk-lf-/ }));
     expect(screen.getByRole('button', { name: 'com_ui_cancel' })).toBeVisible();
     expect(
       screen.getByRole('button', { name: 'com_config_langfuse_save_and_enable' }),
@@ -360,9 +390,7 @@ describe('LangfuseRenderer', () => {
     };
     const { queryClient } = await renderVerified(configuredStatus);
 
-    fireEvent.click(
-      screen.getByRole('button', { name: 'com_ui_edit com_config_langfuse_public_key' }),
-    );
+    fireEvent.click(screen.getByRole('button', { name: /^Public key pk-lf-/ }));
     fireEvent.change(screen.getByPlaceholderText('pk-lf-...'), {
       target: { value: 'pk-lf-draft' },
     });
@@ -500,9 +528,7 @@ describe('LangfuseRenderer', () => {
     mockUpdate.mockResolvedValue({ ...configuredStatus, enabled: true, publicKey: 'pk-lf-new' });
     await renderVerified(configuredStatus);
 
-    fireEvent.click(
-      screen.getByRole('button', { name: 'com_ui_edit com_config_langfuse_public_key' }),
-    );
+    fireEvent.click(screen.getByRole('button', { name: /^Public key pk-lf-/ }));
     fireEvent.change(screen.getByPlaceholderText('pk-lf-...'), {
       target: { value: 'pk-lf-new' },
     });
@@ -526,9 +552,7 @@ describe('LangfuseRenderer', () => {
     });
     mockTest.mockResolvedValueOnce({ success: false, message: 'invalid keys' });
 
-    fireEvent.click(
-      screen.getByRole('button', { name: 'com_ui_edit com_config_langfuse_public_key' }),
-    );
+    fireEvent.click(screen.getByRole('button', { name: /^Public key pk-lf-/ }));
     fireEvent.change(screen.getByPlaceholderText('pk-lf-...'), {
       target: { value: 'pk-lf-invalid' },
     });
diff --git a/src/components/configuration/sections/endpoints/Chips.tsx b/src/components/configuration/sections/endpoints/Chips.tsx
index 000bb0a5..dbc47b57 100644
--- a/src/components/configuration/sections/endpoints/Chips.tsx
+++ b/src/components/configuration/sections/endpoints/Chips.tsx
@@ -70,7 +70,7 @@ export function FieldChips({
           type="button"
           className="settings-row-action"
           onClick={handleRevert}
-          aria-label={revert.ariaLabel}
+          aria-label={revert.compactAriaLabel}
           title={revert.label}
         >
           <DecorativeIcon name="history" size="xs" />
diff --git a/src/components/configuration/sections/endpoints/Create.tsx b/src/components/configuration/sections/endpoints/Create.tsx
index 2f1e4a15..81c03ed1 100644
--- a/src/components/configuration/sections/endpoints/Create.tsx
+++ b/src/components/configuration/sections/endpoints/Create.tsx
@@ -1,5 +1,6 @@
-import { useMemo, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { Button } from '@clickhouse/click-ui';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type * as t from '@/types';
 import { BLANK_ENDPOINT_TEMPLATE, ENDPOINT_TEMPLATES } from '@/constants';
 import {
@@ -10,7 +11,14 @@ import {
   useConfigFeatures,
 } from '@/hooks';
 import { ConfigValuesContext } from '@/contexts/ConfigValuesContext';
-import { isConfigRecord, isConfigValueEqual } from '@/utils';
+import {
+  firstControl,
+  restoreFocus,
+  firstFormField,
+  isConfigRecord,
+  commitFocusedField,
+  isConfigValueEqual,
+} from '@/utils';
 import { hasBlockingIssue, validateEndpoint } from './model';
 import { DiscardConfirm } from '@/components/shared';
 import { sourceLabel } from '../../values';
@@ -95,6 +103,29 @@ export function EndpointCreator({
   /** What Discard does once confirmed: close the drawer, or go back to the templates. */
   const [discardAction, setDiscardAction] = useState<'close' | 'back'>('close');
   const prompt = useDiscardPrompt();
+  const pickerRef = useRef<HTMLDivElement>(null);
+  const draftRef = useRef(draft);
+  const shownTemplate = useRef(template);
+
+  useLayoutEffect(() => {
+    draftRef.current = draft;
+  }, [draft]);
+
+  /**
+   * Picking a template swaps the picker for the form, and Back the form for
+   * the picker, taking the focused button with it: focus goes to the new
+   * view's first field or template.
+   */
+  useEffect(() => {
+    const was = shownTemplate.current;
+    shownTemplate.current = template;
+    if (!open || (was == null) === (template == null)) return;
+    const view = template ? prompt.formRef.current : pickerRef.current;
+    restoreFocus(
+      [template ? firstFormField(view) : firstControl(view)],
+      view?.closest('[role="dialog"]'),
+    );
+  }, [open, template, prompt.formRef]);
 
   const reset = () => {
     setTemplate(null);
@@ -148,10 +179,17 @@ export function EndpointCreator({
   const name = typeof entry.name === 'string' ? entry.name : '';
   const inherited = scope != null && inheritedNames.includes(name) ? name : null;
   const blocked = hasBlockingIssue(issues) || inherited != null;
-  const isDirty = template != null && !isConfigValueEqual(draft, template.entry);
+  /**
+   * Whether closing would lose anything: the draft differs from its template,
+   * counting what is typed in the focused field but not committed yet.
+   */
+  const isDirty = (): boolean => {
+    flushSync(() => commitFocusedField(prompt.formRef.current));
+    return template != null && !isConfigValueEqual(draftRef.current, template.entry);
+  };
 
   const requestClose = () => {
-    if (!isDirty) {
+    if (!isDirty()) {
       close();
       return;
     }
@@ -196,7 +234,7 @@ export function EndpointCreator({
             iconLeft="arrow-left"
             label={localize('com_config_ce_back')}
             onClick={() => {
-              if (!isDirty) {
+              if (!isDirty()) {
                 reset();
                 return;
               }
@@ -302,7 +340,9 @@ export function EndpointCreator({
           <button type="submit" hidden aria-hidden="true" tabIndex={-1} />
         </form>
       ) : (
-        <TemplatePicker onPick={start} />
+        <div ref={pickerRef}>
+          <TemplatePicker onPick={start} />
+        </div>
       )}
     </EndpointDrawer>
   );
diff --git a/src/components/configuration/sections/endpoints/__tests__/CustomEndpointsRenderer.test.tsx b/src/components/configuration/sections/endpoints/__tests__/CustomEndpointsRenderer.test.tsx
index c528c811..b3bfd9fa 100644
--- a/src/components/configuration/sections/endpoints/__tests__/CustomEndpointsRenderer.test.tsx
+++ b/src/components/configuration/sections/endpoints/__tests__/CustomEndpointsRenderer.test.tsx
@@ -485,6 +485,34 @@ describe('CustomEndpointsRenderer', () => {
     expect(row('Claude')).toBeInTheDocument();
   });
 
+  it('puts focus on the Name field once a template is picked, and on a template after Back', () => {
+    render(<Harness layers={baseLayers()} />);
+    fireEvent.click(screen.getByRole('button', { name: 'com_config_create_endpoint' }));
+    const blank = screen.getByRole('button', { name: /com_config_ce_template_blank_name/ });
+    blank.focus();
+    fireEvent.click(blank);
+    expect(document.getElementById('endpoints-custom-9999-name')).toHaveFocus();
+
+    const back = screen.getByRole('button', { name: 'com_config_ce_back' });
+    back.focus();
+    fireEvent.click(back);
+    expect(screen.getByRole('button', { name: /com_config_ce_template_blank_name/ })).toHaveFocus();
+  });
+
+  it('asks before Escape discards a name typed but not yet committed', () => {
+    render(<Harness layers={baseLayers()} />);
+    fireEvent.click(screen.getByRole('button', { name: 'com_config_create_endpoint' }));
+    fireEvent.click(screen.getByRole('button', { name: /com_config_ce_template_blank_name/ }));
+    const name = document.getElementById('endpoints-custom-9999-name');
+    if (!name) throw new Error('no name field');
+    name.focus();
+    fireEvent.change(name, { target: { value: 'Draft endpoint' } });
+    fireEvent.keyDown(name, { key: 'Escape' });
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('com_config_ce_discard_confirm')).toBeVisible();
+    expect(name).toHaveValue('Draft endpoint');
+  });
+
   it('keeps Create disabled until the endpoint can be served, then adds it', async () => {
     vi.useFakeTimers();
     try {
@@ -805,7 +833,7 @@ describe('CustomEndpointsRenderer — hiding inherited endpoints by key (keyedTo
       );
       const drawer = openRow('Claude');
       const reverts = within(drawer).getAllByRole('button', {
-        name: /com_config_values_revert_inherited_aria/,
+        name: /com_config_values_revert_inherited_compact/,
       });
       expect(reverts).toHaveLength(1);
       fireEvent.click(reverts[0]);
diff --git a/src/components/configuration/sections/features/__tests__/Memory.test.tsx b/src/components/configuration/sections/features/__tests__/Memory.test.tsx
index b9304168..611660ca 100644
--- a/src/components/configuration/sections/features/__tests__/Memory.test.tsx
+++ b/src/components/configuration/sections/features/__tests__/Memory.test.tsx
@@ -201,7 +201,9 @@ describe('MemoryRenderer: memory agent', () => {
     });
     expect(screen.getByLabelText('Provider')).toHaveValue('openAI');
     expect(screen.getByText(/Agent ID from librechat\.yaml is hidden here/)).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: /Revert Agent to its librechat\.yaml/ }));
+    fireEvent.click(
+      screen.getByRole('button', { name: /^Revert to librechat\.yaml \(.*\): Agent$/ }),
+    );
     expect(onResetField).toHaveBeenCalledWith('memory.agent');
   });
 });
diff --git a/src/components/configuration/sections/mcp/Card.tsx b/src/components/configuration/sections/mcp/Card.tsx
index 7d1bf9c9..3c86adcc 100644
--- a/src/components/configuration/sections/mcp/Card.tsx
+++ b/src/components/configuration/sections/mcp/Card.tsx
@@ -5,7 +5,7 @@ import { useExpandableState, useLocalize, useValuesScope } from '@/hooks';
 import { RegionNameContext } from '@/contexts/RegionNameContext';
 import { transportLabelKey, transportOf } from './transport';
 import { sourceLabel } from '../../values';
-import { cn } from '@/utils';
+import { cn, restoreFocus } from '@/utils';
 
 /** Row-menu icons, the same as the custom endpoint rows'. */
 const ACTION_ICONS: Readonly<Record<t.McpServerAction['id'], t.MenuIconName>> = {
@@ -178,7 +178,10 @@ export function McpServerCard({
   const dataPath = `${path}.${serverKey}`;
   const domId = `section-${toDomId(path)}-${encodeURIComponent(serverKey)}`;
   const panelId = `${toDomId(dataPath)}-panel`;
+  const factsId = `${panelId}-facts`;
   const cardRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLButtonElement>(null);
+  const wasRenaming = useRef(renaming);
   const userToggled = useRef(false);
   const [isExpanded, setIsExpanded] = useExpandableState(defaultExpanded, [dataPath]);
   const [hasEverExpanded, setHasEverExpanded] = useState(isExpanded);
@@ -207,6 +210,13 @@ export function McpServerCard({
     };
   }, [setIsExpanded]);
 
+  /** Escape (or Enter on an unchanged name) takes the rename input away: focus goes back to the header. */
+  useEffect(() => {
+    const was = wasRenaming.current;
+    wasRenaming.current = renaming;
+    if (was && !renaming) restoreFocus([headerRef.current]);
+  }, [renaming]);
+
   useEffect(() => {
     if (!badges.isNew || !defaultExpanded) return;
     const card = cardRef.current;
@@ -232,85 +242,94 @@ export function McpServerCard({
     >
       <div
         className={cn(
-          'flex w-full items-start gap-1 rounded-lg pr-2 transition-colors hover:bg-(--cui-color-background-hover)',
-          isExpanded && 'sticky top-0 z-5 rounded-t-lg bg-(--cui-color-background-default)',
+          'w-full rounded-lg transition-colors hover:bg-(--cui-color-background-hover)',
+          renaming
+            ? 'flex items-start gap-1 pr-2'
+            : 'grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-3 gap-y-1 py-2.5 pr-2 pl-3 has-[.row-link:focus-visible]:bg-(--cui-color-background-hover)',
+          isExpanded
+            ? 'sticky top-0 z-5 rounded-t-lg bg-(--cui-color-background-default)'
+            : 'relative',
         )}
       >
         {renaming ? (
           <RenameInput serverKey={serverKey} onCommit={onRenameCommit} onCancel={onRenameCancel} />
         ) : (
-          <button
-            type="button"
-            data-section-id={domId}
-            aria-expanded={isExpanded}
-            aria-controls={panelId}
-            aria-label={title ? `${title} (${serverKey})` : serverKey}
-            aria-describedby={`${panelId}-facts`}
-            onClick={() => {
-              userToggled.current = true;
-              setIsExpanded((prev) => !prev);
-            }}
-            className="flex min-w-0 flex-1 cursor-pointer items-start gap-3 rounded-lg border-none bg-transparent px-3 py-2.5 text-left select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-(--cui-color-outline)"
-          >
+          <>
             <span
               aria-hidden="true"
               className={cn(
-                'flex shrink-0 items-center justify-center pt-0.5 transition-transform duration-200',
+                'flex items-center justify-center pt-0.5 transition-transform duration-200',
                 isExpanded && 'rotate-90',
               )}
             >
               <DecorativeIcon name="chevron-right" size="sm" />
             </span>
-            <span className="flex min-w-0 flex-1 flex-col gap-1">
-              <span className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
-                <span
-                  className="max-w-full truncate text-sm font-medium text-(--cui-color-text-default)"
-                  title={title ?? serverKey}
-                >
-                  {title ?? serverKey}
-                </span>
-                {title && (
+            <button
+              ref={headerRef}
+              type="button"
+              data-section-id={domId}
+              aria-expanded={isExpanded}
+              aria-controls={panelId}
+              aria-describedby={factsId}
+              onClick={() => {
+                userToggled.current = true;
+                setIsExpanded((prev) => !prev);
+              }}
+              className="row-link flex min-w-0 cursor-pointer flex-wrap items-baseline gap-x-2 gap-y-0.5 border-none bg-transparent p-0 text-left select-none after:absolute after:inset-0 after:rounded-lg after:content-[''] focus-visible:after:outline-1 focus-visible:after:-outline-offset-1 focus-visible:after:outline-(--cui-color-outline)"
+            >
+              <span
+                className="max-w-full truncate text-sm font-medium text-(--cui-color-text-default)"
+                title={title ?? serverKey}
+              >
+                {title ?? serverKey}
+              </span>
+              {title && (
+                <>
+                  {' '}
                   <span
                     className="max-w-full truncate font-mono text-xs text-(--cui-color-text-muted)"
                     title={serverKey}
                   >
-                    <span className="sr-only">{localize('com_config_mcp_server_key')} </span>
+                    <span className="sr-only">{localize('com_config_mcp_server_key')}</span>{' '}
                     {serverKey}
                   </span>
-                )}
-                {badges.isNew && (
+                </>
+              )}
+              {badges.isNew && (
+                <>
+                  {' '}
                   <span className="rounded-full bg-(--cui-color-background-muted) px-1.5 py-0.5 text-xs font-semibold text-(--cui-color-text-default) uppercase">
                     {localize('com_config_ctl_entry_new')}
                   </span>
-                )}
+                </>
+              )}
+            </button>
+            {menuItems.length > 0 && (
+              <span className="relative z-1 row-span-2 -mt-0.5">
+                <KebabMenu
+                  items={menuItems}
+                  ariaLabel={localize('com_config_mcp_actions', { name: serverKey })}
+                />
               </span>
+            )}
+            <span
+              id={factsId}
+              className="col-start-2 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"
+            >
+              <SourceChips badges={badges} />
               <span
-                id={`${panelId}-facts`}
-                className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"
+                className="min-w-0 flex-[1_1_12rem] truncate text-xs text-(--cui-color-text-muted)"
+                title={summary ?? undefined}
               >
-                <SourceChips badges={badges} />
-                <span
-                  className="min-w-0 flex-[1_1_12rem] truncate text-xs text-(--cui-color-text-muted)"
-                  title={summary ?? undefined}
-                >
-                  {[
-                    transport ? localize(transportLabelKey(transport)) : null,
-                    isExpanded ? null : summary,
-                  ]
-                    .filter(Boolean)
-                    .join(' · ')}
-                </span>
+                {[
+                  transport ? localize(transportLabelKey(transport)) : null,
+                  isExpanded ? null : summary,
+                ]
+                  .filter(Boolean)
+                  .join(' · ')}
               </span>
             </span>
-          </button>
-        )}
-        {menuItems.length > 0 && !renaming && (
-          <span className="shrink-0 pt-2">
-            <KebabMenu
-              items={menuItems}
-              ariaLabel={localize('com_config_mcp_actions', { name: serverKey })}
-            />
-          </span>
+          </>
         )}
       </div>
       <div
diff --git a/src/components/configuration/sections/mcp/Field.tsx b/src/components/configuration/sections/mcp/Field.tsx
index 56c731fe..6fe47859 100644
--- a/src/components/configuration/sections/mcp/Field.tsx
+++ b/src/components/configuration/sections/mcp/Field.tsx
@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import type { ReactNode } from 'react';
 import type * as t from '@/types';
 import {
+  fieldControl,
   isRowVisible,
   isConfigRecord,
   hasConfigValue,
@@ -9,7 +10,13 @@ import {
   getSecretPreviewValue,
 } from '@/utils';
 import { entryFieldDefault, layerValueBeneath, lowerLayerValue } from '../../renderer/defaults';
-import { useFieldState, useLocalize, useValuesScope, useHasValueLayers } from '@/hooks';
+import {
+  useLocalize,
+  useFieldState,
+  useValuesScope,
+  useHasValueLayers,
+  useRefocusWhenGone,
+} from '@/hooks';
 import { ConfiguredOnlyContext } from '@/contexts/ConfiguredOnlyContext';
 import { fieldMetaFor, resolveControl } from '../../renderer/kinds';
 import { fieldDescription, toFieldId } from '../../renderer/paths';
@@ -161,11 +168,16 @@ function McpFieldRow({
   })();
 
   const canRevert = !owned && !readOnly && state.isOverride && !state.isEdited && revert != null;
+  /** The revert takes its own button away: focus goes to the field it reverted. */
+  const requestRefocus = useRefocusWhenGone(canRevert, [() => fieldControl(fieldId)]);
   const actions = canRevert ? (
     <button
       type="button"
       className="settings-row-action"
-      onClick={() => onChange(field.key, undefined)}
+      onClick={() => {
+        requestRefocus();
+        onChange(field.key, undefined);
+      }}
       aria-label={revert.ariaLabel}
     >
       {revert.label}
diff --git a/src/components/configuration/sections/mcp/__tests__/Card.test.tsx b/src/components/configuration/sections/mcp/__tests__/Card.test.tsx
new file mode 100644
index 00000000..4ef3c91b
--- /dev/null
+++ b/src/components/configuration/sections/mcp/__tests__/Card.test.tsx
@@ -0,0 +1,76 @@
+import '@/locales/i18n';
+import { describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, screen, within } from '@testing-library/react';
+import type * as t from '@/types';
+import { nameWords, nestedControls, visibleText } from '@/test/a11y';
+import { renderTab } from '@/test/page';
+
+vi.mock('@tanstack/react-router', async (importOriginal) =>
+  (await import('@/test/router')).routerless(importOriginal),
+);
+
+/** A server Base adds in the admin panel, with a title beside its key. */
+const OVERRIDES: t.ConfigRecord = {
+  mcpServers: {
+    vault: { type: 'streamable-http', url: 'https://mcp.vault.dev/mcp', title: 'Vault' },
+  },
+};
+
+function card(key: string): HTMLElement {
+  const element = document.querySelector<HTMLElement>(`[data-mcp-server="${key}"]`);
+  if (!element) throw new Error(`no card for ${key}`);
+  return element;
+}
+
+function header(key: string): HTMLElement {
+  const button = card(key).querySelector<HTMLElement>('button[aria-expanded]');
+  if (!button) throw new Error(`no header for ${key}`);
+  return button;
+}
+
+async function nextFrame() {
+  await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
+}
+
+describe('MCP server card header', () => {
+  it('is named by every word it shows, and described by the facts line beside it', () => {
+    renderTab({ tab: 'mcp', overrides: OVERRIDES });
+    const button = header('vault');
+    expect(button).not.toHaveAttribute('aria-label');
+    expect(button).toHaveAccessibleName('Vault Name: vault');
+    const named = new Set(nameWords('Vault Name: vault'));
+    expect(nameWords(visibleText(button)).filter((word) => !named.has(word))).toEqual([]);
+
+    const facts = document.getElementById(button.getAttribute('aria-describedby') ?? '');
+    expect(facts).not.toBeNull();
+    expect(button.contains(facts)).toBe(false);
+    expect(facts).toHaveTextContent('https://mcp.vault.dev/mcp');
+    expect(button).toHaveAccessibleDescription(/https:\/\/mcp\.vault\.dev\/mcp/);
+    expect(nestedControls(card('vault'))).toEqual([]);
+  });
+
+  it('opens and closes the card from its header', () => {
+    renderTab({ tab: 'mcp', overrides: OVERRIDES });
+    const button = header('vault');
+    fireEvent.click(button);
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    fireEvent.click(button);
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('gives focus back to the header when Escape cancels a rename', async () => {
+    renderTab({ tab: 'mcp', overrides: OVERRIDES });
+    const trigger = within(card('vault')).getByRole('button', { name: 'Actions for vault' });
+    fireEvent.keyDown(trigger, { key: 'ArrowDown' });
+    await act(async () => {
+      fireEvent.click(screen.getByRole('menuitem', { name: /^Rename/ }));
+    });
+    await nextFrame();
+    const input = screen.getByRole('textbox', { name: 'Rename vault' });
+    expect(input).toHaveFocus();
+    fireEvent.keyDown(input, { key: 'Escape' });
+    expect(screen.queryByRole('textbox', { name: 'Rename vault' })).toBeNull();
+    await nextFrame();
+    expect(header('vault')).toHaveFocus();
+  });
+});
diff --git a/src/components/configuration/sections/mcp/__tests__/Servers.test.tsx b/src/components/configuration/sections/mcp/__tests__/Servers.test.tsx
index 13570534..9deb9fea 100644
--- a/src/components/configuration/sections/mcp/__tests__/Servers.test.tsx
+++ b/src/components/configuration/sections/mcp/__tests__/Servers.test.tsx
@@ -617,7 +617,9 @@ describe('McpServersRenderer — delete, undo and rename (MCP-12, D9)', () => {
     expect(edits.editedValues).toEqual({});
     await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
     expect(document.activeElement).toBe(
-      within(card('acme')).getByRole('button', { name: 'Acme Docs (acme)' }),
+      within(card('acme')).getByRole('button', {
+        name: /^Acme Docs com_config_mcp_server_key acme/,
+      }),
     );
   });
 
diff --git a/src/components/configuration/values/labels.ts b/src/components/configuration/values/labels.ts
index f32c9816..05e126d3 100644
--- a/src/components/configuration/values/labels.ts
+++ b/src/components/configuration/values/labels.ts
@@ -24,29 +24,39 @@ const SOURCE_KEYS: Readonly<Record<t.ProvenanceSource, string>> = {
   inherited: 'com_config_values_source_inherited',
 };
 
-/** Revert label and accessible-name keys by the layer a field reverts to. */
-const REVERT_KEYS: Readonly<Record<t.ProvenanceSource, { label: string; aria: string }>> = {
-  yaml: { label: 'com_config_values_revert_yaml', aria: 'com_config_values_revert_yaml_aria' },
+const INHERITED_KEYS: t.RevertKeys = {
+  label: 'com_config_values_revert_inherited',
+  aria: 'com_config_values_revert_inherited_aria',
+  compact: 'com_config_values_revert_inherited_compact',
+};
+
+/** Removing an override that falls back to no value at all. */
+const UNSET_KEYS: t.RevertKeys = {
+  label: 'com_config_values_revert_unset',
+  aria: 'com_config_values_revert_unset_aria',
+  compact: 'com_config_values_revert_unset_compact',
+};
+
+/** Revert keys by the layer a field reverts to. */
+const REVERT_KEYS: Readonly<Record<t.ProvenanceSource, t.RevertKeys>> = {
+  yaml: {
+    label: 'com_config_values_revert_yaml',
+    aria: 'com_config_values_revert_yaml_aria',
+    compact: 'com_config_values_revert_yaml_compact',
+  },
   default: {
     label: 'com_config_values_revert_default',
     aria: 'com_config_values_revert_default_aria',
+    compact: 'com_config_values_revert_default_compact',
   },
   runtimeDefault: {
     label: 'com_config_values_revert_runtime',
     aria: 'com_config_values_revert_runtime_aria',
+    compact: 'com_config_values_revert_runtime_compact',
   },
-  inherited: {
-    label: 'com_config_values_revert_inherited',
-    aria: 'com_config_values_revert_inherited_aria',
-  },
-  admin: {
-    label: 'com_config_values_revert_inherited',
-    aria: 'com_config_values_revert_inherited_aria',
-  },
-  scope: {
-    label: 'com_config_values_revert_inherited',
-    aria: 'com_config_values_revert_inherited_aria',
-  },
+  inherited: INHERITED_KEYS,
+  admin: INHERITED_KEYS,
+  scope: INHERITED_KEYS,
 };
 
 function lastSegment(path: string): string {
@@ -228,9 +238,10 @@ export function sourceLabel(
 }
 
 /**
- * Label and accessible name of a field's revert action (EV-4): what removing
+ * Label and accessible names of a field's revert action (EV-4): what removing
  * the edit target's own override falls back to, e.g. "Revert to
- * librechat.yaml (1,000,000)" or "Remove override (inherits On from Base)".
+ * librechat.yaml (1,000,000)" or "Remove override (inherits On)". Each
+ * accessible name starts with the words its control shows (WCAG 2.5.3).
  * Undefined when the field has no override to revert.
  */
 export function getRevertLabels(
@@ -243,15 +254,16 @@ export function getRevertLabels(
   const target = state.revertTarget;
   if (!target) return undefined;
   const value = formatConfigValue(target.value, localize, path);
-  const keys = REVERT_KEYS[target.source];
+  const keys =
+    target.value === undefined && target.source === 'default'
+      ? UNSET_KEYS
+      : REVERT_KEYS[target.source];
   const options = { name, value, scope: scopeSourceLabel(scope, localize) };
-  if (target.value === undefined && target.source === 'default') {
-    return {
-      label: localize('com_config_values_revert_unset'),
-      ariaLabel: localize('com_config_values_revert_unset_aria', options),
-    };
-  }
-  return { label: localize(keys.label, options), ariaLabel: localize(keys.aria, options) };
+  return {
+    label: localize(keys.label, options),
+    ariaLabel: localize(keys.aria, options),
+    compactAriaLabel: localize(keys.compact, options),
+  };
 }
 
 /** Accessible summary of where a value comes from, e.g. "Default 20,000 · librechat.yaml 1,000,000". */
diff --git a/src/components/configuration/values/names.test.tsx b/src/components/configuration/values/names.test.tsx
new file mode 100644
index 00000000..6c30db1f
--- /dev/null
+++ b/src/components/configuration/values/names.test.tsx
@@ -0,0 +1,176 @@
+import { describe, it, expect, vi } from 'vitest';
+import { PrincipalType } from 'librechat-data-provider';
+import { render, screen } from '@testing-library/react';
+import type * as t from '@/types';
+import { baseLayersFixture, scopeLayersFixture, valuesDataFixture } from '@/test/layers';
+import { ConfigValuesProvider } from '@/contexts/ConfigValuesContext';
+import { isLabelInName, nameWords, visibleText } from '@/test/a11y';
+import { FieldChips } from '../sections/endpoints/Chips';
+import { getRevertLabels } from './labels';
+import { ConfigRow } from '../ConfigRow';
+import i18n from '@/locales/i18n';
+
+/**
+ * Every control that shows a label and carries a longer accessible name must
+ * keep the label's words, in order, at the start of that name (WCAG 2.5.3,
+ * label in name), as axe's label-content-name-mismatch checks it.
+ */
+const localize: t.LocalizeFn = (key, options) => i18n.t(key, options ?? {});
+
+const PATH = 'balance.startBalance';
+const ROLE = { principalType: PrincipalType.ROLE, name: 'editor' };
+
+function revertingTo(target: t.RevertTarget): t.FieldState {
+  return {
+    value: 5,
+    effective: 5,
+    source: 'scope',
+    revertTarget: target,
+    isConfigured: true,
+    isOverride: true,
+    isEdited: false,
+    isPendingReset: false,
+    isHidden: false,
+  };
+}
+
+/** Every layer a field's revert can fall back to, and an override that falls back to nothing. */
+const TARGETS: ReadonlyArray<readonly [string, t.RevertTarget]> = [
+  ['librechat.yaml', { value: 1_000_000, source: 'yaml' }],
+  ['the schema default', { value: 20_000, source: 'default' }],
+  ['the LibreChat default', { value: 20_000, source: 'runtimeDefault' }],
+  ['what Base passes down', { value: 1_000_000, source: 'inherited' }],
+  ['a base override', { value: 1_000_000, source: 'admin' }],
+  ['a profile value', { value: 1_000_000, source: 'scope' }],
+  ['no value at all', { value: undefined, source: 'default' }],
+];
+
+describe('isLabelInName (a port of axe-core 4.14 label-content-name-mismatch)', () => {
+  it('compares words, ignoring case, punctuation and parenthesized text', () => {
+    expect(nameWords('Revert to librechat.yaml (1,000,000): Starting credits')).toEqual([
+      'revert',
+      'to',
+      'librechat',
+      'yaml',
+      'starting',
+      'credits',
+    ]);
+    expect(isLabelInName('Go to field', 'Go to field: Credits per refill')).toBe(true);
+    expect(isLabelInName('Remove override (inherits 1,000,000)', 'Remove override: X')).toBe(true);
+  });
+
+  it('fails a name that leaves out a shown word or splits the run', () => {
+    expect(isLabelInName('Go to field', 'Go to Credits per refill')).toBe(false);
+    expect(
+      isLabelInName(
+        'Remove override (inherits 1,000,000)',
+        'Remove the Role: editor override of Starting credits; it inherits 1,000,000 from Base',
+      ),
+    ).toBe(false);
+    expect(isLabelInName('Reset', 'Remove override for Starting credits')).toBe(false);
+  });
+});
+
+describe.each(TARGETS)('revert labels, falling back to %s', (_, target) => {
+  const labels = getRevertLabels(revertingTo(target), 'Starting credits', localize, PATH, ROLE);
+
+  it('names a control that shows the label with the label first, then the field', () => {
+    expect(labels).toBeDefined();
+    expect(isLabelInName(labels?.label ?? '', labels?.ariaLabel ?? '')).toBe(true);
+    expect(labels?.ariaLabel).toContain('Starting credits');
+  });
+
+  it('names a compact "Revert" control starting with "Revert"', () => {
+    expect(isLabelInName(localize('com_config_ce_revert'), labels?.compactAriaLabel ?? '')).toBe(
+      true,
+    );
+    expect(labels?.compactAriaLabel).toContain('Starting credits');
+  });
+});
+
+describe('the change review row actions', () => {
+  it.each([
+    ['com_config_review_go_to', 'com_config_review_go_to_aria'],
+    ['com_config_review_revert', 'com_config_review_revert_aria'],
+  ])('%s is the start of %s', (shown, name) => {
+    const named = localize(name, { label: 'Credits per refill' });
+    expect(isLabelInName(localize(shown), named)).toBe(true);
+    expect(named).toContain('Credits per refill');
+  });
+});
+
+/** The row's own action button (not a state chip's Undo). */
+function rowAction(): HTMLElement {
+  const action = document.querySelector<HTMLElement>('button.settings-row-action');
+  if (!action) throw new Error('no row action');
+  return action;
+}
+
+function expectLabelInName(button: HTMLElement) {
+  const name = button.getAttribute('aria-label') ?? '';
+  expect(name).not.toBe('');
+  expect(isLabelInName(visibleText(button), name)).toBe(true);
+}
+
+describe('ConfigRow reset action', () => {
+  function renderRow(data: t.ConfigValuesData | null, props: Partial<t.ConfigRowProps> = {}) {
+    const row = (
+      <ConfigRow
+        title="Starting credits"
+        fieldId="balance-startBalance"
+        fieldPath={PATH}
+        permissions={{ canView: true, canEdit: true }}
+        onResetField={vi.fn()}
+        {...props}
+      >
+        <input id="balance-startBalance" />
+      </ConfigRow>
+    );
+    return render(data ? <ConfigValuesProvider value={data}>{row}</ConfigValuesProvider> : row);
+  }
+
+  it('names "Remove override (inherits …)" in a profile with the words it shows', () => {
+    renderRow(valuesDataFixture(scopeLayersFixture()));
+    expect(rowAction()).toHaveTextContent(/^Remove override \(inherits/);
+    expectLabelInName(rowAction());
+  });
+
+  it('names "Revert to librechat.yaml (…)" on Base with the words it shows', () => {
+    renderRow(valuesDataFixture(baseLayersFixture()));
+    expect(rowAction()).toHaveTextContent(/^Revert to librechat\.yaml/);
+    expectLabelInName(rowAction());
+  });
+
+  it('names the fallback "Reset" of a previewed change with "Reset"', () => {
+    renderRow(null, { previewChangedPaths: [PATH] });
+    expect(rowAction()).toHaveTextContent('Reset');
+    expectLabelInName(rowAction());
+  });
+
+  it('names the fallback "Reset" of a stored override with "Reset"', () => {
+    renderRow(null, { isDbOverride: true });
+    expect(rowAction()).toHaveTextContent('Reset');
+    expectLabelInName(rowAction());
+  });
+});
+
+describe('endpoint field chips', () => {
+  it('names the compact Revert of a profile override with "Revert"', () => {
+    render(
+      <ConfigValuesProvider value={valuesDataFixture(scopeLayersFixture())}>
+        <FieldChips
+          path={PATH}
+          label="Starting credits"
+          value={777}
+          saved={777}
+          showOverride
+          onChange={vi.fn()}
+        />
+      </ConfigValuesProvider>,
+    );
+    const revert = screen.getByRole('button', { name: /^Revert/ });
+    expect(visibleText(revert)).toBe('Revert');
+    expectLabelInName(revert);
+    expect(revert).toHaveAccessibleName(/Starting credits/);
+  });
+});
diff --git a/src/components/shared/SearchInput.tsx b/src/components/shared/SearchInput.tsx
index 1b133faa..466cf5dd 100644
--- a/src/components/shared/SearchInput.tsx
+++ b/src/components/shared/SearchInput.tsx
@@ -1,6 +1,9 @@
+import { useRef } from 'react';
 import { SearchField } from '@clickhouse/click-ui';
 import type * as t from '@/types';
+import { useClearButtonLabel, useLocalize } from '@/hooks';
 
+/** click-ui's search field, its clear button named in the panel's language. */
 export function SearchInput({
   value,
   onChange,
@@ -8,8 +11,11 @@ export function SearchInput({
   className,
   ariaLabel,
 }: t.SearchInputProps) {
+  const localize = useLocalize();
+  const fieldRef = useRef<HTMLDivElement>(null);
+  useClearButtonLabel(fieldRef, localize('com_ui_clear'));
   return (
-    <div className={`cui-field ${className ?? ''}`} style={{ maxWidth: 400 }}>
+    <div ref={fieldRef} className={`cui-field ${className ?? ''}`} style={{ maxWidth: 400 }}>
       <SearchField
         value={value}
         onChange={onChange}
diff --git a/src/hooks/dialogs.ts b/src/hooks/dialogs.ts
index d2a33a13..b90cbf05 100644
--- a/src/hooks/dialogs.ts
+++ b/src/hooks/dialogs.ts
@@ -1,20 +1,26 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import type * as t from '@/types';
-import { focusOpener, isFocusLost, firstFormField } from '@/utils';
+import { focusOpener, isFocusLost, restoreFocus, firstFormField } from '@/utils';
 
 /** click-ui's dialog close button, named only by its icon ("cross"). */
 const UNNAMED_CLOSE = '[role="dialog"] button:not([aria-label]):has(svg[aria-label="cross"])';
+/** click-ui's toast close button: an icon button, which click-ui names after its icon ("cross"). */
+const TOAST_CLOSE = 'button[aria-label="cross"]';
+/** click-ui's toast list, as the rule in styles.css that keeps it above the unsaved-changes bar finds it. */
+const TOAST_VIEWPORT = 'ol[class*="toast-viewport"]';
+
+const dialogRoots = (): Node[] => [document.body];
+const toastRoots = (): Node[] => [...document.querySelectorAll(TOAST_VIEWPORT)];
 
 /**
- * Names every click-ui dialog's close button `label` ("Close"): click-ui
- * renders it without an accessible name of its own, so screen readers read
- * the icon's name. Dialogs portal into `<body>`, so only its direct children
- * are watched; each new portal is labelled once its content has rendered.
+ * Names each `selector` button `label`: those already rendered, and those
+ * that arrive in what is later added to the `roots` (watched one level
+ * deep), once their content has rendered.
  */
-export function useDialogCloseLabels(label: string): void {
+function useButtonLabels(label: string, selector: string, roots: () => Node[]): void {
   useEffect(() => {
     const labelIn = (root: ParentNode) => {
-      for (const button of root.querySelectorAll<HTMLButtonElement>(UNNAMED_CLOSE)) {
+      for (const button of root.querySelectorAll<HTMLButtonElement>(selector)) {
         button.setAttribute('aria-label', label);
         button.setAttribute('title', label);
       }
@@ -27,9 +33,29 @@ export function useDialogCloseLabels(label: string): void {
         for (const node of added) if (node instanceof HTMLElement) labelIn(node);
       });
     });
-    observer.observe(document.body, { childList: true });
+    for (const root of roots()) observer.observe(root, { childList: true });
     return () => observer.disconnect();
-  }, [label]);
+  }, [label, selector, roots]);
+}
+
+/**
+ * Names every click-ui dialog's close button `label` ("Close"): click-ui
+ * renders it without an accessible name of its own, so screen readers read
+ * the icon's name. Dialogs portal into `<body>`, so only its direct children
+ * are watched; each new portal is labelled once its content has rendered.
+ */
+export function useDialogCloseLabels(label: string): void {
+  useButtonLabels(label, UNNAMED_CLOSE, dialogRoots);
+}
+
+/**
+ * Names every toast's close button `label` ("Close") instead of "cross",
+ * the name click-ui gives it. Toasts render into click-ui's toast list, so
+ * that list is watched: call it in the component that renders click-ui's
+ * provider, whose list has rendered by the time this effect runs.
+ */
+export function useToastCloseLabels(label: string): void {
+  useButtonLabels(label, TOAST_CLOSE, toastRoots);
 }
 
 /**
@@ -106,3 +132,23 @@ export function useDiscardPrompt(): t.DiscardPromptState {
 
   return { confirming, formRef, request, keep, dismiss };
 }
+
+/**
+ * For a control whose action takes it away (Remove override, Discard): call
+ * the returned function when it acts. Once `shown` turns false, which may be
+ * a few renders later, focus that fell to `<body>` goes to the first of
+ * `targets` that takes it (the field, the open tab).
+ */
+export function useRefocusWhenGone(shown: boolean, targets: readonly t.FocusTarget[]): () => void {
+  const requestedRef = useRef(false);
+  const targetsRef = useRef(targets);
+  targetsRef.current = targets;
+  useEffect(() => {
+    if (shown || !requestedRef.current) return;
+    requestedRef.current = false;
+    restoreFocus(targetsRef.current);
+  }, [shown]);
+  return useCallback(() => {
+    requestedRef.current = true;
+  }, []);
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 61682fbe..a7d03256 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -8,8 +8,10 @@ export * from './useCapabilities';
 export * from './useCommandMenu';
 export * from './useDebouncedFilter';
 export * from './useInlineFit';
+export * from './labels';
 export * from './useLocalize';
 export * from './useReorderVoiceover';
 export * from './useSearchIndex';
 export * from './useStripAriaExpanded';
+export * from './title';
 export * from './toasts';
diff --git a/src/hooks/labels.test.tsx b/src/hooks/labels.test.tsx
new file mode 100644
index 00000000..a924d346
--- /dev/null
+++ b/src/hooks/labels.test.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import { ClickUIProvider, createToast } from '@clickhouse/click-ui';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { SearchInput } from '@/components/shared';
+import { useToastCloseLabels } from './dialogs';
+import '@/locales/i18n';
+
+function Toasts() {
+  useToastCloseLabels('Close');
+  return null;
+}
+
+describe('useToastCloseLabels', () => {
+  it('names each toast close button "Close" instead of its icon', async () => {
+    render(
+      <ClickUIProvider theme="light">
+        <Toasts />
+      </ClickUIProvider>,
+    );
+    act(() => createToast({ type: 'default', title: 'Changes discarded' }));
+    expect(await screen.findByText('Changes discarded')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument());
+    expect(screen.queryByRole('button', { name: 'cross' })).toBeNull();
+  });
+});
+
+function Search() {
+  const [value, setValue] = useState('tools');
+  return (
+    <SearchInput value={value} onChange={setValue} placeholder="Search…" ariaLabel="Search tools" />
+  );
+}
+
+describe('useClearButtonLabel', () => {
+  it("names a search field's clear button in the panel's language, each time it comes back", async () => {
+    render(<Search />);
+    fireEvent.click(screen.getByRole('button', { name: 'Clear' }));
+    expect(screen.queryByRole('button', { name: /clear/i })).toBeNull();
+    fireEvent.change(screen.getByRole('textbox', { name: 'Search tools' }), {
+      target: { value: 'mcp' },
+    });
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Clear' })).toBeVisible());
+    expect(screen.queryByRole('button', { name: 'clear input' })).toBeNull();
+  });
+});
diff --git a/src/hooks/labels.ts b/src/hooks/labels.ts
new file mode 100644
index 00000000..6c5f031e
--- /dev/null
+++ b/src/hooks/labels.ts
@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import type { RefObject } from 'react';
+
+/** click-ui's text field clear button, which it names "clear input" whatever the language. */
+const CLEAR_BUTTON = '[data-testid="textfield-clear"]';
+
+/**
+ * Names the clear button of each click-ui text field inside `ref` `label`
+ * (a localized "Clear"). The button comes and goes with the field's text, so
+ * the field is watched for it.
+ */
+export function useClearButtonLabel(ref: RefObject<HTMLElement | null>, label: string): void {
+  useEffect(() => {
+    const root = ref.current;
+    if (!root) return;
+    const labelAll = () => {
+      for (const button of root.querySelectorAll(CLEAR_BUTTON)) {
+        if (button.getAttribute('aria-label') !== label) button.setAttribute('aria-label', label);
+      }
+    };
+    labelAll();
+    const observer = new MutationObserver(labelAll);
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [ref, label]);
+}
diff --git a/src/hooks/title.test.tsx b/src/hooks/title.test.tsx
new file mode 100644
index 00000000..e7eef993
--- /dev/null
+++ b/src/hooks/title.test.tsx
@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useDocumentTitle } from './title';
+import '@/locales/i18n';
+
+describe('useDocumentTitle', () => {
+  it('names the browser tab after the page, then the panel', () => {
+    const { rerender } = renderHook(({ page }) => useDocumentTitle(page), {
+      initialProps: { page: 'Access management' as string | undefined },
+    });
+    expect(document.title).toBe('Access management · LibreChat Admin Panel');
+    rerender({ page: 'System grants' });
+    expect(document.title).toBe('System grants · LibreChat Admin Panel');
+  });
+
+  it('leaves the title to a page that has one when it has none itself', () => {
+    document.title = 'Page not found · LibreChat Admin Panel';
+    renderHook(() => useDocumentTitle(undefined));
+    expect(document.title).toBe('Page not found · LibreChat Admin Panel');
+  });
+});
diff --git a/src/hooks/title.ts b/src/hooks/title.ts
new file mode 100644
index 00000000..2975cecc
--- /dev/null
+++ b/src/hooks/title.ts
@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useLocalize } from './useLocalize';
+
+/**
+ * Names the browser tab after the page, "Access management · LibreChat Admin
+ * Panel" (WCAG 2.4.2), so tabs, history and screen readers tell pages apart.
+ * Without a page title it leaves the title to the page that has one (a
+ * not-found page inside the layout).
+ */
+export function useDocumentTitle(page: string | undefined): void {
+  const localize = useLocalize();
+  const app = localize('com_app_name');
+  useEffect(() => {
+    if (page) document.title = `${page} · ${app}`;
+  }, [page, app]);
+}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 19e1a5af..ac5a35ab 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -480,15 +480,20 @@
   "com_config_values_pending_one": "{{count}} unsaved change",
   "com_config_values_pending_other": "{{count}} unsaved changes",
   "com_config_values_revert_default": "Revert to default ({{value}})",
-  "com_config_values_revert_default_aria": "Revert {{name}} to its default, {{value}}",
+  "com_config_values_revert_default_aria": "Revert to default ({{value}}): {{name}}",
+  "com_config_values_revert_default_compact": "Revert {{name}} to its default, {{value}}",
   "com_config_values_revert_inherited": "Remove override (inherits {{value}})",
-  "com_config_values_revert_inherited_aria": "Remove the {{scope}} override of {{name}}; it inherits {{value}} from Base",
+  "com_config_values_revert_inherited_aria": "Remove override (inherits {{value}} from Base): {{name}}, {{scope}}",
+  "com_config_values_revert_inherited_compact": "Revert: remove the {{scope}} override of {{name}}; it inherits {{value}} from Base",
   "com_config_values_revert_runtime": "Revert to LibreChat default ({{value}})",
-  "com_config_values_revert_runtime_aria": "Revert {{name}} to the LibreChat default, {{value}}",
+  "com_config_values_revert_runtime_aria": "Revert to LibreChat default ({{value}}): {{name}}",
+  "com_config_values_revert_runtime_compact": "Revert {{name}} to the LibreChat default, {{value}}",
   "com_config_values_revert_unset": "Remove override",
-  "com_config_values_revert_unset_aria": "Remove the override of {{name}}",
+  "com_config_values_revert_unset_aria": "Remove override: {{name}}",
+  "com_config_values_revert_unset_compact": "Revert: remove the override of {{name}}",
   "com_config_values_revert_yaml": "Revert to librechat.yaml ({{value}})",
-  "com_config_values_revert_yaml_aria": "Revert {{name}} to its librechat.yaml value, {{value}}",
+  "com_config_values_revert_yaml_aria": "Revert to librechat.yaml ({{value}}): {{name}}",
+  "com_config_values_revert_yaml_compact": "Revert {{name}} to its librechat.yaml value, {{value}}",
   "com_config_values_ignored_override": "Ignored override",
   "com_config_values_ignored_override_desc": "An admin override is stored for this setting, but LibreChat reads it only from librechat.yaml. Remove the override to clean it up.",
   "com_config_values_source_admin": "Admin override",
@@ -556,7 +561,7 @@
   "com_config_review_entries_one": "{{count}} entry: {{names}}",
   "com_config_review_entries_other": "{{count}} entries: {{names}}",
   "com_config_review_go_to": "Go to field",
-  "com_config_review_go_to_aria": "Go to {{label}}",
+  "com_config_review_go_to_aria": "Go to field: {{label}}",
   "com_config_review_hidden": "Hidden",
   "com_config_review_hidden_entry": "Hidden {{noun}}",
   "com_config_review_hidden_specs": "Model specs that use it are hidden too: {{specs}}",
@@ -2975,6 +2980,7 @@
   "com_endpoint_prompt_cache": "Prompt cache",
   "com_endpoint_anthropic_prompt_cache": "Cache stable prompt context (system messages, tools, long inputs) at the API to reduce per-request input tokens on Anthropic models",
   "com_auth_title": "Admin Panel",
+  "com_app_name": "LibreChat Admin Panel",
   "com_auth_email_label": "Email",
   "com_auth_email_placeholder": "admin@example.com",
   "com_auth_password_label": "Password",
@@ -3440,7 +3446,7 @@
   "com_a11y_next_page": "Next page",
   "com_a11y_page_n": "Page {{page}}",
   "com_a11y_rename_entry": "Rename {{name}}",
-  "com_a11y_remove_override": "Remove override for {{name}}",
+  "com_a11y_reset_override": "Reset {{name}}: remove its override",
   "com_a11y_reset_to_default": "Reset {{name}} to default",
   "com_a11y_add_item": "Add {{name}}",
   "com_access_tab_capabilities": "Capabilities",
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 68c3002d..6f657b11 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -13,8 +13,8 @@ import {
 } from '@tanstack/react-router';
 import type { ErrorComponentProps } from '@tanstack/react-router';
 import type * as t from '@/types';
+import { useLocalize, useDocumentTitle, useToastCloseLabels, useDialogCloseLabels } from '@/hooks';
 import { ThemeProvider, useTheme } from '../contexts/ThemeContext';
-import { useLocalize, useDialogCloseLabels } from '@/hooks';
 import appCss from '../styles.css?url';
 import { withBasePath } from '@/utils';
 
@@ -70,7 +70,9 @@ function RootComponent() {
 function ThemedApp() {
   const { resolvedTheme } = useTheme();
   const localize = useLocalize();
-  useDialogCloseLabels(localize('com_ui_close'));
+  const close = localize('com_ui_close');
+  useDialogCloseLabels(close);
+  useToastCloseLabels(close);
   return (
     <ClickUIProvider theme={resolvedTheme}>
       <div className="isolate">
@@ -124,6 +126,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 function RootError({ error }: ErrorComponentProps) {
   if (import.meta.env.DEV) console.error(error);
   const localize = useLocalize();
+  useDocumentTitle(localize('com_error_page_title'));
   return (
     <div
       role="alert"
@@ -164,6 +167,7 @@ function RootError({ error }: ErrorComponentProps) {
 
 function RootNotFound() {
   const localize = useLocalize();
+  useDocumentTitle(localize('com_error_not_found_title'));
   return (
     <div
       role="alert"
diff --git a/src/routes/_app.tsx b/src/routes/_app.tsx
index 24df28e9..eacecb27 100644
--- a/src/routes/_app.tsx
+++ b/src/routes/_app.tsx
@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { createFileRoute, Outlet, useRouter, Link, redirect } from '@tanstack/react-router';
 import type { ErrorComponentProps } from '@tanstack/react-router';
 import type * as t from '@/types';
-import { capabilitiesQueryOptions, useCommandMenu, useLocalize } from '@/hooks';
+import { capabilitiesQueryOptions, useCommandMenu, useDocumentTitle, useLocalize } from '@/hooks';
 import { AccessDenied, PermissionsUnavailable } from '@/components/shared';
 import { SystemCapabilities, hasImpliedCapability } from '@/constants';
 import { ConfigContractProvider } from '@/contexts/ContractContext';
@@ -22,6 +22,11 @@ const ROUTE_TITLE_KEYS: Record<string, string> = {
   '/help': 'com_help_title',
 };
 
+/** Browser tab titles that differ from the header's ("Welcome!" names no page). */
+const DOCUMENT_TITLE_KEYS: Record<string, string> = {
+  '/': 'com_nav_dashboard',
+};
+
 export const Route = createFileRoute('/_app')({
   beforeLoad: async ({ location }) => {
     const result = await verifyAdminTokenFn();
@@ -67,6 +72,12 @@ function AppLayout() {
     return stored !== null ? stored === 'true' : true;
   });
   const pathname = router.state.location.pathname;
+  const matchedKey = Object.keys(ROUTE_TITLE_KEYS).find((route) =>
+    route === '/' ? pathname === '/' : pathname.startsWith(route),
+  );
+  const title = matchedKey ? localize(ROUTE_TITLE_KEYS[matchedKey]) : undefined;
+  const documentTitleKey = matchedKey && DOCUMENT_TITLE_KEYS[matchedKey];
+  useDocumentTitle(documentTitleKey ? localize(documentTitleKey) : title);
 
   const toggleSidebar = () =>
     setSidebarCollapsed((prev) => {
@@ -96,11 +107,6 @@ function AppLayout() {
     return <AccessDenied />;
   }
 
-  const matchedKey = Object.keys(ROUTE_TITLE_KEYS).find((route) =>
-    route === '/' ? pathname === '/' : pathname.startsWith(route),
-  );
-  const title = matchedKey ? localize(ROUTE_TITLE_KEYS[matchedKey]) : undefined;
-
   return (
     <ConfigContractProvider>
       <div className="flex h-screen overflow-hidden">
@@ -134,6 +140,7 @@ function AppPending() {
 function AppError({ error }: ErrorComponentProps) {
   if (import.meta.env.DEV) console.error(error);
   const localize = useLocalize();
+  useDocumentTitle(localize('com_error_page_title'));
   return (
     <div role="alert" className="flex min-h-screen items-center justify-center p-6">
       <div className="flex max-w-sm flex-col items-center gap-4 text-center">
@@ -159,6 +166,7 @@ function AppError({ error }: ErrorComponentProps) {
 
 function AppNotFound() {
   const localize = useLocalize();
+  useDocumentTitle(localize('com_error_not_found_title'));
   return (
     <div role="alert" className="flex min-h-screen items-center justify-center p-6">
       <div className="flex max-w-sm flex-col items-center gap-4 text-center">
diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index c435c36e..bbd9a12b 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@clickhouse/click-ui';
 import { createFileRoute } from '@tanstack/react-router';
+import { useDocumentTitle, useLocalize } from '@/hooks';
 import ThemeSelector from '@/components/ThemeSelector';
 import { AuthCard } from '@/components/AuthCard';
 import { ssoProvidersFn } from '@/server';
@@ -13,7 +14,9 @@ export const Route = createFileRoute('/login')({
 });
 
 function LoginPage() {
+  const localize = useLocalize();
   const { redirect } = Route.useSearch();
+  useDocumentTitle(localize('com_auth_sign_in'));
   const { providers, ssoOnly } = Route.useLoaderData();
 
   return (
diff --git a/src/test/a11y.ts b/src/test/a11y.ts
index 1c469ba3..0b21f8f9 100644
--- a/src/test/a11y.ts
+++ b/src/test/a11y.ts
@@ -21,3 +21,43 @@ export function nestedControls(root: Element): string[] {
     return inner.map((el) => `${describeElement(el)} inside ${describeElement(control)}`);
   });
 }
+
+/** Drops parenthesized text, innermost first, as axe does before comparing a label with a name. */
+function withoutParentheticals(text: string): string {
+  let previous = '';
+  let current = text;
+  while (current !== previous) {
+    previous = current;
+    current = current.replace(/\([^()]*\)/g, '');
+  }
+  return current;
+}
+
+/** The words axe compares: lower case, parenthesized text dropped, punctuation and symbols as spaces. */
+export function nameWords(text: string): string[] {
+  return withoutParentheticals(text.toLowerCase().normalize('NFKD'))
+    .split(/[^\p{L}\p{N}]+/u)
+    .filter(Boolean);
+}
+
+/**
+ * Whether an accessible name holds the text its control shows, as axe-core
+ * 4.14's label-content-name-mismatch checks it (WCAG 2.5.3, label in name):
+ * the visible words must appear as one run of the name's words, in order.
+ */
+export function isLabelInName(visible: string, name: string): boolean {
+  const label = nameWords(visible);
+  if (label.length === 0) return true;
+  const words = nameWords(name);
+  for (let start = 0; start + label.length <= words.length; start++) {
+    if (label.every((word, i) => words[start + i] === word)) return true;
+  }
+  return false;
+}
+
+/** The text an element shows: its text without screen-reader-only or hidden parts. */
+export function visibleText(el: Element): string {
+  const copy = el.cloneNode(true) as Element;
+  copy.querySelectorAll('.sr-only, [hidden]').forEach((node) => node.remove());
+  return copy.textContent ?? '';
+}
diff --git a/src/types/config-ui.ts b/src/types/config-ui.ts
index 427ae150..c1cc72e2 100644
--- a/src/types/config-ui.ts
+++ b/src/types/config-ui.ts
@@ -657,3 +657,18 @@ export interface UnknownSettingsProps {
   value: ConfigValue;
   path: string;
 }
+
+/** Props of one Langfuse connection key (public or secret). */
+export interface LangfuseKeyFieldProps {
+  /** The text field's id (and form name). */
+  id: string;
+  label: string;
+  /** The stored key, masked: shown as a button that opens the key for editing. Undefined while editing. */
+  preview?: string;
+  autoFocus: boolean;
+  value: string;
+  placeholder: string;
+  disabled: boolean;
+  onEdit: () => void;
+  onChange: (value: string) => void;
+}
diff --git a/src/types/review.ts b/src/types/review.ts
index 57cf9176..8e4e3068 100644
--- a/src/types/review.ts
+++ b/src/types/review.ts
@@ -283,6 +283,12 @@ export interface ChangesBarProps {
   review: ChangeReviewState;
 }
 
+/** The unsaved-changes bar while it is shown. */
+export interface ShownChangesBarProps extends ChangesBarProps {
+  /** Called as Discard is pressed, before the edits are dropped. */
+  onDiscard: () => void;
+}
+
 /** Props of the grouped review list (WS7). */
 export interface ReviewListProps extends Omit<ReviewRowViewProps, 'row' | 'leading'> {
   tabs: ReviewTab[];
diff --git a/src/types/shared.ts b/src/types/shared.ts
index 4c54c003..52337219 100644
--- a/src/types/shared.ts
+++ b/src/types/shared.ts
@@ -187,3 +187,6 @@ export interface DiscardPromptState {
 export interface WarningListProps {
   notes: readonly string[];
 }
+
+/** Where lost focus goes: an element, or a lookup run only if the ones before it can't take focus. */
+export type FocusTarget = HTMLElement | null | undefined | (() => HTMLElement | null | undefined);
diff --git a/src/types/shell.ts b/src/types/shell.ts
index 1ef65afe..0a640509 100644
--- a/src/types/shell.ts
+++ b/src/types/shell.ts
@@ -220,7 +220,8 @@ export type ScopeParam =
 export interface RevealOptions {
   /** Where the target lands; `auto` centres a field and puts a section, group or card at the top. */
   align?: 'auto' | 'center' | 'start';
-  focus?: boolean;
+  /** Focus the target's control once it lands; `heading` focuses its section's or card's heading toggle instead. */
+  focus?: boolean | 'heading';
   highlight?: boolean;
   /** Called once with the revealed element, or null when it never appeared. */
   onDone?: (el: HTMLElement | null) => void;
diff --git a/src/types/values.ts b/src/types/values.ts
index 4873349d..0b67039d 100644
--- a/src/types/values.ts
+++ b/src/types/values.ts
@@ -200,10 +200,20 @@ export interface FieldProvenanceProps {
   formatLayer?: (layer: FieldLayer) => string;
 }
 
-/** Label and accessible name of a field's revert action (WS4, EV-4). */
+/** Locale keys of a revert action, by the layer it reverts to (`RevertLabels`' texts). */
+export interface RevertKeys {
+  label: string;
+  aria: string;
+  compact: string;
+}
+
+/** Label and accessible names of a field's revert action (WS4, EV-4). */
 export interface RevertLabels {
   label: string;
+  /** The name of a control that shows `label`, which it starts with. */
   ariaLabel: string;
+  /** The name of a compact control that shows only "Revert" (an endpoint field's chip). */
+  compactAriaLabel: string;
 }
 
 /** The base config payload: every layer the page reads (WS4, EV-1 and EV-7). */
diff --git a/src/utils/focus.ts b/src/utils/focus.ts
index 7e49ada2..865d5962 100644
--- a/src/utils/focus.ts
+++ b/src/utils/focus.ts
@@ -1,7 +1,88 @@
-/** True when nothing holds focus (it fell to `<body>`), so moving it loses nothing. */
-export function isFocusLost(): boolean {
+import type * as t from '@/types';
+
+/**
+ * True when nothing holds focus (it fell to `<body>`), so moving it loses
+ * nothing. With `scope`, also when `scope` itself holds it: a dialog's focus
+ * trap puts focus on the dialog once the control that had it goes away.
+ */
+export function isFocusLost(scope?: Element | null): boolean {
   const active = document.activeElement;
-  return active == null || active === document.body;
+  return active == null || active === document.body || (scope != null && active === scope);
+}
+
+/**
+ * Puts lost focus (`isFocusLost(scope)`) on the first of `targets` that takes
+ * it: where keyboard focus goes once the control that had it removed itself
+ * (Discard, Remove override, a view swapped for another). Focus the user put
+ * somewhere else stays there. Returns whether focus moved.
+ */
+export function restoreFocus(targets: readonly t.FocusTarget[], scope?: Element | null): boolean {
+  if (!isFocusLost(scope)) return false;
+  for (const target of targets) {
+    const el = typeof target === 'function' ? target() : target;
+    if (!el?.isConnected) continue;
+    el.focus();
+    if (document.activeElement === el) return true;
+  }
+  return false;
+}
+
+/** `restoreFocus` on the next frame, once the update the current event started has removed its control. */
+export function restoreFocusLater(targets: readonly t.FocusTarget[], scope?: Element | null): void {
+  requestAnimationFrame(() => restoreFocus(targets, scope));
+}
+
+/** How long `restoreFocusWhenShown` waits for one of its targets to render (a page loading again). */
+const SHOWN_WAIT_MS = 30_000;
+
+/**
+ * `restoreFocus` as soon as one of `targets` has rendered: checked every
+ * frame while focus stays lost, for up to 30 s (Retry loading a page, a
+ * step that loads its controls). Stops once focus is anywhere; returns a
+ * cancel function.
+ */
+export function restoreFocusWhenShown(
+  targets: readonly t.FocusTarget[],
+  scope?: Element | null,
+): () => void {
+  const deadline = Date.now() + SHOWN_WAIT_MS;
+  const check = () => {
+    if (!isFocusLost(scope) || restoreFocus(targets, scope) || Date.now() > deadline) return;
+    frame = requestAnimationFrame(check);
+  };
+  let frame = requestAnimationFrame(check);
+  return () => cancelAnimationFrame(frame);
+}
+
+/**
+ * Commits the field being typed in inside `container` the way leaving it
+ * would (text fields commit on blur), and keeps focus on it: a form deciding
+ * whether closing loses anything must count what was just typed.
+ */
+export function commitFocusedField(container: Element | null): void {
+  const active = document.activeElement;
+  if (!(active instanceof HTMLElement) || !container?.contains(active)) return;
+  active.blur();
+  active.focus({ preventScroll: true });
+}
+
+/** What a settings row's label names: a form control, a switch or a select trigger. */
+const LABELABLE = 'input, textarea, select, button, [role="switch"], [role="combobox"]';
+
+/** A settings row's control: the element its `htmlFor` id names, or the first control inside it. */
+export function fieldControl(id: string | undefined): HTMLElement | null {
+  if (!id) return null;
+  const target = document.getElementById(id);
+  if (!target) return null;
+  return target.matches(LABELABLE) ? target : target.querySelector<HTMLElement>(LABELABLE);
+}
+
+/**
+ * The page's title (the header's `h1`, focusable from script): where focus
+ * goes after a command opens another page, so screen readers announce it.
+ */
+export function pageTitle(): HTMLElement | null {
+  return document.querySelector<HTMLElement>('header h1[tabindex="-1"]');
 }
 
 /**
@@ -31,6 +112,13 @@ export function firstFormField(container: ParentNode | null): HTMLElement | null
   );
 }
 
+const CONTROL = `${FORM_CONTROL}, button:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])`;
+
+/** The first control in `container` that takes focus, in document order. */
+export function firstControl(container: ParentNode | null | undefined): HTMLElement | null {
+  return container?.querySelector<HTMLElement>(CONTROL) ?? null;
+}
+
 /**
  * The configuration page's open tab: where focus goes once a dialog closes
  * after the control that opened it went away (Save or Revert removes its

From 9c92d68c0c893fc0b18b73002dd76aae7693a632 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 29 Oct 2026 06:05:40 -0400
Subject: [PATCH 2/4] =?UTF-8?q?=E2=99=BF=20fix:=20Leave=20Focus=20Where=20?=
 =?UTF-8?q?a=20Rename=20Blur=20Sends=20It,=20Mount=20Status=20Regions=20Be?=
 =?UTF-8?q?fore=20Their=20Messages=20and=20Refocus=20Retry?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 e2e/a11y/config.spec.ts                       |  96 +++++++++++++++-
 e2e/config-shell.spec.ts                      |  61 ++++++++++-
 src/components/SsoError.tsx                   |   8 +-
 src/components/__tests__/SsoError.test.tsx    |  10 ++
 .../configuration/ConfigLoadError.tsx         |  24 +++-
 .../configuration/ConfigTabContent.tsx        |  46 ++++++--
 .../__tests__/ConfigLoadError.test.tsx        | 103 ++++++++++++------
 .../__tests__/ConfigTabContent.test.tsx       |  64 ++++++-----
 .../review/ChangeReview.test.tsx              |  24 +++-
 .../configuration/review/ChangesBar.tsx       |  65 ++++++-----
 .../configuration/sections/mcp/Card.tsx       |  20 +++-
 .../sections/mcp/__tests__/Card.test.tsx      |  89 +++++++++++++--
 src/types/config-ui.ts                        |  15 +++
 13 files changed, 497 insertions(+), 128 deletions(-)

diff --git a/e2e/a11y/config.spec.ts b/e2e/a11y/config.spec.ts
index f449ea3d..67c054e5 100644
--- a/e2e/a11y/config.spec.ts
+++ b/e2e/a11y/config.spec.ts
@@ -386,6 +386,23 @@ async function wcagViolations(page: Page, selector?: string) {
 const unsavedBar = (page: Page) => page.getByRole('region', { name: 'Unsaved changes' });
 const activeTab = (page: Page) => page.locator('[role="tab"][data-state="active"]');
 
+/** Marks the status regions on the page now, so a test can tell a message put into one from a region mounted with it. */
+async function markStatusRegions(page: Page) {
+  await page
+    .locator('[role="status"]')
+    .evaluateAll((regions) =>
+      regions.forEach((region) => region.setAttribute('data-e2e-before', '')),
+    );
+  return page.locator('[role="status"][data-e2e-before]');
+}
+
+/** Waits two frames, so focus a deferred restore would move has moved. */
+async function settleFrames(page: Page) {
+  await page.evaluate(
+    () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))),
+  );
+}
+
 async function reviewAndSave(page: Page) {
   await unsavedBar(page)
     .getByRole('button', { name: /^Review & save$/ })
@@ -501,9 +518,11 @@ test.describe('focus stays on the page when a control takes itself away', () =>
 
   test('Discard in the unsaved-changes bar puts focus on the open tab', async ({ page }) => {
     await openConfigTab(page, 'system');
+    const regions = await markStatusRegions(page);
     const field = page.locator('#balance-refillAmount');
     await field.fill('12345');
     await field.press('Tab');
+    await expect(regions.filter({ hasText: /^1 unsaved change/ })).toHaveCount(1);
     await unsavedBar(page).getByRole('button', { name: 'Discard' }).focus();
     await page.keyboard.press('Enter');
     await expect(unsavedBar(page)).toHaveCount(0);
@@ -529,7 +548,9 @@ test.describe('focus stays on the page when a control takes itself away', () =>
       .toBe(true);
   });
 
-  test('Escape on an MCP server rename puts focus back on its header', async ({ page }) => {
+  test('an MCP server rename gives focus back to its header on Escape or Enter, and leaves it where a click or Tab moved it', async ({
+    page,
+  }) => {
     await openConfigTab(page, 'mcp');
     await page.getByRole('button', { name: 'Create MCP server' }).click();
     const create = page.getByRole('dialog');
@@ -540,18 +561,81 @@ test.describe('focus stays on the page when a control takes itself away', () =>
     await expect(create).toHaveCount(0);
 
     const card = page.locator('[data-mcp-server="e2e-focus"]');
-    await card.getByRole('button', { name: 'Actions for e2e-focus' }).click();
-    await page.getByRole('menuitem', { name: /^Rename/ }).click();
+    const header = card.locator('button[data-section-id]');
     const rename = page.getByRole('textbox', { name: 'Rename e2e-focus' });
-    await expect(rename).toBeFocused();
-    await page.keyboard.press('Escape');
+    const startRename = async () => {
+      await card.getByRole('button', { name: 'Actions for e2e-focus' }).click();
+      await page.getByRole('menuitem', { name: /^Rename/ }).click();
+      await expect(rename).toBeFocused();
+    };
+
+    for (const key of ['Escape', 'Enter']) {
+      await startRename();
+      await page.keyboard.press(key);
+      await expect(rename).toHaveCount(0);
+      await expect(header).toBeFocused();
+    }
+
+    const filter = page.getByRole('textbox', { name: 'Filter this tab…' });
+    await startRename();
+    await filter.click();
+    await expect(rename).toHaveCount(0);
+    await settleFrames(page);
+    await expect(filter).toBeFocused();
+    await page.keyboard.type('e2e');
+    await expect(filter).toHaveValue('e2e');
+    await filter.fill('');
+
+    const other = page
+      .locator('[data-mcp-server]:not([data-mcp-server="e2e-focus"]) button[data-section-id]')
+      .first();
+    await startRename();
+    await other.click();
     await expect(rename).toHaveCount(0);
-    await expect(card.locator('button[data-section-id]')).toBeFocused();
+    await settleFrames(page);
+    await expect(other).toBeFocused();
+
+    await startRename();
+    await page.keyboard.press('Tab');
+    await expect(rename).toHaveCount(0);
+    await settleFrames(page);
+    await expect(header).not.toBeFocused();
+    expect(await page.evaluate(() => document.activeElement === document.body)).toBe(false);
 
     await unsavedBar(page).getByRole('button', { name: 'Discard' }).click();
     await expect(card).toHaveCount(0);
   });
 
+  test("an MCP card's chips and summary show their tooltips and still open and close the card", async ({
+    page,
+  }) => {
+    await openConfigTab(page, 'mcp');
+    const card = page.locator('[data-mcp-server]').first();
+    const header = card.locator('button[data-section-id]');
+    const facts = card.locator(`[id="${await header.getAttribute('aria-describedby')}"]`);
+    const chip = facts.locator('.state-chip').first();
+    await expect(chip).toHaveAttribute('title', /\S/);
+    const hits = await facts.evaluate((line) =>
+      [line.querySelector('.state-chip'), line.querySelector('[title]:not(.state-chip)')].map(
+        (el) => {
+          if (!el) return 'missing';
+          const box = el.getBoundingClientRect();
+          const hit = document.elementFromPoint(box.x + box.width / 2, box.y + box.height / 2);
+          return hit != null && el.contains(hit)
+            ? 'itself'
+            : (hit?.outerHTML.slice(0, 80) ?? 'none');
+        },
+      ),
+    );
+    expect(hits).toEqual(['itself', 'itself']);
+
+    const expanded = await header.getAttribute('aria-expanded');
+    await chip.click();
+    await expect(header).not.toHaveAttribute('aria-expanded', expanded ?? '');
+    await chip.click();
+    await expect(header).toHaveAttribute('aria-expanded', expanded ?? '');
+  });
+
   test('Escape asks before discarding a name typed into a blank endpoint', async ({ page }) => {
     const drawer = await startBlankEndpoint(page);
     const name = drawer.locator('#endpoints-custom-9999-name');
diff --git a/e2e/config-shell.spec.ts b/e2e/config-shell.spec.ts
index 8c18a233..060db39b 100644
--- a/e2e/config-shell.spec.ts
+++ b/e2e/config-shell.spec.ts
@@ -87,6 +87,43 @@ test.describe('Configuration shell: loading and errors', () => {
     await alert.getByRole('button', { name: 'Retry' }).click();
     await expect(page.locator('form[aria-label]')).toBeVisible({ timeout: 30_000 });
   });
+
+  const RETRIES = [
+    { what: 'schema', marker: '"totalFields"', fromSidebar: true },
+    { what: 'base config', marker: 'yamlPaths', fromSidebar: false },
+  ] as const;
+
+  for (const { what, marker, fromSidebar } of RETRIES) {
+    test(`Retry on a failing ${what} gives focus back to Retry if it fails again, then to the open tab once it loads`, async ({
+      page,
+    }) => {
+      await page.route('**/_serverFn/**', failServerFn(marker));
+      if (fromSidebar) {
+        await page.goto('/');
+        await page.locator('aside a[href*="/configuration"]').first().click();
+      } else {
+        await page.goto('/configuration?tab=system');
+      }
+      const alert = page.getByRole('alert').filter({ hasText: "Couldn't load the configuration" });
+      await expect(alert).toBeVisible({ timeout: 30_000 });
+      await alert.evaluate((card) => card.setAttribute('data-e2e-retried', ''));
+      await alert.getByRole('button', { name: 'Retry' }).focus();
+      await page.keyboard.press('Enter');
+
+      const again = page
+        .locator('[role="alert"]:not([data-e2e-retried])')
+        .filter({ hasText: "Couldn't load the configuration" });
+      await expect(again).toBeVisible({ timeout: 30_000 });
+      const retry = again.getByRole('button', { name: 'Retry' });
+      await expect(retry).toBeFocused();
+      await expect(page.locator('header h1')).not.toBeFocused();
+
+      await page.unroute('**/_serverFn/**');
+      await page.keyboard.press('Enter');
+      await expect(page.locator('form[aria-label]')).toBeVisible({ timeout: 30_000 });
+      await expect(page.locator('[role="tab"][data-state="active"]')).toBeFocused();
+    });
+  }
 });
 
 test.describe('Configuration shell: toolbar', () => {
@@ -108,10 +145,22 @@ test.describe('Configuration shell: toolbar', () => {
   test("the filter's clear button is named in the panel's language", async ({ page }) => {
     await openTab(page, 'system');
     const filter = page.getByRole('textbox', { name: 'Filter this tab…' });
+    await page
+      .locator('[role="status"]')
+      .evaluateAll((regions) =>
+        regions.forEach((region) => region.setAttribute('data-e2e-before', '')),
+      );
     await filter.fill('zzzzxx');
     await expect(
-      page.getByRole('status').filter({ hasText: 'No settings on this tab match' }),
+      page
+        .getByText('No settings on this tab match “zzzzxx”')
+        .and(page.locator(':not([role="status"])')),
     ).toBeVisible();
+    await expect(
+      page
+        .locator('[role="status"][data-e2e-before]')
+        .filter({ hasText: 'No settings on this tab match “zzzzxx”' }),
+    ).toHaveCount(1);
     const clear = page.getByRole('button', { name: 'Clear', exact: true });
     await expect(clear).toBeVisible();
     await expect(page.getByRole('button', { name: 'clear input' })).toHaveCount(0);
@@ -365,6 +414,16 @@ test.describe('App shell: page titles', () => {
       await page.goto('/login');
       await expect(page).toHaveTitle(/^Sign in · LibreChat Admin Panel$/);
     });
+
+    test('a failed SSO callback names the browser tab "Authentication failed"', async ({
+      page,
+    }) => {
+      await page.goto(
+        '/auth/openid/callback?error=auth_failed&error_description=Authentication+failed',
+      );
+      await expect(page.getByRole('heading', { name: 'Authentication failed' })).toBeVisible();
+      await expect(page).toHaveTitle(/^Authentication failed · LibreChat Admin Panel$/);
+    });
   });
 });
 
diff --git a/src/components/SsoError.tsx b/src/components/SsoError.tsx
index f43d0d10..c18a3981 100644
--- a/src/components/SsoError.tsx
+++ b/src/components/SsoError.tsx
@@ -1,11 +1,13 @@
 import { Link } from '@tanstack/react-router';
 import type * as t from '@/types';
 import { AUTH_ERROR_KEYS } from '@/constants';
-import { useLocalize } from '@/hooks';
+import { useDocumentTitle, useLocalize } from '@/hooks';
 
 /** An SSO callback's failure: the panel's own wording of `code`, and the way back to sign-in. */
 export function SsoError({ code }: t.SsoErrorProps) {
   const localize = useLocalize();
+  const title = localize('com_auth_sso_error_title');
+  useDocumentTitle(title);
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-(--cui-color-background-default) px-4">
@@ -27,9 +29,7 @@ export function SsoError({ code }: t.SsoErrorProps) {
             <line x1="12" y1="16" x2="12.01" y2="16" />
           </svg>
         </div>
-        <h1 className="text-xl font-semibold text-(--cui-color-title-default)">
-          {localize('com_auth_sso_error_title')}
-        </h1>
+        <h1 className="text-xl font-semibold text-(--cui-color-title-default)">{title}</h1>
         <p className="text-sm text-(--cui-color-text-muted)">{localize(AUTH_ERROR_KEYS[code])}</p>
         <Link
           to="/login"
diff --git a/src/components/__tests__/SsoError.test.tsx b/src/components/__tests__/SsoError.test.tsx
index aeb375da..9c3f1144 100644
--- a/src/components/__tests__/SsoError.test.tsx
+++ b/src/components/__tests__/SsoError.test.tsx
@@ -23,6 +23,16 @@ describe('SsoError', () => {
     ).toBeVisible();
   });
 
+  it('names the browser tab after the page', () => {
+    document.title = 'LibreChat Admin Panel';
+    render(<SsoError code={ssoCallbackError('auth_failed')} />);
+
+    expect(document.title).toBe(
+      `${localizeEn('com_auth_sso_error_title')} · ${localizeEn('com_app_name')}`,
+    );
+    expect(document.title).toBe('Authentication failed · LibreChat Admin Panel');
+  });
+
   it('shows the generic phrase for an unknown error and none of its text', () => {
     const { container } = render(
       <SsoError code={ssoCallbackError('<img src=x onerror=alert(1)>Call +1 555 0100')} />,
diff --git a/src/components/configuration/ConfigLoadError.tsx b/src/components/configuration/ConfigLoadError.tsx
index cd9b3a0a..39d8ae45 100644
--- a/src/components/configuration/ConfigLoadError.tsx
+++ b/src/components/configuration/ConfigLoadError.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { Button, Icon } from '@clickhouse/click-ui';
 import type * as t from '@/types';
-import { activeConfigTab, pageTitle, restoreFocus, restoreFocusWhenShown } from '@/utils';
+import { activeConfigTab, restoreFocus, restoreFocusWhenShown } from '@/utils';
 import { useLocalize } from '@/hooks';
 
 function errorMessage(error: unknown): string | null {
@@ -10,11 +10,24 @@ function errorMessage(error: unknown): string | null {
   return null;
 }
 
+/**
+ * The Retry of a load error card shown again after a retry failed: the route
+ * and the page both mount a new card in place of the one that retried.
+ */
+function retryShownAgain(): HTMLElement | null {
+  return document.querySelector<HTMLElement>('[data-config-load-error] button:not([disabled])');
+}
+
+/** The open tab once the page has loaded: none while a skeleton (`aria-busy`) stands in for it. */
+function loadedConfigTab(): HTMLElement | null {
+  return document.querySelector('[aria-busy="true"]') ? null : activeConfigTab();
+}
+
 /**
  * Danger card with Retry, shown in place of the configuration form when its
- * data fails to load. A retry that loads the page takes the card, and the
- * focused Retry with it, away: focus goes to the open tab once the page shows
- * it. A retry that fails again gives focus back to Retry.
+ * data fails to load. A retry takes the card, and the focused Retry with it,
+ * away while it loads: focus goes to the open tab once the page has loaded,
+ * or to the Retry of the card shown again if it failed again.
  */
 export function ConfigLoadError({
   error,
@@ -39,7 +52,7 @@ export function ConfigLoadError({
 
   useEffect(
     () => () => {
-      if (retriedRef.current) restoreFocusWhenShown([activeConfigTab, pageTitle]);
+      if (retriedRef.current) restoreFocusWhenShown([retryShownAgain, loadedConfigTab]);
     },
     [],
   );
@@ -49,6 +62,7 @@ export function ConfigLoadError({
       <div
         ref={alertRef}
         role="alert"
+        data-config-load-error
         className="flex flex-col gap-3 rounded-lg border border-(--cui-color-stroke-default) bg-(--cui-color-background-default) p-5"
       >
         <div className="flex items-start gap-3">
diff --git a/src/components/configuration/ConfigTabContent.tsx b/src/components/configuration/ConfigTabContent.tsx
index 35cd7ef5..49da3310 100644
--- a/src/components/configuration/ConfigTabContent.tsx
+++ b/src/components/configuration/ConfigTabContent.tsx
@@ -1,6 +1,6 @@
-import { useMemo, useContext } from 'react';
 import { Button } from '@clickhouse/click-ui';
-import type { KeyboardEvent, ReactNode } from 'react';
+import { useMemo, useEffect, useContext } from 'react';
+import type { KeyboardEvent } from 'react';
 import type * as t from '@/types';
 import {
   SECTION_RENDERERS,
@@ -15,11 +15,13 @@ import {
   countSectionOverrides,
   countEntrySectionOverrides,
 } from './counts';
+import { useLocalize, useAnnouncement, useConfigContract } from '@/hooks';
 import { ConfigValuesProvider } from '@/contexts/ConfigValuesContext';
 import { RevealTargetContext } from '@/contexts/RevealTargetContext';
 import { FieldRenderer, SingleFieldRenderer } from './renderer';
 import { RowFilterContext } from '@/contexts/RowFilterContext';
 import { deriveFieldValue, isSectionDisabled } from '@/utils';
+import { ScreenReaderAnnouncer } from '@/components/shared';
 import { SECTION_META, isPathInSection } from './configMeta';
 import { ReadOnlySection } from './ReadOnlySection';
 import { UnknownSettings } from './UnknownSettings';
@@ -27,7 +29,6 @@ import { ConfigSection } from './ConfigSection';
 import { CodeField } from './fields/CodeField';
 import { InfoBanner } from './InfoBanner';
 import { ScopeGate } from './ScopeGate';
-import { useLocalize, useConfigContract } from '@/hooks';
 import { getWriteRules } from '@/constants';
 
 /**
@@ -47,19 +48,37 @@ function isSimpleScalar(f: t.SchemaField): boolean {
   return !f.children?.length && f.type !== 'record' && f.type !== 'object';
 }
 
-/** Why the tab shows no settings (a filter, "Set values only"): a status message screen readers hear (WCAG 4.1.3). */
-function EmptyTabState({ message, action }: { message: string; action?: ReactNode }) {
+/** Why the tab shows no settings (a filter, "Set values only"), also put in the tab's status region. */
+function EmptyTabState({ message, action, onShown }: t.EmptyTabStateProps) {
+  useEffect(() => {
+    onShown(message);
+    return () => onShown('');
+  }, [message, onShown]);
   return (
     <div className="flex flex-col items-center justify-center gap-3 py-16 text-(--cui-color-text-muted)">
-      <span role="status" className="text-sm">
-        {message}
-      </span>
+      <span className="text-sm">{message}</span>
       {action}
     </div>
   );
 }
 
-export function ConfigTabContent({
+/**
+ * The open tab's settings. Why it shows none (a filter that matches nothing,
+ * "Set values only") is a status message (WCAG 4.1.3) from a region that
+ * stays mounted while the settings come and go, so screen readers hear it
+ * arrive.
+ */
+export function ConfigTabContent(props: t.ConfigTabContentProps) {
+  const { message, announce } = useAnnouncement();
+  return (
+    <>
+      <ScreenReaderAnnouncer message={message} />
+      <TabSettings {...props} onEmptyState={announce} />
+    </>
+  );
+}
+
+function TabSettings({
   sections,
   configValues,
   editedValues,
@@ -96,7 +115,8 @@ export function ConfigTabContent({
   filterText,
   onClearFilter,
   onShowAll,
-}: t.ConfigTabContentProps) {
+  onEmptyState,
+}: t.TabSettingsProps) {
   const localize = useLocalize();
   const revealTarget = useContext(RevealTargetContext);
   const fieldsDisabled = readOnly;
@@ -213,13 +233,16 @@ export function ConfigTabContent({
   }
 
   if (visibleSections.length === 0 && filtering) {
-    return <EmptyTabState message={localize('com_scope_no_changed_in_tab')} />;
+    return (
+      <EmptyTabState message={localize('com_scope_no_changed_in_tab')} onShown={onEmptyState} />
+    );
   }
 
   if (visibleSections.length === 0 && visibleSectionIds) {
     return (
       <EmptyTabState
         message={localize('com_config_shell_filter_empty', { query: filterText ?? '' })}
+        onShown={onEmptyState}
         action={
           onClearFilter && (
             <Button
@@ -238,6 +261,7 @@ export function ConfigTabContent({
     return (
       <EmptyTabState
         message={localize('com_config_shell_nothing_customized')}
+        onShown={onEmptyState}
         action={
           onShowAll && (
             <Button
diff --git a/src/components/configuration/__tests__/ConfigLoadError.test.tsx b/src/components/configuration/__tests__/ConfigLoadError.test.tsx
index 0a7ecf76..f144e096 100644
--- a/src/components/configuration/__tests__/ConfigLoadError.test.tsx
+++ b/src/components/configuration/__tests__/ConfigLoadError.test.tsx
@@ -8,42 +8,83 @@ async function nextFrame() {
   await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
 }
 
-/** The configuration page: an error card until Retry loads it, then the tabs once they render. */
-function Page() {
-  const [state, setState] = useState<'error' | 'loading' | 'ready'>('error');
-  if (state === 'error') {
-    return <ConfigLoadError error={new Error('boom')} onRetry={() => setState('loading')} />;
-  }
-  if (state === 'loading') {
-    return (
-      <button type="button" onClick={() => setState('ready')}>
-        Finish loading
-      </button>
-    );
-  }
+type LoadState = 'error' | 'loading' | 'ready';
+
+/**
+ * The configuration page in the app layout: the header's title is always
+ * there. A retry swaps the error card for a skeleton (`aria-busy`) until it
+ * ends with the page, or with a new error card in its place (the route and
+ * the page both mount a new one). With `tabsWhileLoading`, the tab bar shows
+ * around the card and the skeleton, as the page's own load errors have it.
+ */
+function Page({ tabsWhileLoading = false }: { tabsWhileLoading?: boolean }) {
+  const [state, setState] = useState<LoadState>('error');
+  const [attempt, setAttempt] = useState(0);
+  const retry = () => {
+    setAttempt((n) => n + 1);
+    setState('loading');
+  };
   return (
-    <div role="tablist">
-      <button type="button" role="tab" data-state="active">
-        Providers
-      </button>
-    </div>
+    <>
+      <header>
+        <h1 tabIndex={-1}>Configuration</h1>
+      </header>
+      {(tabsWhileLoading || state === 'ready') && (
+        <div role="tablist">
+          <button type="button" role="tab" data-state="active">
+            Providers
+          </button>
+        </div>
+      )}
+      {state === 'error' && (
+        <ConfigLoadError key={attempt} error={new Error('boom')} onRetry={retry} />
+      )}
+      {state === 'loading' && (
+        <div role="status" aria-busy="true">
+          <button type="button" onClick={() => setState('ready')}>
+            Finish loading
+          </button>
+          <button type="button" onClick={() => setState('error')}>
+            Fail again
+          </button>
+        </div>
+      )}
+    </>
   );
 }
 
-describe('ConfigLoadError', () => {
-  it('puts focus on the open tab once a retry has loaded the page', async () => {
-    render(<Page />);
-    const retry = screen.getByRole('button', { name: 'Retry' });
-    retry.focus();
-    fireEvent.click(retry);
-    expect(screen.queryByRole('alert')).toBeNull();
-    await nextFrame();
-    expect(document.body).toHaveFocus();
+async function retryThen(outcome: 'Finish loading' | 'Fail again') {
+  const retry = screen.getByRole('button', { name: 'Retry' });
+  retry.focus();
+  fireEvent.click(retry);
+  expect(screen.queryByRole('alert')).toBeNull();
+  await nextFrame();
+  expect(document.body).toHaveFocus();
+  act(() => screen.getByRole('button', { name: outcome }).click());
+  await nextFrame();
+  await nextFrame();
+}
 
-    const finish = screen.getByRole('button', { name: 'Finish loading' });
-    act(() => finish.click());
-    await nextFrame();
-    await nextFrame();
+describe('ConfigLoadError', () => {
+  it.each([
+    ['the route', false],
+    ['the page', true],
+  ])('puts focus on the open tab once a retry has loaded %s', async (_where, tabsWhileLoading) => {
+    render(<Page tabsWhileLoading={tabsWhileLoading} />);
+    await retryThen('Finish loading');
     expect(screen.getByRole('tab', { name: 'Providers' })).toHaveFocus();
   });
+
+  it.each([
+    ['the route', false],
+    ['the page', true],
+  ])(
+    'gives focus to the Retry of the card %s shows again when a retry fails again',
+    async (_where, tabsWhileLoading) => {
+      render(<Page tabsWhileLoading={tabsWhileLoading} />);
+      await retryThen('Fail again');
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Retry' })).toHaveFocus();
+    },
+  );
 });
diff --git a/src/components/configuration/__tests__/ConfigTabContent.test.tsx b/src/components/configuration/__tests__/ConfigTabContent.test.tsx
index ef0e495d..6973586d 100644
--- a/src/components/configuration/__tests__/ConfigTabContent.test.tsx
+++ b/src/components/configuration/__tests__/ConfigTabContent.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import type * as t from '@/types';
 import { ConfigTabContent } from '../ConfigTabContent';
 import '@/locales/i18n';
@@ -21,33 +21,47 @@ const SECTIONS: t.ConfigSectionConfig[] = [
   },
 ];
 
+function Tab(props: Partial<t.ConfigTabContentProps>) {
+  return (
+    <ConfigTabContent
+      sections={SECTIONS}
+      configValues={{}}
+      editedValues={{}}
+      onFieldChange={vi.fn()}
+      {...props}
+    />
+  );
+}
+
+async function nextFrame() {
+  await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
+}
+
 describe('ConfigTabContent empty states', () => {
-  it('announces that the filter matches no setting on the tab as a status message', () => {
-    render(
-      <ConfigTabContent
-        sections={SECTIONS}
-        configValues={{}}
-        editedValues={{}}
-        onFieldChange={vi.fn()}
-        visibleSectionIds={new Set()}
-        filterText="zzzzxx"
-        onClearFilter={vi.fn()}
-      />,
-    );
-    expect(screen.getByRole('status')).toHaveTextContent('No settings on this tab match “zzzzxx”');
+  it('announces that the filter matches no setting from a status region that was there before', async () => {
+    const { rerender } = render(<Tab />);
+    const status = screen.getByRole('status');
+    expect(status).toBeEmptyDOMElement();
+
+    rerender(<Tab visibleSectionIds={new Set()} filterText="zzzzxx" onClearFilter={vi.fn()} />);
+    await nextFrame();
+    expect(screen.getByRole('status')).toBe(status);
+    expect(status).toHaveTextContent('No settings on this tab match “zzzzxx”');
     expect(screen.getByRole('button', { name: 'Clear filter' })).toBeVisible();
+
+    rerender(<Tab />);
+    await nextFrame();
+    expect(status).toBeEmptyDOMElement();
   });
 
-  it('announces that "Set values only" leaves nothing on the tab as a status message', () => {
-    render(
-      <ConfigTabContent
-        sections={SECTIONS}
-        configValues={{}}
-        editedValues={{}}
-        onFieldChange={vi.fn()}
-        showConfiguredOnly
-      />,
-    );
-    expect(screen.getByRole('status')).toHaveTextContent('Nothing is set on this tab');
+  it('announces that "Set values only" leaves nothing on the tab from a status region that was there before', async () => {
+    const { rerender } = render(<Tab />);
+    const status = screen.getByRole('status');
+    expect(status).toBeEmptyDOMElement();
+
+    rerender(<Tab showConfiguredOnly />);
+    await nextFrame();
+    expect(screen.getByRole('status')).toBe(status);
+    expect(status).toHaveTextContent('Nothing is set on this tab');
   });
 });
diff --git a/src/components/configuration/review/ChangeReview.test.tsx b/src/components/configuration/review/ChangeReview.test.tsx
index 708f86c5..ab248b86 100644
--- a/src/components/configuration/review/ChangeReview.test.tsx
+++ b/src/components/configuration/review/ChangeReview.test.tsx
@@ -424,13 +424,31 @@ describe('ChangesBar', () => {
     },
   );
 
-  it('announces how many changes are unsaved in a status message, without its buttons', () => {
-    render(<ChangesBar review={reviewFor(saves)} />);
+  it('announces the first unsaved change from a status region that was there before it', async () => {
+    function Page() {
+      const [dirty, setDirty] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setDirty(true)}>
+            Edit
+          </button>
+          <ChangesBar review={reviewFor(saves, { isDirty: dirty })} />
+        </>
+      );
+    }
+    render(<Page />);
     const status = screen.getByRole('status');
-    expect(status).toHaveTextContent(/^1 unsaved change/);
+    expect(status).toBeEmptyDOMElement();
+    expect(screen.queryByRole('region', { name: 'Unsaved changes' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit' }));
+    await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
+    expect(screen.getByRole('status')).toBe(status);
+    expect(status).toHaveTextContent(/^1 unsaved change · System$/);
     expect(within(status).queryByRole('button')).toBeNull();
     const bar = screen.getByRole('region', { name: 'Unsaved changes' });
     expect(within(bar).getByRole('button', { name: 'Discard' })).toBeVisible();
+    expect(within(bar).queryByRole('status')).toBeNull();
   });
 
   it('puts focus on the open tab once Discard takes the bar away', async () => {
diff --git a/src/components/configuration/review/ChangesBar.tsx b/src/components/configuration/review/ChangesBar.tsx
index 307c852e..e07dcdb1 100644
--- a/src/components/configuration/review/ChangesBar.tsx
+++ b/src/components/configuration/review/ChangesBar.tsx
@@ -1,19 +1,36 @@
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import type * as t from '@/types';
-import { useLocalize, useToastClearance, useRefocusWhenGone } from '@/hooks';
-import { StickyActionBar } from '@/components/shared';
+import { useLocalize, useAnnouncement, useToastClearance, useRefocusWhenGone } from '@/hooks';
+import { ScreenReaderAnnouncer, StickyActionBar } from '@/components/shared';
 import { activeConfigTab } from '@/utils';
 
+/** What the bar says: how many changes Save would write, and on which tabs. */
+function summaryOf({ count, tabTitles }: t.ChangeReviewModel, localize: t.LocalizeFn): string {
+  if (count === 0) return localize('com_config_review_bar_none');
+  const counted = localize('com_config_review_bar', { count });
+  return tabTitles.length > 0 ? `${counted} · ${tabTitles.join(', ')}` : counted;
+}
+
 /**
  * The unsaved-changes bar (WS7): how many changes Save would write and on
  * which tabs, with Review and Discard (which offers Undo). Shown on every
  * tab, read-only ones included, while edits are pending. Discard takes the bar
- * away with its own button, so focus goes to the open tab.
+ * away with its own button, so focus goes to the open tab. What the bar says
+ * is a status message (WCAG 4.1.3) from a region that stays mounted while the
+ * bar comes and goes, so screen readers hear the first change too.
  */
 export function ChangesBar({ review }: t.ChangesBarProps) {
+  const localize = useLocalize();
   const requestRefocus = useRefocusWhenGone(review.isDirty, [activeConfigTab]);
-  if (!review.isDirty) return null;
-  return <ShownChangesBar review={review} onDiscard={requestRefocus} />;
+  const { message, announce } = useAnnouncement();
+  const summary = review.isDirty ? summaryOf(review.model, localize) : '';
+  useEffect(() => announce(summary), [announce, summary]);
+  return (
+    <>
+      <ScreenReaderAnnouncer message={message} />
+      {review.isDirty && <ShownChangesBar review={review} onDiscard={requestRefocus} />}
+    </>
+  );
 }
 
 function ShownChangesBar({ review, onDiscard }: t.ShownChangesBarProps) {
@@ -21,26 +38,22 @@ function ShownChangesBar({ review, onDiscard }: t.ShownChangesBarProps) {
   const barRef = useRef<HTMLDivElement>(null);
   useToastClearance(barRef);
   const { count, tabTitles } = review.model;
-  /** The count is a status message (WCAG 4.1.3): screen readers hear it change without moving to the bar. */
-  const message = (
-    <span role="status" aria-live="polite" aria-atomic="true">
-      {count === 0 ? (
-        <span className="text-(--cui-color-text-muted)">
-          {localize('com_config_review_bar_none')}
-        </span>
-      ) : (
-        <>
-          <span className="font-medium">{localize('com_config_review_bar', { count })}</span>
-          {tabTitles.length > 0 && (
-            <span className="hidden text-(--cui-color-text-muted) sm:inline">
-              {' '}
-              · {tabTitles.join(', ')}
-            </span>
-          )}
-        </>
-      )}
-    </span>
-  );
+  const message =
+    count === 0 ? (
+      <span className="text-(--cui-color-text-muted)">
+        {localize('com_config_review_bar_none')}
+      </span>
+    ) : (
+      <>
+        <span className="font-medium">{localize('com_config_review_bar', { count })}</span>
+        {tabTitles.length > 0 && (
+          <span className="hidden text-(--cui-color-text-muted) sm:inline">
+            {' '}
+            · {tabTitles.join(', ')}
+          </span>
+        )}
+      </>
+    );
   return (
     <div ref={barRef} className="shrink-0">
       <StickyActionBar
diff --git a/src/components/configuration/sections/mcp/Card.tsx b/src/components/configuration/sections/mcp/Card.tsx
index 3c86adcc..c32f8703 100644
--- a/src/components/configuration/sections/mcp/Card.tsx
+++ b/src/components/configuration/sections/mcp/Card.tsx
@@ -5,7 +5,7 @@ import { useExpandableState, useLocalize, useValuesScope } from '@/hooks';
 import { RegionNameContext } from '@/contexts/RegionNameContext';
 import { transportLabelKey, transportOf } from './transport';
 import { sourceLabel } from '../../values';
-import { cn, restoreFocus } from '@/utils';
+import { cn, restoreFocusLater } from '@/utils';
 
 /** Row-menu icons, the same as the custom endpoint rows'. */
 const ACTION_ICONS: Readonly<Record<t.McpServerAction['id'], t.MenuIconName>> = {
@@ -210,11 +210,15 @@ export function McpServerCard({
     };
   }, [setIsExpanded]);
 
-  /** Escape (or Enter on an unchanged name) takes the rename input away: focus goes back to the header. */
+  /**
+   * Escape (or Enter on an unchanged name) takes the rename input away: focus
+   * goes back to the header. Checked a frame later, since a blur that ends the
+   * rename (a click or Tab elsewhere) is still moving focus to its target.
+   */
   useEffect(() => {
     const was = wasRenaming.current;
     wasRenaming.current = renaming;
-    if (was && !renaming) restoreFocus([headerRef.current]);
+    if (was && !renaming) restoreFocusLater([() => headerRef.current]);
   }, [renaming]);
 
   useEffect(() => {
@@ -223,6 +227,13 @@ export function McpServerCard({
     requestAnimationFrame(() => card?.scrollIntoView?.({ behavior: 'smooth', block: 'nearest' }));
   }, [badges.isNew, defaultExpanded]);
 
+  /**
+   * The facts line sits above the header's stretched hit area so its chips'
+   * and summary's tooltips show on hover; a click on it still opens or closes
+   * the card, as a click anywhere else on the header does.
+   */
+  const toggleFromFacts = () => headerRef.current?.click();
+
   const menuItems: t.KebabMenuItem[] = actions.map((action) => ({
     label: action.label,
     icon: ACTION_ICONS[action.id],
@@ -314,7 +325,8 @@ export function McpServerCard({
             )}
             <span
               id={factsId}
-              className="col-start-2 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"
+              onClick={toggleFromFacts}
+              className="relative z-1 col-start-2 flex min-w-0 cursor-pointer flex-wrap items-center gap-x-2 gap-y-1 select-none"
             >
               <SourceChips badges={badges} />
               <span
diff --git a/src/components/configuration/sections/mcp/__tests__/Card.test.tsx b/src/components/configuration/sections/mcp/__tests__/Card.test.tsx
index 4ef3c91b..512cfb97 100644
--- a/src/components/configuration/sections/mcp/__tests__/Card.test.tsx
+++ b/src/components/configuration/sections/mcp/__tests__/Card.test.tsx
@@ -16,6 +16,14 @@ const OVERRIDES: t.ConfigRecord = {
   },
 };
 
+/** Two servers, so focus can leave one card's rename for the other card. */
+const TWO_SERVERS: t.ConfigRecord = {
+  mcpServers: {
+    ...(OVERRIDES.mcpServers as t.ConfigRecord),
+    wiki: { type: 'streamable-http', url: 'https://mcp.wiki.dev/mcp' },
+  },
+};
+
 function card(key: string): HTMLElement {
   const element = document.querySelector<HTMLElement>(`[data-mcp-server="${key}"]`);
   if (!element) throw new Error(`no card for ${key}`);
@@ -32,6 +40,30 @@ async function nextFrame() {
   await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
 }
 
+async function startRename(key: string): Promise<HTMLElement> {
+  const trigger = within(card(key)).getByRole('button', { name: `Actions for ${key}` });
+  fireEvent.keyDown(trigger, { key: 'ArrowDown' });
+  await act(async () => {
+    fireEvent.click(screen.getByRole('menuitem', { name: /^Rename/ }));
+  });
+  await nextFrame();
+  const input = screen.getByRole('textbox', { name: `Rename ${key}` });
+  expect(input).toHaveFocus();
+  return input;
+}
+
+/**
+ * Moves focus from `from` to `to` the way a click or Tab does in a browser:
+ * React commits what the blur started, effects included, while focus is
+ * still on its way (a microtask checkpoint follows every event listener),
+ * and the move is dropped if that took focus.
+ */
+async function moveFocus(from: HTMLElement, to: HTMLElement) {
+  act(() => from.blur());
+  if (document.activeElement === document.body) act(() => to.focus());
+  await nextFrame();
+}
+
 describe('MCP server card header', () => {
   it('is named by every word it shows, and described by the facts line beside it', () => {
     renderTab({ tab: 'mcp', overrides: OVERRIDES });
@@ -58,19 +90,52 @@ describe('MCP server card header', () => {
     expect(button).toHaveAttribute('aria-expanded', 'false');
   });
 
-  it('gives focus back to the header when Escape cancels a rename', async () => {
+  it('opens and closes the card from its facts line, which still describes the header', () => {
     renderTab({ tab: 'mcp', overrides: OVERRIDES });
-    const trigger = within(card('vault')).getByRole('button', { name: 'Actions for vault' });
-    fireEvent.keyDown(trigger, { key: 'ArrowDown' });
-    await act(async () => {
-      fireEvent.click(screen.getByRole('menuitem', { name: /^Rename/ }));
-    });
-    await nextFrame();
-    const input = screen.getByRole('textbox', { name: 'Rename vault' });
-    expect(input).toHaveFocus();
-    fireEvent.keyDown(input, { key: 'Escape' });
+    const button = header('vault');
+    const facts = document.getElementById(button.getAttribute('aria-describedby') ?? '');
+    if (!facts) throw new Error('no facts line');
+    const chip = facts.querySelector<HTMLElement>('.state-chip');
+    expect(chip).toHaveAttribute('title');
+    fireEvent.click(facts);
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    fireEvent.click(chip ?? facts);
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+    expect(button).toHaveAccessibleDescription(/https:\/\/mcp\.vault\.dev\/mcp/);
+  });
+
+  it.each(['Escape', 'Enter'])(
+    'gives focus back to the header when %s ends a rename that keeps the name',
+    async (key) => {
+      renderTab({ tab: 'mcp', overrides: OVERRIDES });
+      const input = await startRename('vault');
+      fireEvent.keyDown(input, { key });
+      expect(screen.queryByRole('textbox', { name: 'Rename vault' })).toBeNull();
+      await nextFrame();
+      expect(header('vault')).toHaveFocus();
+    },
+  );
+
+  it("leaves focus on another card's header when a click or Tab there ends a rename", async () => {
+    renderTab({ tab: 'mcp', overrides: TWO_SERVERS });
+    const input = await startRename('vault');
+    await moveFocus(input, header('wiki'));
     expect(screen.queryByRole('textbox', { name: 'Rename vault' })).toBeNull();
-    await nextFrame();
-    expect(header('vault')).toHaveFocus();
+    expect(header('wiki')).toHaveFocus();
+  });
+
+  it('leaves focus on a text field outside the card when a click there ends a rename', async () => {
+    renderTab({ tab: 'mcp', overrides: OVERRIDES });
+    const filter = document.createElement('input');
+    filter.setAttribute('aria-label', 'Filter this tab…');
+    document.body.append(filter);
+    try {
+      const input = await startRename('vault');
+      await moveFocus(input, filter);
+      expect(screen.queryByRole('textbox', { name: 'Rename vault' })).toBeNull();
+      expect(filter).toHaveFocus();
+    } finally {
+      filter.remove();
+    }
   });
 });
diff --git a/src/types/config-ui.ts b/src/types/config-ui.ts
index c1cc72e2..bab664d1 100644
--- a/src/types/config-ui.ts
+++ b/src/types/config-ui.ts
@@ -139,6 +139,21 @@ export interface ConfigTabContentProps {
   onShowAll?: () => void;
 }
 
+/** The open tab's settings, inside `ConfigTabContent` and its status region. */
+export interface TabSettingsProps extends ConfigTabContentProps {
+  /** Puts why the tab shows no settings in the status region ('' once it shows some again). */
+  onEmptyState: (message: string) => void;
+}
+
+/** Why the tab shows no settings (a filter that matches nothing, "Set values only"). */
+export interface EmptyTabStateProps {
+  message: string;
+  /** The way out: Clear filter, Show all. */
+  action?: ReactNode;
+  /** Called with `message` while it shows, and with '' once it goes. */
+  onShown: (message: string) => void;
+}
+
 export interface ConfigTableOfContentsProps {
   /** The tab's entries (`buildTocEntries`), narrowed to the tab filter's matches. */
   entries: TocEntry[];

From acd8bfdf41d5e9aaa87f7437542fc61b68014bc2 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 29 Oct 2026 06:49:26 -0400
Subject: [PATCH 3/4] =?UTF-8?q?=E2=99=BF=20fix:=20Stop=20Retry's=20Focus?=
 =?UTF-8?q?=20Restore=20Once=20the=20Page=20Changes=20and=20Leave=20a=20Fo?=
 =?UTF-8?q?und=20USER=20Profile's=20Starting=20Credits=20Untouched?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 e2e/a11y/config.spec.ts                       | 70 +++++++++++---
 e2e/live.ts                                   |  9 +-
 .../configuration/ConfigLoadError.tsx         |  3 +-
 .../__tests__/ConfigLoadError.test.tsx        | 91 +++++++++++++++++--
 src/utils/focus.ts                            | 10 +-
 5 files changed, 156 insertions(+), 27 deletions(-)

diff --git a/e2e/a11y/config.spec.ts b/e2e/a11y/config.spec.ts
index 67c054e5..710e184f 100644
--- a/e2e/a11y/config.spec.ts
+++ b/e2e/a11y/config.spec.ts
@@ -470,34 +470,75 @@ for (const theme of THEMES) {
   });
 }
 
+/** Starting credits and its row's action: Remove override where the open profile sets its own. */
+function startBalanceRow(page: Page) {
+  const field = page.locator('#balance-startBalance');
+  const action = page
+    .locator('.settings-row', { has: field })
+    .locator('button.settings-row-action');
+  return { field, action };
+}
+
+/** Waits until the USER role's profile is open with its own values loaded. */
+async function expectUserProfileOpen(page: Page) {
+  await expect(page.getByRole('region', { name: 'Profile being edited' })).toContainText(
+    'Role: USER',
+  );
+  await expect(startBalanceRow(page).field).toBeVisible();
+}
+
+/** Removes the USER role profile's own Starting credits, if it has one, and saves. */
+async function removeUserStartBalance(page: Page) {
+  await openConfigTab(page, 'system', 'role:USER');
+  await expectUserProfileOpen(page);
+  const { action } = startBalanceRow(page);
+  if ((await action.count()) === 0) return;
+  await action.click();
+  await reviewAndSave(page);
+}
+
 test.describe('a role profile with an override of its own', () => {
   test.use({ viewport: { width: 1440, height: 900 } });
   test.describe.configure({ timeout: 180_000 });
-  /** Set once the test creates the USER role's profile, so cleanup deletes only its own. */
-  let createdUserProfile = false;
+  /**
+   * What the test saved to the USER role's profile, for cleanup to undo in a
+   * page of its own (a failure can leave the test's page mid-edit): the
+   * profile, when it created it, or Starting credits, on a profile that had
+   * none of its own. A Starting credits the profile already had is never
+   * written: the test uses it as it is and discards its removal.
+   */
+  let saved: 'profile' | 'override' | null = null;
 
   lockUserProfile(async (page) => {
-    if (!createdUserProfile) return;
-    createdUserProfile = false;
-    await deleteUserRoleProfile(page, true);
+    const undo = saved;
+    saved = null;
+    if (undo == null) return;
+    const own = await page.context().newPage();
+    try {
+      if (undo === 'profile') await deleteUserRoleProfile(own, true);
+      else await removeUserStartBalance(own);
+    } finally {
+      await own.close();
+    }
   });
 
   test('has no WCAG violations with its sections open, and Remove override keeps focus on the field', async ({
     page,
   }) => {
     await openConfigTab(page, 'system');
-    createdUserProfile = await selectUserRoleProfile(page);
+    if (await selectUserRoleProfile(page)) saved = 'profile';
     await expect(page).toHaveURL(/scope=role(%3A|:)USER/);
-    const start = page.locator('#balance-startBalance');
-    await start.fill('4321');
-    await start.press('Tab');
-    await reviewAndSave(page);
+    await expectUserProfileOpen(page);
+    const { field: start, action: remove } = startBalanceRow(page);
+    if ((await remove.count()) === 0) {
+      saved ??= 'override';
+      await start.fill('4321');
+      await start.press('Tab');
+      await reviewAndSave(page);
+    }
 
     await hideDevtools(page);
     await expandSections(page);
-    const remove = page
-      .locator('.settings-row', { has: start })
-      .locator('button.settings-row-action');
     await expect(remove).toHaveText(/^Remove override \(inherits /);
     for (const colorScheme of THEMES) {
       await page.emulateMedia({ colorScheme });
@@ -509,7 +550,8 @@ test.describe('a role profile with an override of its own', () => {
     await page.keyboard.press('Enter');
     await expect(remove).toHaveCount(0);
     await expect(start).toBeFocused();
-    await reviewAndSave(page);
+    await unsavedBar(page).getByRole('button', { name: 'Discard' }).click();
+    await expect(remove).toHaveText(/^Remove override \(inherits /);
   });
 });
 
diff --git a/e2e/live.ts b/e2e/live.ts
index 8dfc3a72..da3a369b 100644
--- a/e2e/live.ts
+++ b/e2e/live.ts
@@ -56,9 +56,12 @@ export const THEMES = ['light', 'dark'] as const;
 /** The WCAG 2.0 and 2.1 level A and AA rules the panel's axe scans run. */
 export const WCAG_TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
 
-/** Opens a configuration tab and waits until its form has rendered real fields. */
-export async function openConfigTab(page: Page, tab: string) {
-  await page.goto(`/configuration?tab=${tab}`);
+/**
+ * Opens a configuration tab, in the profile of `scope` (e.g. `role:USER`) if
+ * given, and waits until its form has rendered real fields.
+ */
+export async function openConfigTab(page: Page, tab: string, scope?: string) {
+  await page.goto(`/configuration?tab=${tab}${scope ? `&scope=${scope}` : ''}`);
   const form = page.getByRole('form', { name: 'Configuration' });
   await expect(form).toBeVisible({ timeout: 30_000 });
   await page.waitForLoadState('networkidle');
diff --git a/src/components/configuration/ConfigLoadError.tsx b/src/components/configuration/ConfigLoadError.tsx
index 39d8ae45..2bf259cb 100644
--- a/src/components/configuration/ConfigLoadError.tsx
+++ b/src/components/configuration/ConfigLoadError.tsx
@@ -27,7 +27,8 @@ function loadedConfigTab(): HTMLElement | null {
  * Danger card with Retry, shown in place of the configuration form when its
  * data fails to load. A retry takes the card, and the focused Retry with it,
  * away while it loads: focus goes to the open tab once the page has loaded,
- * or to the Retry of the card shown again if it failed again.
+ * or to the Retry of the card shown again if it failed again, unless the
+ * user has gone to another page by then.
  */
 export function ConfigLoadError({
   error,
diff --git a/src/components/configuration/__tests__/ConfigLoadError.test.tsx b/src/components/configuration/__tests__/ConfigLoadError.test.tsx
index f144e096..2a402d36 100644
--- a/src/components/configuration/__tests__/ConfigLoadError.test.tsx
+++ b/src/components/configuration/__tests__/ConfigLoadError.test.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 import { act, fireEvent, render, screen } from '@testing-library/react';
+import type { ReactElement } from 'react';
 import { ConfigLoadError } from '../ConfigLoadError';
 import '@/locales/i18n';
 
@@ -8,6 +9,11 @@ async function nextFrame() {
   await act(() => new Promise((resolve) => requestAnimationFrame(resolve)));
 }
 
+async function nextFrames() {
+  await nextFrame();
+  await nextFrame();
+}
+
 type LoadState = 'error' | 'loading' | 'ready';
 
 /**
@@ -16,9 +22,16 @@ type LoadState = 'error' | 'loading' | 'ready';
  * ends with the page, or with a new error card in its place (the route and
  * the page both mount a new one). With `tabsWhileLoading`, the tab bar shows
  * around the card and the skeleton, as the page's own load errors have it.
+ * `initial` is how it opens: a page come back to has its data cached.
  */
-function Page({ tabsWhileLoading = false }: { tabsWhileLoading?: boolean }) {
-  const [state, setState] = useState<LoadState>('error');
+function Page({
+  tabsWhileLoading = false,
+  initial = 'error',
+}: {
+  tabsWhileLoading?: boolean;
+  initial?: LoadState;
+}) {
+  const [state, setState] = useState<LoadState>(initial);
   const [attempt, setAttempt] = useState(0);
   const retry = () => {
     setAttempt((n) => n + 1);
@@ -53,19 +66,59 @@ function Page({ tabsWhileLoading = false }: { tabsWhileLoading?: boolean }) {
   );
 }
 
-async function retryThen(outcome: 'Finish loading' | 'Fail again') {
+/** Another page of the app (Access management), with an open tab of its own when `tabs`. */
+function AccessPage({ tabs }: { tabs: boolean }) {
+  return (
+    <>
+      <header>
+        <h1 tabIndex={-1}>Access management</h1>
+      </header>
+      {tabs && (
+        <div role="tablist">
+          <button type="button" role="tab" data-state="active">
+            Roles
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
+
+/**
+ * Renders the configuration page at /configuration. The returned `goTo`
+ * changes the path the way the router does (history) and shows `page` there.
+ */
+function renderApp() {
+  window.history.pushState(null, '', '/configuration');
+  const { rerender } = render(<Page />);
+  return async (path: string, page: ReactElement) => {
+    window.history.pushState(null, '', path);
+    rerender(page);
+    await nextFrames();
+  };
+}
+
+/** Retries from a focused Retry: the card goes away while it loads, and focus falls to `<body>`. */
+async function startRetry() {
   const retry = screen.getByRole('button', { name: 'Retry' });
   retry.focus();
   fireEvent.click(retry);
   expect(screen.queryByRole('alert')).toBeNull();
   await nextFrame();
   expect(document.body).toHaveFocus();
+}
+
+async function retryThen(outcome: 'Finish loading' | 'Fail again') {
+  await startRetry();
   act(() => screen.getByRole('button', { name: outcome }).click());
-  await nextFrame();
-  await nextFrame();
+  await nextFrames();
 }
 
 describe('ConfigLoadError', () => {
+  afterEach(() => {
+    window.history.replaceState(null, '', '/');
+  });
+
   it.each([
     ['the route', false],
     ['the page', true],
@@ -87,4 +140,30 @@ describe('ConfigLoadError', () => {
       expect(screen.getByRole('button', { name: 'Retry' })).toHaveFocus();
     },
   );
+
+  it('still puts focus on the open tab when only the query changes while a retry loads', async () => {
+    renderApp();
+    await startRetry();
+    window.history.replaceState(null, '', '/configuration?tab=providers');
+    act(() => screen.getByRole('button', { name: 'Finish loading' }).click());
+    await nextFrames();
+    expect(screen.getByRole('tab', { name: 'Providers' })).toHaveFocus();
+  });
+
+  it('moves no focus on a page the user goes to while a retry loads', async () => {
+    const goTo = renderApp();
+    await startRetry();
+    await goTo('/access', <AccessPage tabs />);
+    expect(screen.getByRole('tab', { name: 'Roles' })).toBeInTheDocument();
+    expect(document.body).toHaveFocus();
+  });
+
+  it('moves no focus on the configuration page the user comes back to', async () => {
+    const goTo = renderApp();
+    await startRetry();
+    await goTo('/access', <AccessPage tabs={false} />);
+    await goTo('/configuration', <Page initial="ready" />);
+    expect(screen.getByRole('tab', { name: 'Providers' })).toBeInTheDocument();
+    expect(document.body).toHaveFocus();
+  });
 });
diff --git a/src/utils/focus.ts b/src/utils/focus.ts
index 865d5962..bfdaf664 100644
--- a/src/utils/focus.ts
+++ b/src/utils/focus.ts
@@ -38,16 +38,20 @@ const SHOWN_WAIT_MS = 30_000;
 /**
  * `restoreFocus` as soon as one of `targets` has rendered: checked every
  * frame while focus stays lost, for up to 30 s (Retry loading a page, a
- * step that loads its controls). Stops once focus is anywhere; returns a
- * cancel function.
+ * step that loads its controls). Stops once focus is anywhere or the page
+ * (its path) changes, so a page the user leaves while it loads, or comes
+ * back to, never has focus moved by it. Returns a cancel function.
  */
 export function restoreFocusWhenShown(
   targets: readonly t.FocusTarget[],
   scope?: Element | null,
 ): () => void {
   const deadline = Date.now() + SHOWN_WAIT_MS;
+  const { pathname } = window.location;
+  const waiting = () =>
+    window.location.pathname === pathname && Date.now() <= deadline && isFocusLost(scope);
   const check = () => {
-    if (!isFocusLost(scope) || restoreFocus(targets, scope) || Date.now() > deadline) return;
+    if (!waiting() || restoreFocus(targets, scope)) return;
     frame = requestAnimationFrame(check);
   };
   let frame = requestAnimationFrame(check);

From 584524f7405aa697e16765f3cd893ecbf8c6eb87 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 29 Oct 2026 06:58:46 -0400
Subject: [PATCH 4/4] =?UTF-8?q?=E2=99=BF=20fix:=20Scope=20Retry's=20Focus?=
 =?UTF-8?q?=20Restore=20to=20the=20Path=20Retry=20Was=20Pressed=20On?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../configuration/ConfigLoadError.tsx         |  9 ++--
 .../__tests__/ConfigLoadError.test.tsx        | 42 +++++++++++++++++--
 src/utils/focus.ts                            | 10 +++--
 3 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/components/configuration/ConfigLoadError.tsx b/src/components/configuration/ConfigLoadError.tsx
index 2bf259cb..fe0ea5d2 100644
--- a/src/components/configuration/ConfigLoadError.tsx
+++ b/src/components/configuration/ConfigLoadError.tsx
@@ -40,20 +40,21 @@ export function ConfigLoadError({
   const localize = useLocalize();
   const details = errorMessage(error);
   const alertRef = useRef<HTMLDivElement>(null);
-  const retriedRef = useRef(false);
+  const retriedFrom = useRef<string | null>(null);
   const wasRetrying = useRef(retrying);
 
   useEffect(() => {
     const was = wasRetrying.current;
     wasRetrying.current = retrying;
     if (!was || retrying) return;
-    retriedRef.current = false;
+    retriedFrom.current = null;
     restoreFocus([alertRef.current?.querySelector('button')]);
   }, [retrying]);
 
   useEffect(
     () => () => {
-      if (retriedRef.current) restoreFocusWhenShown([retryShownAgain, loadedConfigTab]);
+      const path = retriedFrom.current;
+      if (path) restoreFocusWhenShown([retryShownAgain, loadedConfigTab], null, path);
     },
     [],
   );
@@ -95,7 +96,7 @@ export function ConfigLoadError({
             iconLeft={retrying ? 'loading-animated' : 'refresh'}
             disabled={retrying}
             onClick={() => {
-              retriedRef.current = true;
+              retriedFrom.current = window.location.pathname;
               onRetry();
             }}
           />
diff --git a/src/components/configuration/__tests__/ConfigLoadError.test.tsx b/src/components/configuration/__tests__/ConfigLoadError.test.tsx
index 2a402d36..20f2a019 100644
--- a/src/components/configuration/__tests__/ConfigLoadError.test.tsx
+++ b/src/components/configuration/__tests__/ConfigLoadError.test.tsx
@@ -66,6 +66,27 @@ function Page({
   );
 }
 
+/**
+ * The configuration route's error component: its card stays mounted, with
+ * Retry busy, while the router loads again. A navigation away unmounts it
+ * after the path has already changed.
+ */
+function RouteError() {
+  const [retrying, setRetrying] = useState(false);
+  return (
+    <>
+      <header>
+        <h1 tabIndex={-1}>Configuration</h1>
+      </header>
+      <ConfigLoadError
+        error={new Error('boom')}
+        onRetry={() => setRetrying(true)}
+        retrying={retrying}
+      />
+    </>
+  );
+}
+
 /** Another page of the app (Access management), with an open tab of its own when `tabs`. */
 function AccessPage({ tabs }: { tabs: boolean }) {
   return (
@@ -85,12 +106,13 @@ function AccessPage({ tabs }: { tabs: boolean }) {
 }
 
 /**
- * Renders the configuration page at /configuration. The returned `goTo`
- * changes the path the way the router does (history) and shows `page` there.
+ * Renders the configuration page (or `start`) at /configuration. The returned
+ * `goTo` changes the path the way the router does (history) and shows `page`
+ * there.
  */
-function renderApp() {
+function renderApp(start: ReactElement = <Page />) {
   window.history.pushState(null, '', '/configuration');
-  const { rerender } = render(<Page />);
+  const { rerender } = render(start);
   return async (path: string, page: ReactElement) => {
     window.history.pushState(null, '', path);
     rerender(page);
@@ -158,6 +180,18 @@ describe('ConfigLoadError', () => {
     expect(document.body).toHaveFocus();
   });
 
+  it('moves no focus on a page the user goes to while the route still shows the card retrying', async () => {
+    const goTo = renderApp(<RouteError />);
+    const retry = screen.getByRole('button', { name: 'Retry' });
+    retry.focus();
+    fireEvent.click(retry);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    await goTo('/access', <AccessPage tabs />);
+    expect(screen.queryByRole('alert')).toBeNull();
+    expect(screen.getByRole('tab', { name: 'Roles' })).toBeInTheDocument();
+    expect(document.body).toHaveFocus();
+  });
+
   it('moves no focus on the configuration page the user comes back to', async () => {
     const goTo = renderApp();
     await startRetry();
diff --git a/src/utils/focus.ts b/src/utils/focus.ts
index bfdaf664..5e8ae28f 100644
--- a/src/utils/focus.ts
+++ b/src/utils/focus.ts
@@ -39,17 +39,19 @@ const SHOWN_WAIT_MS = 30_000;
  * `restoreFocus` as soon as one of `targets` has rendered: checked every
  * frame while focus stays lost, for up to 30 s (Retry loading a page, a
  * step that loads its controls). Stops once focus is anywhere or the page
- * (its path) changes, so a page the user leaves while it loads, or comes
- * back to, never has focus moved by it. Returns a cancel function.
+ * leaves `path`, so a page the user leaves while it loads, or comes back
+ * to, never has focus moved by it. A caller starting it from an unmount
+ * cleanup passes the path its flow began on: the router has already moved
+ * to the next page when a navigation unmounts it. Returns a cancel function.
  */
 export function restoreFocusWhenShown(
   targets: readonly t.FocusTarget[],
   scope?: Element | null,
+  path: string = window.location.pathname,
 ): () => void {
   const deadline = Date.now() + SHOWN_WAIT_MS;
-  const { pathname } = window.location;
   const waiting = () =>
-    window.location.pathname === pathname && Date.now() <= deadline && isFocusLost(scope);
+    window.location.pathname === path && Date.now() <= deadline && isFocusLost(scope);
   const check = () => {
     if (!waiting() || restoreFocus(targets, scope)) return;
     frame = requestAnimationFrame(check);