Stop screen-reader-only code blocks from being scrollable regions

[cwickham]

The get-started Jupyter pages have screen-reader-only code blocks ({.markdown .visually-hidden}, {.yaml .visually-hidden}). Each block is a 1px box that scrolls, so axe reports scrollable-region-focusable (WCAG 2.1.1) on each one.

• Cause: Quarto's pre.sourceCode { overflow-y: visible !important } beats Bootstrap's .visually-hidden { overflow: hidden !important }. As a result, the box computes to overflow-y: auto.
• Fix: One rule in styles.css gives overflow: hidden !important back to pre.sourceCode.visually-hidden.
• Why here: quarto-cli#14816 will skip these blocks on purpose, and Quarto does not change Bootstrap utility classes that authors can use.

I did an axe scan before and after on the three pages. All 20 instances are gone, and nothing is new or worse. The hidden blocks stay 1×1 and clipped in light and dark mode, at 1440×900 and 320×568.

Check

• https://deploy-preview-2234.quarto.org/docs/get-started/hello/jupyter.html
• https://deploy-preview-2234.quarto.org/docs/get-started/computations/jupyter.html
• https://deploy-preview-2234.quarto.org/docs/get-started/authoring/jupyter.html

[github-actions]

📝 Preview Deployment

🔍 Full site preview: https://deploy-preview-2234.quarto.org