Skip to content

Move "Choose your tool" out of the tools-tabset tablist - #2233

Draft
cwickham wants to merge 1 commit into
mainfrom
fix/tools-tabset-tablist-label
Draft

cwickham wants to merge 1 commit into
mainfrom
fix/tools-tabset-tablist-label

Conversation

@cwickham

Copy link
Copy Markdown
Member

The tools-tabset filter puts a <h3>Choose your tool</h3> inside the ul[role=tablist]. A tablist can contain only tabs, so axe reports a critical aria-required-children error on three pages (docs/books/, docs/websites/, docs/websites/website-blog.html). The h3 also adds an empty "Choose your tool" entry to the heading outline of each page.

This PR:

  • adds aria-label="Choose your tool" to the tablist.
  • shows the text as <p aria-hidden="true"> outside the list, in a flex row with the tabs.

At desktop width, the tabs look the same as before. At 320px, the label is now on its own row, above a 2×2 grid of tabs.

An axe scan of the three pages, before and after the change, removes aria-required-children :: .nav (3 instances) and shows no new findings.

@github-actions

Copy link
Copy Markdown
Contributor

📝 Preview Deployment

🔍 Full site preview: https://deploy-preview-2233.quarto.org

This branch has not been deployed

No deployments
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.

1 participant