Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions news/changelog-1.11.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
All changes included in 1.11:

## Formats

### `html`

- ([#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.

## Engines

### `knitr`
Expand Down
10 changes: 10 additions & 0 deletions src/resources/formats/html/bootstrap/_bootstrap-rules.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1038,6 +1038,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-secondary-nav .quarto-btn-toggle:focus-visible,
.quarto-secondary-nav .quarto-search-button:focus-visible,

@cderv cderv Aug 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we drop the .quarto-secondary-nav prefix from these two selectors? It is the only reason the nav buttons end up with a different override story from the code tools button, and it does not appear to buy anything.

I tested this. Rendering a site with a user SCSS rule setting outline: 3px dashed red on all three selectors, the code tools button picks up the override (same specificity, user rules come later) while the two nav buttons keep the user-agent ring. With the prefix removed and nothing else changed, the override wins on all three. And without any user rule, the unprefixed selectors still beat Bootstrap: outline-style computes to auto on both nav buttons, because Quarto's rules layer already comes after the framework layer, so equal specificity plus later source order is enough.

Scoping is not lost either I think. Both buttons are emitted in exactly one place, nav-before-body.ejs, and only ever inside .quarto-secondary-nav.

That would leave all three buttons overridable the same way, and the description would no longer need the caveat about authors having to match the new specificity.

Did you check about this maybe ?

.code-tools-button:focus-visible {
outline: revert;
}

.code-tools-button {
font-size: 1rem;
padding: 0.15rem 0.15rem;
Expand Down
14 changes: 14 additions & 0 deletions tests/docs/playwright/html/code-tools-focus-indicator.qmd
Original file line number Diff line number Diff line change
@@ -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
```
19 changes: 19 additions & 0 deletions tests/docs/playwright/website/bare-btn-focus/_quarto.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
project:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixture needs a .gitignore, otherwise rendering it leaves an untracked _site/ behind (plus the .gitignore Quarto generates for .quarto/). The driver calls cleanoutput() without projectOutDir, so it cannot clean a project render — which is why the neighbouring website fixture ships one:

https://github.com/quarto-dev/quarto-cli/blob/456e129742a31cb10298dea2c3fb693dd0c0504d/tests/docs/playwright/website/issue-14667/.gitignore

/.quarto/
/_site/

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
5 changes: 5 additions & 0 deletions tests/docs/playwright/website/bare-btn-focus/about.qmd
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
title: "About"
---

Second page so the sidebar has more than one entry.
7 changes: 7 additions & 0 deletions tests/docs/playwright/website/bare-btn-focus/index.qmd
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -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";

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a change request, just a note for the record: on the Windows WebKit build the three tests also pass with a plain Tab, so the Safari tab-order behaviour the comment describes does not reproduce there. Alt+Tab passes as well and CI runs on Linux, so I would leave this as is — worth knowing if it ever gets flaky.

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");
});
}
});
Loading