Collapsed callouts using invalid ARIA attribute (a11y issue)

[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

• [X] 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.
• [X] 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.
• [X] Please provide the output of quarto check so we know which version of quarto and its dependencies you're running.

[cscheid]

Thanks for the report! We're just about to start the 1.3 release candidate, so I'm putting this to 1.4, but we'll def fix it there.

[batpigandme]

Thanks @cscheid—incoming one for a similar pattern issue with the toggles in the left sidebar menu (should also be a button). @gtritchie has thankfully provided a very nice pattern for the fix!

[gtritchie]

Looking at this again, the accordion pattern may be a closer fit than the disclosure approach: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.