Code copy button icon ignores the button colour

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,303 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, html, scss
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu với src/resources/formats/html/_quarto-rules-copy-code.scss, được liên kết trong issue, rồi kiểm tra các quy tắc của biểu tượng sao chép và đã sao chép, bao gồm cả các biến thể khi di chuột. Báo cáo xác định phần tô màu SVG đã biên dịch là nguyên nhân và đề xuất dùng mặt nạ với currentColor. Hoàn thành khi cả hai biểu tượng đều theo màu CSS của nút trên mọi giao diện và trạng thái di chuột, kể cả trên khối mã tối.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

accessibility bug code-blocks html themes
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

Quarto draws the copy button icon as a background-image SVG with its fill set at compile time from $btn-code-copy-color.
A background image can't read currentColor, so the icon keeps that compiled grey whatever colour the button gets in CSS.

This matters when a code block doesn't use the page's code background.
A dark "terminal" block on a light page is a common case.
Setting color on .code-copy-button is the natural fix, but the icon doesn't follow it.
On the dark block below, the icon is rgb(94, 94, 94) on rgb(17, 20, 24), which is 2.85:1 and under the 3:1 that WCAG 2.2 Success Criterion 1.4.11 asks for.

The same applies to the copied (check) icon and to the hover variants.

Steps to reproduce
---
title: "Copy button icon colour"
format:
  html:
    theme:
      light: default
      dark: darkly
    include-in-header:
      text: |
        <style>
        pre.dark-block,
        div.sourceCode:has(> pre.dark-block) {
          background-color: #111418;
          color: #e6e8eb;
        }
        .code-copy-outer-scaffold:has(pre.dark-block) .code-copy-button {
          color: #e6e8eb;
        }
        </style>
---

```{.bash .dark-block}
echo "hello"
```

Render it, hover the code block, and look at the copy button.

Actual behavior

The button computes color: rgb(230, 232, 235), but its .bi::before still paints the compiled icon:

background-image: url('data:image/svg+xml,<svg ... fill="rgb(94, 94, 94)" ...>');

The icon is grey on the dark block in both colour schemes.

Grey copy icon on a dark code block, barely visible

Expected behavior

The icon follows the colour of the button, so a theme or a page can recolour it with color alone.
Drawing the icon as a mask-image over background-color: currentColor would do this, and $btn-code-copy-color could then set the button's color instead of the SVG fill.

Your environment
  • IDE: none, the document is rendered with quarto render in a terminal.
  • OS: macOS 27.2 (Apple Silicon).
  • Browser: Brave (Chromium).
  • Quarto: a development build at 089ba530, which contains the v1.12.0 pre-release; _quarto-rules-copy-code.scss is the same in v1.11.9, v1.12.0, and on main.
Quarto check output
Quarto 99.9.9

[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
      Project: none found (single-file mode)

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.107.1: OK
      Deno version 2.9.8: OK
      Typst version 0.15.1: OK

[✓] Checking versions of quarto dependencies......OK

[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 089ba530b3ed4ec156a355d41b6b7de2db3e44ea
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.07
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
      Version: 2026

[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

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

ℹ R version 4.6.1 (2026-06-24)
! Config '~/.Rprofile' was loaded!

[✓] Checking R installation...........OK
      Version: 4.6.1
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/mcanouil/Library/R/arm64/4.6/library
        - /Library/Frameworks/R.framework/Versions/4.6/Resources/library
      knitr: 1.51
      rmarkdown: 2.31

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

[✓] Checking Python 3 installation....OK
      Version: 3.9.6
      Path: /Library/Developer/CommandLineTools/usr/bin/python3
      Jupyter: (None)

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

[✓] Checking Julia installation...
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
478
Merge trung bình
17 giờ 53 phút
Pull request đã merge (30 ngày)
135

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.