quarto-dev / quarto-dev/quarto-cli

Collapsed callouts using invalid ARIA attribute (a11y issue)

Open
#4,934 3 comments 0 reactions 1 assignee View on GitHub

@cscheid is already working on this.

Since Mar 23, 2023.

accessibility bug early-in-release
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

Collapsed callouts when rendered use an invalid/inaccessible pattern where the ARIA attribute aria-expanded="false" is invalid [link to axe DevTools issue found when attached qmd is rendered].

From discussion with @gtritchie, they should use the disclosure pattern and be buttons:

Yes, disclosures should be buttons. Currently this is just a <div> with no role, which is what Axe is flagging.
The pattern to implement is this: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
These also need to be keyboard operable. You can't tab to them. Buttons should operate with both spacebar and enter key.

I can't seem to attach the actual qmd, so here it is in a gist
collapsed-callout.qmd

Quarto check output

[✓] Checking Quarto installation......OK
      Version: 1.2.475
      Path: /Applications/quarto/bin

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

[✓] Checking Python 3 installation....OK
      Version: 3.8.11 (Conda)
      Path: /opt/homebrew/Caskroom/miniconda/base/bin/python
      Jupyter: 4.10.0
      Kernels: python3

(|) Checking Jupyter engine render....Unable to load extension: pydevd_plugins.extensions.types.pydevd_plugin_pandas_types
Unable to load extension: pydevd_plugins.extensions.types.pydevd_plugin_pandas_types
[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.2.2
      Path: /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources
      LibPaths:
        - /Users/maraaverick/Library/R/arm64/4.2/library
        - /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library
      rmarkdown: 2.20.1

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

OS independent

Checklist
  • Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
  • Please format your issue so it is easier for us to read the bug report.
  • Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
  • Please document the operating system you're running. If on Linux, please provide the specific distribution.
  • Please provide the output of quarto check so we know which version of quarto and its dependencies you're running.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.