Skip to content

Don't set aria-expanded on the sidebar click area and backdrop - #15230

Open
hippi345 wants to merge 1 commit into
quarto-dev:mainfrom
hippi345:sidebar-collapse-aria
Open

hippi345 wants to merge 1 commit into
quarto-dev:mainfrom
hippi345:sidebar-collapse-aria

Conversation

@hippi345

@hippi345 hippi345 commented Oct 29, 2026 •

Copy link
Copy Markdown

Description

Fixes #15229.

On narrow screens the secondary-bar click area (a.flex-grow-1) and #quarto-sidebar-glass were both data-bs-toggle="collapse" triggers, so Bootstrap wrote aria-expanded on them when the sidebar toggled, and axe flagged aria-allowed-attr.

This drops data-bs-toggle/data-bs-target from both and has them .click() the real .quarto-btn-toggle instead. The button already calls quartoToggleHeadroom(), so the inline call on the click area goes away, and closing via the backdrop now resets headroom as well.

Added a small website fixture and a Playwright spec (html-sidebar-collapse-aria.spec.ts) that opens the sidebar via the button and via the click area, checks that only the button has aria-expanded, and checks that tapping the backdrop closes it and resets the button to false. It fails on main and passes with this change (chromium, locally).

Checklist

I have (if applicable):

  • referenced the GitHub issue this PR closes
  • updated the appropriate changelog in the PR
  • ensured the present test suite passes (ran the new spec and the website focus-indicator specs only)
  • added new tests
  • created a separate documentation PR in Quarto's website repo and linked it to this PR

…ackdrop

On narrow screens the secondary bar click area and #quarto-sidebar-glass
were collapse triggers too, so Bootstrap wrote aria-expanded on them.
Have both forward clicks to the real toggle button instead.

Fixes quarto-dev#15229
@posit-snyk-bot

posit-snyk-bot commented Oct 29, 2026 •

Copy link
Copy Markdown
Collaborator

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

Status Scan Engine Critical High Medium Low Total (0)
✅ Open Source Security 0 0 0 0 0 issues
✅ Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Opening the narrow-screen sidebar sets aria-expanded on the bar click area and the sidebar glass

3 participants