Skip to content

a11y: make the sidebar button a <button> - #14326

Open
hugovk wants to merge 4 commits into
sphinx-doc:masterfrom
hugovk:sidebar-button
Open

hugovk wants to merge 4 commits into
sphinx-doc:masterfrom
hugovk:sidebar-button

Conversation

@hugovk

@hugovk hugovk commented Feb 28, 2026

Copy link
Copy Markdown
Contributor

Purpose

The sidebar button should be a semantic <button> and not a <div>.

This is needed for accessibility via keyboard and assistive technology.

For example, try this before and after this fix:

cd tests/roots/test-tocdepth
rm -rf _build
python -m sphinx -b html -D html_theme=classic -D html_theme_options.collapsiblesidebar=true . _build/html
open _build/html/index.html

Then press tab repeatedly.

Before, the <div> "button" can not be selected: _build-master.zip

After, the real <button> can be selected, and you can press space to open and close the side menu: _build-fixed.zip

References

@hugovk

hugovk commented Feb 28, 2026 •

Copy link
Copy Markdown
Contributor Author

The ty and 3.15 failures are unrelated and also occur in main master.

@gastmaier gastmaier left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Welcome change, useful for both keyboard savvys and people with disabilities :)

@timhoffm timhoffm left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is fundamentally reasonable. However, it is a breaking change for downstream templates.

This will beak users who have styled the button with a div#sidebarbutton CSS filter, e.g. https://github.com/search?q=div%23sidebarbutton+language%3ACSS+NOT+is%3Afork&type=code

This needs a prominent change note and advice to change the style filter to #sidebarbutton.

@hugovk

hugovk commented Mar 6, 2026

Copy link
Copy Markdown
Contributor Author

Added!

I put 9.2.0 as the version, but I don't mind if this needs a major bump. Some other semantic improvements have been done as bug fixes: #13689.

@themavik themavik left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: add type="button" on #sidebarbutton so it does not default to submit if this block ever sits inside a <form>.

Comment thread sphinx/themes/classic/layout.html Resolved
@hugovk

hugovk commented Sep 10, 2026

Copy link
Copy Markdown
Contributor Author

CI failures are unrelated and are fixed by #14611, which is approved and awaiting merge.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants