raystack / raystack/chronicle

a11y: add skip-to-content link, ARIA tree roles for sidebar, and alt text for diagrams

Open
#140 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2
Forks
1
Avg merge
12h 29m
Merged PRs (30d)
12

Description

Problem

Several accessibility gaps across both themes:

  1. No skip-to-content link — keyboard users must tab through the entire sidebar/nav to reach content
  2. 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.
  3. Search result icons have no aria-labels — the document/hashtag/code icons are decorative but convey meaning (page vs heading vs API result)
  4. 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>`

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

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.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.