Skip to content

🎨 Palette: Add aria-label and title to markdown TOC button #539

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VaiTon wants to merge 2 commits into
base: main
Choose a base branch
from
+7 −4
Open

🎨 Palette: Add aria-label and title to markdown TOC button #539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b4b5704
UX: Add aria-label and title to markdown TOC toggle button
google-labs-jules[bot] Mar 17, 2026
e5c2748
Fix unused CSS selector warnings in asciidoc page
google-labs-jules[bot] Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
## 2025-03-09 - Accessible Markdown TOC Button

@ali-benny ali-benny Mar 17, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

serve il SPDX anche qui?

@VaiTon VaiTon Mar 18, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Per completezza si, però non claimerei nessun diritto (quindi tipo CC0)


**Learning:** Found an icon-only button to toggle the table of contents in `src/routes/[...dir]/[file=markdown]/+page.svelte` without an `aria-label` or `title`. Sighted users would not know what it does until they click it, and screen readers would read it as a generic, unhelpful button.
**Action:** Add `aria-label="Toggle table of contents"` and `title="Toggle table of contents"` to improve both screen reader accessibility and visual clarity (with a tooltip).
5 changes: 1 addition & 4 deletions src/routes/[...dir]/[file=asciidoc]/+page.svelte
View file
Open in desktop

@VaiTon VaiTon Mar 18, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Not part of this pr. Revert

Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
// @ts-expect-error - katex auto-render is not typed
import autoRender from 'katex/dist/contrib/auto-render.mjs';
import tocbot from 'tocbot';
import 'katex/dist/katex.css';

let { data }: { data: PageData } = $props();

Expand Down Expand Up @@ -49,7 +50,3 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</section>
<section class="prose" id="toc" role="contentinfo"></section>
</main>

<style>
@import 'katex/dist/katex.css';
</style>
2 changes: 2 additions & 0 deletions src/routes/[...dir]/[file=markdown]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
menuOpen = !menuOpen;
}}
class="btn btn-ghost text-2xl"
title="Toggle table of contents"
aria-label="Toggle table of contents"
>
{#if menuOpen}
<IconMaterialSymbolsCloseRounded class="w-6 h-6" />
Expand Down
Loading