-
Notifications
You must be signed in to change notification settings - Fork 455
Restore keyboard focus indicator on bare .btn buttons #14785
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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 | ||
| ``` |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| project: | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This fixture needs a |
||
| 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 | ||
| 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. |
| 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"; | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
||
| 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"); | ||
| }); | ||
| } | ||
| }); | ||
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
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-navprefix 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 redon 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-stylecomputes toautoon 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 ?