a11y: add skip-to-content link, ARIA tree roles for sidebar, and alt text for diagrams
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 50/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- accessibility, frontend
Research direction
Start by locating the two theme layouts, the sidebar navigation, search result type icons, and Mermaid code-block rendering mentioned in the issue. Check how each currently handles focus, expandable items, icon labels, and injected SVG; the work is done when keyboard users can skip navigation and screen readers receive the specified roles, labels, and diagram descriptions in both themes.
Written by the indexing model from the issue text.
Description
Problem
Several accessibility gaps across both themes:
- No skip-to-content link — keyboard users must tab through the entire sidebar/nav to reach content
- Sidebar lacks ARIA tree roles — collapsible sidebar items don't use `role="tree"`, `role="treeitem"`, or `aria-expanded`. Screen readers can't navigate the doc structure.
- Search result icons have no aria-labels — the document/hashtag/code icons are decorative but convey meaning (page vs heading vs API result)
- Mermaid diagrams have no alt text — SVG is injected via `dangerouslySetInnerHTML` without `aria-label` or `<title>` element
Suggested Fixes
- Add a visually-hidden skip link as the first focusable element in both theme layouts
- Add `role="tree"` to sidebar ``, `role="treeitem"` + `aria-expanded` to collapsible folders
- Add `aria-label` to search result type icons
- Allow a `alt` or `caption` prop on mermaid code blocks, inject as SVG `<title>`
- Dominant language
- TypeScript
- Stars
- 2
- Forks
- 1
- Avg merge
- 12h 29m
- Merged PRs (30d)
- 12
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from raystack/chronicle
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 4/5 3-5 days Newbie friendliness 65/100
-
Difficulty 4/5 3-5 days Newbie friendliness 48/100
All issues in raystack/chronicle
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
bug v2
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
modelcontextprotocol/inspector#2458 · 1 comment ·
-
Difficulty 1/5 Under an hour Newbie friendliness 75/100
railmapgen/rmp-gallery#4068 ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
carbon-design-system/ibm-products#9907 ·