Skip to content

Collapsed callouts using invalid ARIA attribute (a11y issue) #4934

@batpigandme

Description

@batpigandme

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.

Metadata

Metadata

Assignees

Labels

accessibilitybugSomething isn't workingearly-in-releaseAn issue that should be worked on early in the release (likely due to risk)

Type

No type
No fields configured for issues without a type.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions