Skip to content

a11y: fix keyboard navigation for tabset panels in websites when using an HTML theme #13233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

glin
Copy link

@glin glin commented Aug 17, 2025

Description

Proposed fix for #10284 that I've tested and confirmed works, but I don't know if it's the right solution. Feel free to edit or discard, and I didn't add tests because I'm not sure how this could be tested.

Add empty href="" attributes to Bootstrap tabset panel tabs to make the anchor elements keyboard accessible.

A weird thing is this never affected tabset panels in standalone HTML documents, only websites. Both formats seem to use the same bootstrapTabs() function, but the tabs in standalone HTML docs have an empty href="" that gets added by something else I could not figure out. Perhaps Pandoc is auto-fixing those anchors, but no idea why it doesn't happen for websites.

To test this, create a website:

quarto create project website mysite

Copy this into into index.qmd and render it:

---
title: "mysite"
---

::: {.panel-tabset}

## First tab

1. Press Tab. "First tab" should be focused.
2. Press Right Arrow. "Second tab" should now be active and focused.

## Second tab

Other text might go here

:::

Press Tab and the tabset panel tab should now be focused.

Checklist

I have (if applicable):

  • filed a contributor agreement. (not sure if I need to do this for a <1 line change)
  • referenced the GitHub issue this PR closes
  • updated the appropriate changelog in the PR
  • ensured the present test suite passes
  • added new tests
  • created a separate documentation PR in Quarto's website repo and linked it to this PR

@posit-snyk-bot
Copy link
Collaborator

posit-snyk-bot commented Aug 17, 2025

🎉 Snyk checks have passed. No issues have been found so far.

security/snyk check is complete. No issues have been found. (View Details)

license/snyk check is complete. No issues have been found. (View Details)

@cscheid
Copy link
Collaborator

cscheid commented Aug 19, 2025

A weird thing is this never affected tabset panels in standalone HTML documents, only websites. Both formats seem to use the same bootstrapTabs() function, but the tabs in standalone HTML docs have an empty href="" that gets added by something else I could not figure out. Perhaps Pandoc is auto-fixing those anchors, but no idea why it doesn't happen for websites.

Quarto's HTML processing doesn't stop at the Pandoc HTML output; we have a fairly extensive set of post-processing steps that happen in Typescript. Some of these steps happen uniquely for websites. I think that's what's causing it.

@cscheid cscheid added this to the v1.8 milestone Aug 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants