Code block copy button has no visible indicator on keyboard focus

[glin]

Bug description

Minor accessibility issue: when navigating to the Copy button within a code block using a keyboard, there's no visual indicator that the button has been focused.

In Quarto 1.6.39, the copy button doesn't appear at all. Here, I have keyboard focus on the copy button:

https://docs.posit.co/connect/2025.01.0/admin/r/#disabling-r-support

---

In the current Quarto docs, it seems that the Copy button is now always visible, which is a nice change. I'm not sure if that was a change in a later Quarto version or if this is a config option somewhere.

However, there is still no visible indicator that you have focus on the Copy button. Here I have keyboard focus on the first copy button, but it's visibly indistinguishable:

https://quarto.org/docs/output-formats/html-code.html#hiding-code

Steps to reproduce

1. Navigate to any code block using your keyboard

• https://docs.posit.co/connect/2025.01.0/admin/r/#disabling-r-support for an example similar to what we're seeing with Quarto 1.6.39. I'm not sure which Quarto version this site is using exactly.
• https://quarto.org/docs/output-formats/html-code.html#hiding-code for an example of the different copy button style that's always visible. I'm not sure which Quarto version this is

2. Press the Tab key until keyboard focus reaches the code block's Copy button.

Actual behavior

There is no visual indicator that the button is focused. The copy button will still be operable though - you can still use Enter/Space to click it.

Expected behavior

There should be a visual indicator that the copy button is focused. Ideally something that's not purely a change to color (which I've seen in doc sites before and has issues). I think the usual button focus outline is pretty common to see on doc sites. For example, on this MkDocs Material site: https://docs.posit.co/rspm/2024.11.0/admin/getting-started/installation/installing-ppm/#initial-configuration

Your environment

No response

Quarto check output

$ quarto check
Quarto 1.6.39
[✓] Checking environment information...
      Quarto cache location: /root/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.6.39
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.4
      Path: /opt/python/3.12.4/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

      There is an unactivated Python environment in .venv-uv. Did you forget to activate it?

[✓] Checking R installation...........OK
      Version: 4.3.3
      Path: /opt/R/4.3.3/lib/R
      LibPaths:
        - /opt/R/4.3.3/lib/R/library
      knitr: 1.49
      rmarkdown: 2.29

[✓] Checking Knitr engine render......OK

[mcanouil]

Quarto.org uses the pre-release 1.7.13.
The Quarto version used is stored in as meta in the header of the HTML page.

<meta name="generator" content="quarto-1.7.13">

[mcanouil]

Note that copy-button is documented at https://quarto.org/docs/output-formats/html-code.html#copy-button
The difference of behaviours you see is based on this setting not the Quarto version being used.

Note also, that you can use the "edit this page" on Quarto.org to see the source code of the page which shows that the page does not use the default but code-copy: true instead.

[cderv]

Thanks for the feedback @glin !

We need to tweak copy button insertion to get the right browser inserted outline on focus-visible.

Bootstrap has a specific helper https://getbootstrap.com/docs/5.3/helpers/focus-ring/ but not sure we need this; I'll have a look

I noticed we have explicit removal in our SCSS currently

quarto-cli/src/resources/formats/html/_quarto-rules-copy-code.scss

Lines 12 to 14 in ffb8c3d

	.code-copy-button:focus {
	outline: none;
	}

This is preventing the :focus-visible to apply even when code-copy: true

So I need to see what could be done to adapt.

[glin]

@mcanouil Thanks for the pointers! I'm brand new to Quarto so these are very helpful. and also good to know about that config option.

@cderv I see, so when I manually remove that styling rule, the copy button focus works exactly as I'd expect. Keyboard focus turns on the focus outline, and mouse focus still keeps the focus outline hidden. Looks like there's already another rule that turns off outlines for mouse-only :focus.