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

[glin]

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]

🎉 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]

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]

@glin Thanks so much for the fix, I can verify it here as well. I'm going to merge your commit in a different PR where I have some regression tests.