diff --git a/.claude/rules/formats/sass-theming.md b/.claude/rules/formats/sass-theming.md
index 99f421dc775..5b27b016298 100644
--- a/.claude/rules/formats/sass-theming.md
+++ b/.claude/rules/formats/sass-theming.md
@@ -6,6 +6,7 @@ paths:
   - "src/format/reveal/format-reveal-theme*"
   - "src/format/dashboard/format-dashboard-shared*"
   - "src/resources/formats/**/*.scss"
+  - "src/resources/projects/**/*.scss"
 ---
 
 # Sass Theming
@@ -22,3 +23,50 @@ background-color: var(--r-background-color, $body-bg);
 Read `llm-docs/sass-theming-architecture.md` for full compilation pipeline details.
 
 For the three-tier callout CSS architecture (Bootstrap, RevealJS, standalone HTML), see `llm-docs/callout-styling-html.md`.
+
+## Keyboard focus ring (Bootstrap formats)
+
+One rule in `_bootstrap-rules.scss` draws the focus ring for every focusable
+element: `:focus-visible`. The `focus-ring` mixin in
+`_bootstrap-mixins.scss` defines the ring. Do not add focus rules for one
+control. A rule with a higher specificity replaces part of the ring on that
+control.
+
+- The global rule has specificity (0,1,0) on purpose, so that author rules
+  such as `a:focus-visible` (0,1,1) win. Do not raise it.
+- Bootstrap removes the outline with (0,2,0) rules (`.btn:focus-visible`,
+  `.nav-link:focus-visible`, `.form-control:focus`, ...). A second rule lists
+  these classes and includes the ring again. MathJax removes the outline on
+  `mjx-speech` at runtime, so `:root mjx-speech:focus-visible` (0,2,1) puts
+  it back. Add a rule only if Bootstrap or a bundled library removes the
+  outline.
+- The inner tone is `box-shadow: var(--quarto-focus-ring-shadow)`. The
+  property is set on `:root`. An author can remove the inner tone with
+  `--quarto-focus-ring-shadow: none`. Use the property, not
+  `$focus-ring-inner-shadow`, in any rule that adds to the ring.
+
+- One exception is the search box. Its visible field is `.aa-Form`, which
+  holds a borderless `.aa-Input`. The form gets `@include focus-ring` when the
+  input has focus, and the input gets no ring.
+- Another exception is pagination. Some Bootswatch themes (vapor, zephyr)
+  give `.page-link` a `box-shadow` with a higher specificity, so a
+  `(0,4,0)` rule includes the ring again.
+
+- The ring follows W3C technique C40. The outer color is an `outline`
+  (`$focus-ring-outline-width`, 2px). The inner color is a `box-shadow` that
+  fills the `outline-offset` (`$focus-ring-outline-offset`, 2px). Both are
+  public `!default` variables in `_bootstrap-variables.scss`.
+- On a dark page (`$body-bg` has more contrast with white than with black),
+  the derived tones swap: white goes on the `outline`. The test is per
+  stylesheet, not per `light:`/`dark:` key. If a user sets
+  `$focus-ring-outer-color` or `$focus-ring-inner-color`, nothing swaps.
+- The outer color is the `outline` because Bootswatch themes often set
+  `box-shadow` on controls, but rarely `outline`. Forced-colors mode also
+  keeps the `outline`.
+- `_bootstrap-variables.scss` sets Bootstrap's focus halos to `none`. Do not
+  turn them on again.
+- If an element must not show the ring, set both `outline: none` and
+  `box-shadow: none`. An example is `#quarto-document-content`, which gets
+  focus from the skip link.
+- If a scroll container clips the ring, add `$focus-ring-extent` of padding
+  on that side. The TOC sidebars and the collapsed navbar menu are examples.
diff --git a/news/changelog-1.11.md b/news/changelog-1.11.md
index 63e16dd8fd2..d010245be08 100644
--- a/news/changelog-1.11.md
+++ b/news/changelog-1.11.md
@@ -24,6 +24,7 @@ All changes included in 1.11:
 - ([#14615](https://github.com/quarto-dev/quarto-cli/issues/14615)): Fix invalid `role="menu"` on the website navbar's collapse toggle button, flagged by axe-core (`aria-allowed-role`) and WAVE (`aria-role-mismatch`).
 - ([#12116](https://github.com/quarto-dev/quarto-cli/issues/12116), [#4935](https://github.com/quarto-dev/quarto-cli/issues/4935)): Website sidebar section toggles are now `<button>` elements, so they are keyboard accessible and properly announced.
 - ([#14774](https://github.com/quarto-dev/quarto-cli/issues/14774)): Fix missing keyboard focus indicator on the code tools button and on a website's sidebar toggle and sidebar search buttons.
+- ([#15139](https://github.com/quarto-dev/quarto-cli/issues/15139)): HTML output now uses one high-contrast keyboard focus ring for all focusable elements, which stays visible in forced-colors mode. Set its colors with the new `$focus-ring-outer-color` and `$focus-ring-inner-color` Sass variables, and its size with `$focus-ring-outline-width` and `$focus-ring-outline-offset`. Quarto no longer uses Bootstrap's `$focus-ring-color`, `$focus-ring-box-shadow`, `$btn-focus-width`, and `$btn-focus-box-shadow`.
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Add a distinct, localizable `aria-label` to each navigation landmark of websites and books: the navbar (`Site`), the sidebar (`Section`, or `Site` when there is no navbar), the narrow-viewport toolbar (`Toolbar`), the previous/next page navigation (`Page`), and the breadcrumbs (`Breadcrumbs`) (previously hardcoded English `breadcrumb`). The new `navigation-*-label` language keys can be overridden with `language:` metadata.
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Translate the new `navigation-*-label` keys in all 33 built-in language files. The values are drawn from existing human-translated interface strings (LibreOffice, GNOME, Wikidata) and each one carries a comment naming its source; values that were adapted rather than used verbatim are marked `needs review`.
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Label the table of contents `<nav>` with its localized title (`aria-labelledby`), in `html` and `revealjs` output, so assistive technology can tell it apart from other navigation landmarks.
diff --git a/src/resources/formats/html/bootstrap/_bootstrap-functions.scss b/src/resources/formats/html/bootstrap/_bootstrap-functions.scss
index 05d1780c203..51158bf061e 100644
--- a/src/resources/formats/html/bootstrap/_bootstrap-functions.scss
+++ b/src/resources/formats/html/bootstrap/_bootstrap-functions.scss
@@ -29,10 +29,13 @@
   // A: 3:1
   // AA: 4.5:1
   // AAA: 7:1
-  $goalContrastRatio: 3;
-  @if $level == "AA" {
+  // A number: that ratio (e.g. 9 for the two tones of the focus ring)
+  $goalContrastRatio: $level;
+  @if $level == "A" {
+    $goalContrastRatio: 3;
+  } @else if $level == "AA" {
     $goalContrastRatio: 4.5;
-  } @else {
+  } @else if $level == "AAA" {
     $goalContrastRatio: 7;
   }
 
diff --git a/src/resources/formats/html/bootstrap/_bootstrap-mixins.scss b/src/resources/formats/html/bootstrap/_bootstrap-mixins.scss
index 7869edf77ee..1919d512be9 100644
--- a/src/resources/formats/html/bootstrap/_bootstrap-mixins.scss
+++ b/src/resources/formats/html/bootstrap/_bootstrap-mixins.scss
@@ -1,3 +1,42 @@
+// Keyboard focus ring (WCAG 2.4.7, 1.4.11), after W3C technique C40: two
+// tones at least 9:1 apart, so one of them reaches 3:1 against any solid
+// background. The outer tone is the outline, which theme rules rarely
+// override and forced-colors mode keeps; the inner tone is a box-shadow that
+// fills the outline offset. Resolved here, after all defaults, so that
+// $primary-text-emphasis exists and every rules layer can use the result.
+$focus-ring-inner: if($focus-ring-inner-color, $focus-ring-inner-color, $white);
+$focus-ring-outer: $focus-ring-outer-color;
+@if not $focus-ring-outer {
+  // Shift the derived color only as far as needed to reach 9:1
+  $focus-ring-outer: theme-contrast($primary-text-emphasis, $focus-ring-inner, 9);
+}
+// On a dark page the tones swap, so the outline (the part that touches the
+// page) is the tone that contrasts with the page background. Colors set
+// explicitly are never swapped.
+$focus-ring-page-is-dark: not $focus-ring-outer-color and
+  not $focus-ring-inner-color and
+  quarto-contrast($body-bg, $white) > quarto-contrast($body-bg, $black);
+$focus-ring-outline-color: if(
+  $focus-ring-page-is-dark,
+  $focus-ring-inner,
+  $focus-ring-outer
+);
+$focus-ring-shadow-color: if(
+  $focus-ring-page-is-dark,
+  $focus-ring-outer,
+  $focus-ring-inner
+);
+// how far the ring reaches outside the element's border box
+$focus-ring-extent: $focus-ring-outline-width + $focus-ring-outline-offset;
+$focus-ring-inner-shadow: 0 0 0 $focus-ring-outline-offset $focus-ring-shadow-color;
+
+@mixin focus-ring {
+  outline: $focus-ring-outline-width solid $focus-ring-outline-color;
+  outline-offset: $focus-ring-outline-offset;
+  // --quarto-focus-ring-shadow is set on :root in _bootstrap-rules.scss
+  box-shadow: var(--quarto-focus-ring-shadow);
+}
+
 @mixin body-secondary {
   @if variable-exists(body-secondary) {
     color: $body-secondary;
diff --git a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss
index 06db8a53d89..315cb593c9a 100644
--- a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss
+++ b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss
@@ -23,6 +23,55 @@ ol > li:not(:has(> p)) > ol > li:has(> p) {
   margin-top: 1rem;
 }
 
+// The inner tone is a custom property, so an author can remove it with
+// one line (`--quarto-focus-ring-shadow: none`) without matching the
+// specificity of the rules below.
+:root {
+  --quarto-focus-ring-shadow: #{$focus-ring-inner-shadow};
+}
+
+// One keyboard focus ring for every focusable element (see the focus-ring
+// mixin). The rule has (0,1,0) specificity on purpose, so that author rules
+// such as `a:focus-visible` (0,1,1) win over it.
+:focus-visible {
+  @include focus-ring;
+}
+
+// Bootstrap removes the outline on these controls with (0,2,0) rules
+// (`.btn:focus-visible { outline: 0 }`, `.form-control:focus`, ...), which
+// beat the (0,1,0) rule above. These rules tie with Bootstrap and win on
+// order; author rules on the same classes come later and still win.
+// Don't add rules for other controls: only outline removals by Bootstrap
+// or a bundled library belong here.
+.btn:focus-visible,
+.btn-close:focus-visible,
+.nav-link:focus-visible,
+.navbar-toggler:focus-visible,
+.accordion-button:focus-visible,
+.carousel-control-prev:focus-visible,
+.carousel-control-next:focus-visible,
+.form-control:focus-visible,
+.form-select:focus-visible,
+.form-check-input:focus-visible,
+.form-range:focus-visible {
+  @include focus-ring;
+}
+
+// MathJax injects `mjx-speech:focus { outline: none }` (0,1,1) at runtime,
+// after this stylesheet, so a tie loses on order. (0,2,1) puts the ring back
+// on the focusable speech element of each equation.
+:root mjx-speech:focus-visible {
+  @include focus-ring;
+}
+
+// Exception: some Bootswatch themes give pagination links their own
+// box-shadow (vapor's glow on the active link, zephyr's drop shadow), which
+// replaces the ring's inner tone. On vapor's dark page that leaves no
+// visible ring. (0,4,0) beats those theme rules.
+.pagination .page-item .page-link:focus-visible {
+  @include focus-ring;
+}
+
 // skip-to-content link (WCAG 2.4.1 Bypass Blocks); visually hidden via
 // Bootstrap's .visually-hidden-focusable helper until it receives focus
 #quarto-skip-link:focus {
@@ -36,7 +85,6 @@ ol > li:not(:has(> p)) > ol > li:has(> p) {
   text-decoration: none;
   border: 1px solid $border-color;
   border-radius: $border-radius;
-  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
 }
 
 // the skip-link target receives programmatic focus (tabindex="-1"); don't
@@ -44,6 +92,7 @@ ol > li:not(:has(> p)) > ol > li:has(> p) {
 #quarto-document-content:focus,
 #quarto-content:focus {
   outline: none;
+  box-shadow: none;
 }
 
 // Grid layout
@@ -1061,16 +1110,6 @@ td code:not(.sourceCode) {
   padding: 0.7rem;
 }
 
-// These buttons are bare .btn elements (no btn-* variant class), so
-// Bootstrap's .btn:focus-visible leaves them with no focus indicator.
-// Restore the browser's ring; unlike box-shadow it survives forced colors.
-// See https://github.com/quarto-dev/quarto-cli/issues/14774
-.quarto-btn-toggle:focus-visible,
-.quarto-search-button:focus-visible,
-.code-tools-button:focus-visible {
-  outline: revert;
-}
-
 .code-tools-button {
   font-size: 1rem;
   padding: 0.15rem 0.15rem;
@@ -1120,6 +1159,21 @@ td code:not(.sourceCode) {
   padding-top: 1em;
 }
 
+// TOC links run to the edge of these scroll containers, which would clip
+// their focus ring
+.sidebar.toc-left,
+.sidebar.margin-sidebar {
+  padding-right: $focus-ring-extent;
+}
+
+// The collapsed navbar menu scrolls, and its links run to its edges. The
+// padding makes room for the focus ring; the negative margin keeps the links
+// where they were.
+.navbar-nav-scroll {
+  padding: $focus-ring-extent;
+  margin: -$focus-ring-extent;
+}
+
 .sidebar.quarto-banner-title-block-sidebar {
   & > * {
     padding-top: 1.65em;
diff --git a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss
index 1c0e404f940..6d8e0e8b76d 100644
--- a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss
+++ b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss
@@ -194,6 +194,25 @@ $zindex-pagelayout: 998;
 // above the fixed/headroom navbar ($zindex-fixed: 1030)
 $zindex-skip-link: 1070 !default;
 
+// Keyboard focus ring (see the `:focus-visible` rule in _bootstrap-rules.scss).
+// When unset, the outer color comes from $primary-text-emphasis and the
+// inner color is $white; both resolve in the rules layer, after Bootstrap
+// has defined $primary-text-emphasis. An author who sets the outer color
+// is responsible for its 9:1 contrast against the inner color.
+$focus-ring-outer-color: null !default;
+$focus-ring-inner-color: null !default;
+// Width of the outer tone, and of the gap that the inner tone fills. Keep
+// the width at 2px or more for WCAG 2.4.13 (Focus Appearance).
+$focus-ring-outline-width: 2px !default;
+$focus-ring-outline-offset: 2px !default;
+
+// Turn off Bootstrap's translucent box-shadow focus halos; the focus ring
+// replaces them.
+$focus-ring-box-shadow: none !default;
+$form-select-focus-box-shadow: none !default;
+$form-range-thumb-focus-box-shadow: none !default;
+$btn-focus-width: 0 !default;
+
 $popover-bg: if(variable-exists(body-bg), $body-bg, null) !default;
 $input-bg: if(variable-exists(body-bg), $body-bg, null) !default;
 
diff --git a/src/resources/projects/website/navigation/quarto-nav.scss b/src/resources/projects/website/navigation/quarto-nav.scss
index aa3ba4065ff..b4c3697699e 100644
--- a/src/resources/projects/website/navigation/quarto-nav.scss
+++ b/src/resources/projects/website/navigation/quarto-nav.scss
@@ -409,14 +409,6 @@ $sidebar-section-bottom-margin: 0.2em;
   padding-left: 0.5rem;
 }
 
-// A bare button gets no focus ring from Bootstrap's reboot, so state one
-// explicitly rather than depend on the UA default (quarto-cli#14774).
-.sidebar-item .sidebar-item-toggle:focus-visible,
-.sidebar-item button.sidebar-item-text:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
 .sidebar-item .sidebar-item-toggle .bi {
   // The dongle for opening and closing sections
   font-size: 0.7rem;
@@ -454,6 +446,9 @@ $sidebar-section-bottom-margin: 0.2em;
 @include media-breakpoint-down(lg) {
   .quarto-secondary-nav {
     display: block;
+    // Paint above the navbar (position: relative), so that the focus ring of
+    // the buttons at the top edge is not covered
+    position: relative;
 
     button.quarto-search-button {
       padding-right: 0em;
diff --git a/src/resources/projects/website/search/quarto-search.scss b/src/resources/projects/website/search/quarto-search.scss
index e0283012538..d84fde59681 100644
--- a/src/resources/projects/website/search/quarto-search.scss
+++ b/src/resources/projects/website/search/quarto-search.scss
@@ -81,10 +81,6 @@ $quarto-search-collapse-icon-size: 26px !default;
     .aa-Form {
       background-color: inherit;
       border: none;
-      &:focus-within {
-        box-shadow: none;
-        outline: none;
-      }
       .aa-InputWrapper {
         display: none;
         &:focus-within {
@@ -114,6 +110,17 @@ $quarto-search-collapse-icon-size: 26px !default;
   }
 }
 
+// The search box is a form that holds an icon, the input, and buttons. Draw
+// the focus ring on the form, which is the visible field, instead of on the
+// borderless input inside it.
+.aa-Form:has(.aa-Input:focus-visible) {
+  @include focus-ring;
+}
+.aa-Form .aa-Input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .aa-Autocomplete,
 .aa-DetachedFormContainer {
   // Search box
@@ -128,10 +135,6 @@ $quarto-search-collapse-icon-size: 26px !default;
     margin: 0;
     position: relative;
     width: 100%;
-    &:focus-within {
-      box-shadow: rgba($primary, 0.6) 0 0 0 1px;
-      outline: currentColor none medium;
-    }
     .aa-InputWrapperPrefix {
       align-items: center;
       display: flex;
@@ -183,12 +186,6 @@ $quarto-search-collapse-icon-size: 26px !default;
           color: $input-color;
           opacity: 0.8;
         }
-        // Focus is set and styled on the parent, it isn't necessary here
-        &:focus {
-          border-color: none;
-          box-shadow: none;
-          outline: none;
-        }
         // Remove native appearence
         &::-webkit-search-decoration,
         &::-webkit-search-cancel-button,
@@ -581,10 +578,8 @@ $quarto-search-collapse-icon-size: 26px !default;
       cursor: pointer;
       margin: 0 0 0 0.5em;
       padding: 0 0.5em;
-      &:hover,
-      &:focus {
+      &:hover {
         box-shadow: rgba($primary, 0.6) 0 0 0 1px;
-        outline: currentColor none medium;
       }
     }
   }
diff --git a/tests/docs/playwright/html/code-tools-focus-indicator.qmd b/tests/docs/playwright/html/code-tools-focus-indicator.qmd
index 3b6df72a25e..cb02afc9734 100644
--- a/tests/docs/playwright/html/code-tools-focus-indicator.qmd
+++ b/tests/docs/playwright/html/code-tools-focus-indicator.qmd
@@ -6,8 +6,7 @@ code-tools: true
 
 Regression test for #14774: the Code button is a bare Bootstrap `.btn`
 (no `btn-*` variant class), so Bootstrap's `outline: 0` left it with no
-keyboard focus indicator. Quarto restores the native ring with
-`outline: revert`.
+keyboard focus indicator. It now gets Quarto's global focus ring.
 
 ```r
 1 + 1
diff --git a/tests/docs/playwright/html/focus-ring-author-override.qmd b/tests/docs/playwright/html/focus-ring-author-override.qmd
new file mode 100644
index 00000000000..688423bfefd
--- /dev/null
+++ b/tests/docs/playwright/html/focus-ring-author-override.qmd
@@ -0,0 +1,15 @@
+---
+title: Focus ring author override
+format:
+  html:
+    theme: [default, focus-ring-author-override.scss]
+---
+
+Fixture for author focus styles. The theme sets its own outline on
+`a:focus-visible` and removes the Quarto inner tone with
+`--quarto-focus-ring-shadow: none`. The author rule must win over the
+global focus ring.
+
+An [inline link](#target) in the body.
+
+## Target {#target}
diff --git a/tests/docs/playwright/html/focus-ring-author-override.scss b/tests/docs/playwright/html/focus-ring-author-override.scss
new file mode 100644
index 00000000000..7c70fbddd8c
--- /dev/null
+++ b/tests/docs/playwright/html/focus-ring-author-override.scss
@@ -0,0 +1,8 @@
+/*-- scss:rules --*/
+// A typical author focus rule: an element selector with (0,1,1)
+// specificity that sets only the outline, plus one line to remove the
+// Quarto inner tone.
+a:focus-visible {
+  outline: 3px solid #b5361f;
+  --quarto-focus-ring-shadow: none;
+}
diff --git a/tests/docs/playwright/html/focus-ring-light-dark.qmd b/tests/docs/playwright/html/focus-ring-light-dark.qmd
new file mode 100644
index 00000000000..2ce2421ce1c
--- /dev/null
+++ b/tests/docs/playwright/html/focus-ring-light-dark.qmd
@@ -0,0 +1,20 @@
+---
+title: Focus ring light/dark pair
+format:
+  html:
+    theme:
+      light: cosmo
+      dark: darkly
+---
+
+Fixture for the page-aware focus ring on a paired `light:`/`dark:` theme.
+Quarto compiles the two themes into separate stylesheets, and each one
+resolves the focus ring against its own `$body-bg`. The light (cosmo)
+stylesheet keeps the dark tone on the outline; the dark (darkly) stylesheet
+swaps the tones so the outline is white. Switching the color scheme at
+runtime switches which stylesheet is active, and the ring must switch with
+it.
+
+An [inline link](#target) in the body.
+
+## Target {#target}
diff --git a/tests/docs/playwright/website/bare-btn-focus/index.qmd b/tests/docs/playwright/website/bare-btn-focus/index.qmd
deleted file mode 100644
index 9ea709a6189..00000000000
--- a/tests/docs/playwright/website/bare-btn-focus/index.qmd
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: "Home"
----
-
-Regression test for #14774: below 992px the secondary nav shows the
-sidebar toggle and sidebar search buttons. Both are bare Bootstrap
-`.btn` elements and must keep a visible keyboard focus indicator.
diff --git a/tests/docs/playwright/website/bare-btn-focus/.gitignore b/tests/docs/playwright/website/focus-indicator/.gitignore
similarity index 100%
rename from tests/docs/playwright/website/bare-btn-focus/.gitignore
rename to tests/docs/playwright/website/focus-indicator/.gitignore
diff --git a/tests/docs/playwright/website/bare-btn-focus/_quarto.yml b/tests/docs/playwright/website/focus-indicator/_quarto.yml
similarity index 55%
rename from tests/docs/playwright/website/bare-btn-focus/_quarto.yml
rename to tests/docs/playwright/website/focus-indicator/_quarto.yml
index 32a3a3fa633..39dfb3c326f 100644
--- a/tests/docs/playwright/website/bare-btn-focus/_quarto.yml
+++ b/tests/docs/playwright/website/focus-indicator/_quarto.yml
@@ -2,18 +2,25 @@ project:
   type: website
 
 website:
-  title: "bare-btn-focus"
+  title: "focus-indicator"
   search:
     location: sidebar
   navbar:
     left:
       - href: index.qmd
         text: Home
+      - about.qmd
   sidebar:
     style: floating
     search: true
     contents:
       - index.qmd
-      - about.qmd
+      - listing.qmd
+      - section: "Section"
+        contents:
+          - about.qmd
 
-format: html
+format:
+  html:
+    toc: true
+    theme: [default, focus-ring.scss]
diff --git a/tests/docs/playwright/website/bare-btn-focus/about.qmd b/tests/docs/playwright/website/focus-indicator/about.qmd
similarity index 100%
rename from tests/docs/playwright/website/bare-btn-focus/about.qmd
rename to tests/docs/playwright/website/focus-indicator/about.qmd
diff --git a/tests/docs/playwright/website/focus-indicator/focus-ring.scss b/tests/docs/playwright/website/focus-indicator/focus-ring.scss
new file mode 100644
index 00000000000..ac655378635
--- /dev/null
+++ b/tests/docs/playwright/website/focus-indicator/focus-ring.scss
@@ -0,0 +1,8 @@
+/*-- scss:defaults --*/
+// A distinctive outer color, so the tests can tell the focus ring
+// apart from any other outline.
+$focus-ring-outer-color: #123456;
+// Sizes that differ from the 2px defaults, so the tests can tell that
+// the public Sass variables reach the ring.
+$focus-ring-outline-width: 3px;
+$focus-ring-outline-offset: 1px;
diff --git a/tests/docs/playwright/website/focus-indicator/index.qmd b/tests/docs/playwright/website/focus-indicator/index.qmd
new file mode 100644
index 00000000000..d91fc30c0ca
--- /dev/null
+++ b/tests/docs/playwright/website/focus-indicator/index.qmd
@@ -0,0 +1,12 @@
+---
+title: "Home"
+---
+
+Fixture for the global focus ring. Every focusable control must show the
+same ring: a `$focus-ring-outer-color` outline, with the inner color as a
+box-shadow in the outline offset.
+
+Below 992px the secondary nav shows the sidebar toggle and sidebar search
+buttons, which are bare Bootstrap `.btn` elements (#14774).
+
+An [inline link](about.qmd) in the body.
diff --git a/tests/docs/playwright/website/focus-indicator/listing.qmd b/tests/docs/playwright/website/focus-indicator/listing.qmd
new file mode 100644
index 00000000000..ca105ea954c
--- /dev/null
+++ b/tests/docs/playwright/website/focus-indicator/listing.qmd
@@ -0,0 +1,9 @@
+---
+title: "Listing"
+listing:
+  contents: posts
+  sort: "date desc"
+  sort-ui: true
+  filter-ui: true
+  page-size: 2
+---
diff --git a/tests/docs/playwright/website/focus-indicator/posts/a/index.qmd b/tests/docs/playwright/website/focus-indicator/posts/a/index.qmd
new file mode 100644
index 00000000000..889cfdf7c95
--- /dev/null
+++ b/tests/docs/playwright/website/focus-indicator/posts/a/index.qmd
@@ -0,0 +1,6 @@
+---
+title: "Post a"
+date: 2026-10-01
+---
+
+Body of post a.
diff --git a/tests/docs/playwright/website/focus-indicator/posts/b/index.qmd b/tests/docs/playwright/website/focus-indicator/posts/b/index.qmd
new file mode 100644
index 00000000000..9c8147fd977
--- /dev/null
+++ b/tests/docs/playwright/website/focus-indicator/posts/b/index.qmd
@@ -0,0 +1,6 @@
+---
+title: "Post b"
+date: 2026-10-02
+---
+
+Body of post b.
diff --git a/tests/docs/playwright/website/focus-indicator/posts/c/index.qmd b/tests/docs/playwright/website/focus-indicator/posts/c/index.qmd
new file mode 100644
index 00000000000..c327af39285
--- /dev/null
+++ b/tests/docs/playwright/website/focus-indicator/posts/c/index.qmd
@@ -0,0 +1,6 @@
+---
+title: "Post c"
+date: 2026-10-03
+---
+
+Body of post c.
diff --git a/tests/integration/playwright/tests/html-focus-indicator-bare-btn.spec.ts b/tests/integration/playwright/tests/html-focus-indicator-bare-btn.spec.ts
deleted file mode 100644
index 6fe5964cef0..00000000000
--- a/tests/integration/playwright/tests/html-focus-indicator-bare-btn.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { expect, test } from "@playwright/test";
-import { getUrl, tabUntilFocused } from "../src/utils";
-
-// Regression tests for #14774. Quarto emits three buttons that carry the
-// Bootstrap `btn` class with no `btn-*` variant class: the code tools
-// button, the sidebar toggle, and the sidebar search button. Bootstrap's
-// .btn:focus-visible removes the native focus ring (outline: 0) and
-// substitutes a box-shadow that only the variant classes define, so these
-// buttons took keyboard focus with no visible indicator. Quarto restores
-// the browser's native ring with `outline: revert`.
-
-// Focus moves with real Tab presses (tabUntilFocused) because the fix only
-// applies to keyboard focus, i.e. to :focus-visible.
-
-test("code tools button shows a focus indicator on keyboard focus", async ({
-  page,
-  browserName,
-}) => {
-  await page.goto(getUrl("html/code-tools-focus-indicator.html"), {
-    waitUntil: "load",
-  });
-
-  const button = page.locator("button.code-tools-button");
-  await expect(button).toBeVisible();
-  expect(await tabUntilFocused(page, browserName, button)).toBe(true);
-
-  // outline: revert restores the user-agent ring (outline-style: auto in
-  // every engine); any non-none outline is a visible indicator.
-  await expect(button).not.toHaveCSS("outline-style", "none");
-});
-
-test.describe("website secondary nav buttons", () => {
-  // The secondary nav holding the sidebar toggle and sidebar search
-  // buttons only appears when the sidebar collapses, below the lg
-  // breakpoint (992px).
-  test.use({ viewport: { width: 500, height: 800 } });
-
-  const buttons = [
-    { name: "sidebar toggle", selector: "button.quarto-btn-toggle" },
-    { name: "sidebar search", selector: "button.quarto-search-button" },
-  ];
-
-  for (const { name, selector } of buttons) {
-    test(`${name} button shows a focus indicator on keyboard focus`, async ({
-      page,
-      browserName,
-    }) => {
-      await page.goto(getUrl("website/bare-btn-focus/_site/index.html"), {
-        waitUntil: "load",
-      });
-
-      const button = page.locator(`.quarto-secondary-nav ${selector}`);
-      await expect(button).toBeVisible();
-      expect(await tabUntilFocused(page, browserName, button)).toBe(true);
-
-      await expect(button).not.toHaveCSS("outline-style", "none");
-    });
-  }
-});
diff --git a/tests/integration/playwright/tests/html-focus-indicator.spec.ts b/tests/integration/playwright/tests/html-focus-indicator.spec.ts
new file mode 100644
index 00000000000..179b6cc9e14
--- /dev/null
+++ b/tests/integration/playwright/tests/html-focus-indicator.spec.ts
@@ -0,0 +1,196 @@
+import { expect, Locator, test } from "@playwright/test";
+import { getUrl, tabUntilFocused } from "../src/utils";
+
+// Quarto draws one keyboard focus ring for every focusable element, from a
+// global `:focus-visible` rule: an outline in the outer color, with
+// the inner color as a box-shadow in the outline offset (W3C technique
+// C40). Bootstrap's box-shadow halos are turned off at the source.
+//
+// The website fixture sets `$focus-ring-outer-color: #123456`, so an
+// outline in that color shows that the global rule won the cascade on that
+// control; a component rule that wins instead shows up as a wrong color.
+// It also sets a 3px width and 1px offset, which differ from the 2px
+// defaults, so the same assertions show that the public Sass variables
+// reach the ring.
+//
+// Focus moves with real Tab presses (tabUntilFocused) because the ring
+// only applies to keyboard focus, i.e. to :focus-visible.
+
+const outerColor = "rgb(18, 52, 86)"; // #123456, set in focus-ring.scss
+const websiteShadow = /^rgb\(255, 255, 255\) 0px 0px 0px 1px/; // default $white, 1px offset
+
+async function expectFocusRing(control: Locator) {
+  await expect(control).toHaveCSS("outline-style", "solid");
+  await expect(control).toHaveCSS("outline-color", outerColor);
+  await expect(control).toHaveCSS("outline-width", "3px");
+  await expect(control).toHaveCSS("outline-offset", "1px");
+  await expect(control).toHaveCSS("box-shadow", websiteShadow);
+}
+
+// One control per rule that puts the ring back where Bootstrap or Quarto
+// removed the outline: `.nav-link`, `.form-select`, `.form-control`, and
+// the bare sidebar toggle button.
+test.describe("website controls show the focus ring", () => {
+  test.use({ viewport: { width: 1400, height: 900 } });
+
+  const controls = [
+    { name: "navbar link", page: "index", selector: "#navbarCollapse a.nav-link:not(.active)" },
+    { name: "sidebar section toggle", page: "index", selector: "#quarto-sidebar button.sidebar-item-toggle" },
+    { name: "listing sort", page: "listing", selector: ".quarto-listing-sort select" },
+    { name: "listing filter", page: "listing", selector: ".quarto-listing-filter input" },
+  ];
+
+  for (const { name, page: pageName, selector } of controls) {
+    test(name, async ({ page, browserName }) => {
+      await page.goto(getUrl(`website/focus-indicator/_site/${pageName}.html`), {
+        waitUntil: "load",
+      });
+      const control = page.locator(selector).first();
+      await expect(control).toBeVisible();
+      expect(await tabUntilFocused(page, browserName, control, 40)).toBe(true);
+      await expectFocusRing(control);
+    });
+  }
+});
+
+// The search box draws the ring on the form, which is the visible field,
+// instead of on the borderless input inside it.
+test("sidebar search input shows the focus ring on its form", async ({
+  page,
+  browserName,
+}) => {
+  await page.setViewportSize({ width: 1400, height: 900 });
+  await page.goto(getUrl("website/focus-indicator/_site/index.html"), {
+    waitUntil: "load",
+  });
+  const input = page.locator("#quarto-sidebar .aa-Input");
+  await expect(input).toBeVisible();
+  expect(await tabUntilFocused(page, browserName, input)).toBe(true);
+  await expectFocusRing(page.locator("#quarto-sidebar .aa-Form"));
+  await expect(input).toHaveCSS("outline-style", "none");
+});
+
+// Regression tests for #14774: these buttons carry Bootstrap's `btn` class
+// with no `btn-*` variant, so Bootstrap's own .btn:focus-visible left them
+// with no indicator.
+test.describe("website secondary nav buttons", () => {
+  // The secondary nav holding the sidebar toggle and sidebar search
+  // buttons only appears when the sidebar collapses, below the lg
+  // breakpoint (992px).
+  test.use({ viewport: { width: 500, height: 800 } });
+
+  const buttons = [
+    { name: "sidebar toggle", selector: "button.quarto-btn-toggle" },
+    { name: "sidebar search", selector: "button.quarto-search-button" },
+  ];
+
+  for (const { name, selector } of buttons) {
+    test(`${name} button shows the focus ring`, async ({
+      page,
+      browserName,
+    }) => {
+      await page.goto(getUrl("website/focus-indicator/_site/index.html"), {
+        waitUntil: "load",
+      });
+
+      const button = page.locator(`.quarto-secondary-nav ${selector}`);
+      await expect(button).toBeVisible();
+      expect(await tabUntilFocused(page, browserName, button)).toBe(true);
+      await expectFocusRing(button);
+    });
+  }
+});
+
+test("code tools button shows the focus ring", async ({
+  page,
+  browserName,
+}) => {
+  await page.goto(getUrl("html/code-tools-focus-indicator.html"), {
+    waitUntil: "load",
+  });
+
+  const button = page.locator("button.code-tools-button");
+  await expect(button).toBeVisible();
+  expect(await tabUntilFocused(page, browserName, button)).toBe(true);
+
+  // Default theme, so no fixed outer color to compare against.
+  await expect(button).toHaveCSS("outline-style", "solid");
+  await expect(button).toHaveCSS("outline-offset", "2px");
+  await expect(button).toHaveCSS("box-shadow", /^rgb\(255, 255, 255\) 0px 0px 0px 2px/);
+});
+
+// Forced-colors mode drops every box-shadow, so Bootstrap's halo left
+// `.nav-link` with no indicator there. The ring's outline survives.
+test.describe("forced colors", () => {
+  test.use({ viewport: { width: 1400, height: 900 }, forcedColors: "active" });
+
+  test("navbar link keeps an outline", async ({ page, browserName }) => {
+    test.skip(browserName !== "chromium", "forced colors emulation is Chromium-only");
+    await page.goto(getUrl("website/focus-indicator/_site/index.html"), {
+      waitUntil: "load",
+    });
+    const link = page.locator("#navbarCollapse a.nav-link:not(.active)").first();
+    expect(await tabUntilFocused(page, browserName, link)).toBe(true);
+    await expect(link).toHaveCSS("outline-style", "solid");
+    await expect(link).toHaveCSS("outline-width", "3px");
+  });
+});
+
+// Author focus rules must win over the global ring. The fixture's theme
+// sets `a:focus-visible { outline: 3px solid #b5361f }`, a (0,1,1)
+// selector, and removes the inner tone with one custom property.
+test("author a:focus-visible rule replaces the focus ring", async ({
+  page,
+  browserName,
+}) => {
+  await page.goto(getUrl("html/focus-ring-author-override.html"), {
+    waitUntil: "load",
+  });
+  const link = page.getByRole("link", { name: "inline link" });
+  await expect(link).toBeVisible();
+  expect(await tabUntilFocused(page, browserName, link)).toBe(true);
+  await expect(link).toHaveCSS("outline-color", "rgb(181, 54, 31)");
+  await expect(link).toHaveCSS("outline-width", "3px");
+  await expect(link).toHaveCSS("box-shadow", "none");
+});
+
+// On a paired `light:`/`dark:` theme, Quarto compiles the two themes into
+// separate stylesheets and each resolves the focus ring against its own
+// $body-bg. The light sheet keeps the dark tone on the outline and white
+// in the inner band; the dark sheet swaps them so the outline is white.
+// The dark tone itself is derived from each theme, so only the swap is
+// asserted, not the exact color.
+test("paired light/dark theme swaps the focus ring tones", async ({
+  page,
+  browserName,
+}) => {
+  const white = "rgb(255, 255, 255)";
+  const whiteShadow = /^rgb\(255, 255, 255\) 0px 0px 0px 2px/;
+  // Any color but white, in the ring's 2px inner-band geometry.
+  const nonWhiteShadow = /^rgb\((?!255, 255, 255\))\d+, \d+, \d+\) 0px 0px 0px 2px/;
+
+  await page.goto(getUrl("html/focus-ring-light-dark.html"), {
+    waitUntil: "load",
+  });
+  const link = page.getByRole("link", { name: "inline link" });
+  await expect(link).toBeVisible();
+
+  // Light stylesheet (default): white is the inner band, not the outline.
+  expect(await tabUntilFocused(page, browserName, link)).toBe(true);
+  await expect(link).toHaveCSS("outline-style", "solid");
+  await expect(link).not.toHaveCSS("outline-color", white);
+  await expect(link).toHaveCSS("box-shadow", whiteShadow);
+
+  // Switch to the dark stylesheet; the ring must swap tones. The toggle is
+  // the last focusable element, and Firefox does not wrap Tab back to the
+  // top of the page, so reload instead: the choice is kept in localStorage
+  // and the reload starts the tab order from the top again.
+  await page.locator("button.quarto-color-scheme-toggle").first().click();
+  await expect(page.locator("body")).toHaveClass(/quarto-dark/);
+  await page.reload({ waitUntil: "load" });
+  await expect(page.locator("body")).toHaveClass(/quarto-dark/);
+  expect(await tabUntilFocused(page, browserName, link)).toBe(true);
+  await expect(link).toHaveCSS("outline-style", "solid");
+  await expect(link).toHaveCSS("outline-color", white);
+  await expect(link).toHaveCSS("box-shadow", nonWhiteShadow);
+});