Restore keyboard focus indicator on bare .btn buttons

news/changelog-1.11.md

@@ -8,6 +8,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_menu_broken`) when the navbar collapses to the hamburger at narrow viewports.
 - ([#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 the keyboard can reach them and `Enter` or `Space` can operate them. Each toggle carries `aria-expanded`, and `aria-labelledby` names each disclosed list after its own section. The toggles no longer carry `role="navigation"`, which removed a spurious navigation landmark from every section.
+- ([#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.
 
 ## Formats
 

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -1061,6 +1061,16 @@ 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;

tests/docs/playwright/html/code-tools-focus-indicator.qmd

@@ -0,0 +1,14 @@
+---
+title: Code tools focus indicator
+format: html
+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`.
+
+```r
+1 + 1
+```

tests/docs/playwright/website/bare-btn-focus/.gitignore

@@ -0,0 +1,4 @@
+/.quarto/
+/_site/
+
+**/*.quarto_ipynb

tests/docs/playwright/website/bare-btn-focus/_quarto.yml

@@ -0,0 +1,19 @@
+project:
+  type: website
+
+website:
+  title: "bare-btn-focus"
+  search:
+    location: sidebar
+  navbar:
+    left:
+      - href: index.qmd
+        text: Home
+  sidebar:
+    style: floating
+    search: true
+    contents:
+      - index.qmd
+      - about.qmd
+
+format: html

tests/docs/playwright/website/bare-btn-focus/about.qmd

@@ -0,0 +1,5 @@
+---
+title: "About"
+---
+
+Second page so the sidebar has more than one entry.

tests/docs/playwright/website/bare-btn-focus/index.qmd

@@ -0,0 +1,7 @@
+---
+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.

tests/integration/playwright/tests/html-focus-indicator-bare-btn.spec.ts

@@ -0,0 +1,76 @@
+import { expect, Locator, Page, test } from "@playwright/test";
+import { getUrl } 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`.
+
+// Move focus with real Tab presses so the button matches :focus-visible —
+// the fix only applies to keyboard focus, and programmatic locator.focus()
+// does not reliably match :focus-visible. WebKit follows Safari's default
+// of skipping buttons on Tab; Option+Tab visits every focusable element.
+async function tabUntilFocused(
+  page: Page,
+  browserName: string,
+  target: Locator,
+  maxTabs = 25,
+): Promise<boolean> {
+  const tabKey = browserName === "webkit" ? "Alt+Tab" : "Tab";
+  for (let i = 0; i < maxTabs; i++) {
+    await page.keyboard.press(tabKey);
+    if (await target.evaluate((el) => el === document.activeElement)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+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");
+    });
+  }
+});