Skip to content

Improve toc button accessibility#9797

Open
pmario wants to merge 2 commits intoTiddlyWiki:masterfrom
pmario:improve-toc-button-accessibility
Open

Improve toc button accessibility#9797
pmario wants to merge 2 commits intoTiddlyWiki:masterfrom
pmario:improve-toc-button-accessibility

Conversation

@pmario
Copy link
Copy Markdown
Member

@pmario pmario commented Apr 9, 2026

This PR fixes the TOC empty button problem mentioned in issue

pmario and others added 2 commits April 9, 2026 21:08
The TOC chevron buttons contain only an SVG icon with no accessible
name. Screen readers announce them as bare "button" with no hint of
purpose, making keyboard/screen-reader navigation of the sidebar
table of contents impossible.

Added aria-label="expand" and aria-label="collapse" to all 10
toggle buttons across the four expandable TOC body procedures.
Uses plain English strings for now — proper i18n via language
tiddlers can follow as a separate task.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move expand/collapse buttons out of link elements in linked TOC
variants so screen readers announce them as separate interactive
controls instead of merging button and link text.

- Move buttons outside $link in toc-linked-expandable-body and
  toc-linked-selective-expandable-body
- Add dynamic aria-labels with tiddler title (e.g. "expand Introduction")
- Add tabindex="-1" to blank placeholder buttons to skip them in tab order
- Wrap button+link in div.tc-toc-item-row to preserve tabbed TOC styling
- Restyle tabbed TOC CSS to target .tc-toc-item-row instead of > a

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify bot commented Apr 9, 2026

Deploy Preview for tiddlywiki-previews ready!

Name Link
🔨 Latest commit bfa220d
🔍 Latest deploy log https://app.netlify.com/projects/tiddlywiki-previews/deploys/69d803e0645e6a0008cc94ab
😎 Deploy Preview https://deploy-preview-9797--tiddlywiki-previews.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 9, 2026

Confirmed: pmario has already signed the Contributor License Agreement (see contributing.md)

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