a11y: website sidebar toggles and page links are too small for WCAG 2.5.8

阅读 src/resources/projects/website/navigation/quarto-nav.scss 中 issue 引用的 .sidebar-item 和 .sidebar-item-toggle 规则附近的内容。调整目标尺寸和项目间距，以满足 WCAG 2.5.8，同时保留所述的行行为。然后渲染提供的网站复现，并测量侧边栏目标在 320px 和 1280px 下的尺寸。当每个目标在两个宽度下都满足尺寸或间距要求时，即为完成。

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

In the website sidebar, two kinds of targets fail
WCAG 2.5.8 Target Size (Minimum):

• Section toggles (the chevron next to a section that has an href) are
  20.4 × 18 px. The toggle shares an edge with the section link, so the 24px
  spacing exception does not apply. The link and the toggle do different
  things, so the "equivalent" exception does not apply either.
• Page links are 17 px tall, and their centres are 23.8 px apart. The
  24px circles of two adjacent links overlap by 0.2 px. This is a fail by a
  very small margin.

Sections without an href (one button for the label and the chevron) pass on
spacing.

On quarto.org the values are almost the same: toggles 20.4 × 18.8 px, links
17.0 px tall at a 23.8 px pitch (Safari 27 and Chrome, at 320px and 1280px).

Related: #14826 made the toggles into buttons. Open PR #14867 deletes the
toggle :focus-visible rule, which is next to the lines below. The fix below
does not touch that rule.

Cause

In quarto-nav.scss,
.sidebar-item has line-height: 1rem, margin-top: 0.4rem, and
margin-bottom: 0.2em. These give the 17px link height and the 23.8px pitch.

The toggle has padding: 0
and a 0.7rem icon,
so it is only as big as the icon and its ms-2 margin.

Possible fix

// Make the toggle a 24px target without a change to the row height:
// the negative margins cancel the extra height.
.sidebar-item .sidebar-item-toggle:not(.sidebar-item-text) {
  min-width: 24px;
  min-height: 24px;
  margin-block: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}

.sidebar-item {
  margin-top: 0.45rem; // was 0.4rem: link pitch goes from 23.8px to 24.6px
}

I injected this CSS into the rendered repro below and measured it with
Chrome Headless at 320px and 1280px:

• All targets pass at both widths.
• Toggles are 24 × 24 px. Page links are 24.6 px apart.
• The rows with a toggle keep their height. The chevron stays on the first
  line of a section name that wraps.
• The list gets 0.8 px longer per item.
• Toggles are 3.6 px wider, so a long section name can wrap one word earlier.

The :not(.sidebar-item-text) excludes the full-width button of a section
without an href. That button already passes.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  sidebar:
    contents:
      - text: "Home"
        href: index.qmd
      - section: "Guide"
        href: index.qmd
        contents:
          - text: "page-a"
            href: index.qmd
          - text: "page-b"
            href: index.qmd
      - section: "Reference"
        contents:
          - text: "page-c"
            href: index.qmd
          - text: "page-d"
            href: index.qmd

index.qmd:

---
title: Home
---

Text.

1. Render the project and open _site/index.html.
2. In the browser console, run
   document.querySelector('#quarto-sidebar .sidebar-item-toggle').getBoundingClientRect().
3. Do the same for the "page-a" and "page-b" links.

Actual behavior

Target	Size (px)	Result
"Guide" toggle	20.4 × 18.0	Fail: 24px circle overlaps the "Guide" link
page-a, page-b, page-c, page-d links	205 × 17.0, 23.8 px apart	Fail: circles overlap by 0.2 px
"Reference" button (no href)	213 × 18.0	Pass on spacing

The values are the same at 320px and 1280px.

Expected behavior

Each target is at least 24 × 24 px, or it has the spacing that
2.5.8 requires.

Your environment

• IDE: none (rendered from the terminal)
• OS: macOS 27.0 (build 26A428)
• Browsers: Safari 27 (manual test on quarto.org), Chrome Headless (repro)

Quarto check output

Quarto 1.11.6
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/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.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.11.6
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.04
      Chrome Headless Shell: 150.0.7871.115
      VeraPDF: 1.28.2

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

[✓] Checking Chrome Headless....................OK
      Using: Chrome Headless Shell installed by Quarto
      Path: /Users/charlottewickham/Library/Application Support/quarto/chrome-headless-shell/chrome-headless-shell-mac-arm64/chrome-headless-shell
      Version: 150.0.7871.115

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

[✓] Checking R installation...........OK
      Version: 4.6.0
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/charlottewickham/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.12.2
      Path: /Users/charlottewickham/.pyenv/versions/3.12.2/bin/python3
      Jupyter: 5.9.1
      Kernels: python3

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

[✓] Checking Julia installation...

The investigation used AI tools, grounded in a local clone of quarto-cli.