fix: improve chart and tab accessibility

[5affron]

Description

Improve chart and tab accessibility in the analytics dashboard.

• Improve accessibility for charts and tabs.
• Make dashboard navigation easier to use.
• Keep the existing dashboard behavior and data unchanged.

Related issue(s)

Fixes #326

Testing

• Ran uv run pytest successfully.
• Ran the analytics pipeline locally.
• Generated the dashboard data successfully.
• Ran the local web dashboard and verified that it loads correctly.
• Verified the generated Data API contains both hiero-ledger and hiero-hackers.

Checklist

• I claimed the linked issue with /assign before starting
• uv run pytest and the relevant checks pass locally
• Tests are added/updated for the change, where applicable
• Commits are signed and signed-off: git commit -S -s
• Docs updated if relevant

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro Plus

Run ID: beaf982e-ea54-4ed8-bbb6-1bc982826cd4

📥 Commits

Reviewing files that changed from the base of the PR and between dc57bb8 and 5e1d96c.

📒 Files selected for processing (2)

• web/src/components/ChartSectionCard.tsx
• web/src/test/app.test.tsx

💤 Files with no reviewable changes (1)

• web/src/test/app.test.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

Walkthrough

The PR adds variant-aware alt text for chart images and lightbox content. It also adds aria-pressed to chart variant buttons and application tabs. Tests verify the chart variant pressed states and month-specific lightbox image.

Changes

Accessibility updates

Layer / File(s)	Summary
Variant-aware chart rendering web/src/components/ChartSectionCard.tsx, web/src/test/app.test.tsx	Chart image and lightbox alt text include the selected variant label for multi-variant charts. Chart variant buttons expose their pressed state. Tests verify the year and month states and the month-specific image.
Application tab pressed state web/src/components/TabBar.tsx	Each application tab button exposes whether it matches the active tab through aria-pressed.

Merge Risk: ⚪ Minimal · up to 5e1d9

This PR makes localized chart and tab accessibility improvements while preserving existing dashboard behavior and data. No actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 73.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 15 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: improved chart and tab accessibility.
Description check	✅ Passed	The description directly explains the accessibility changes and states that existing behavior and data remain unchanged.
Linked Issues check	✅ Passed	The changes satisfy issue #326 by adding variant-aware chart and lightbox alt text, exposing active states with aria-pressed on chart and TabBar buttons, and updating tests. The reported build, test, …
Out of Scope Changes check	✅ Passed	The changes remain focused on chart and tab accessibility. The additional formatting and call-site updates are described as behavior-preserving support changes within the affected components.

Full details: Linked Issues check

Explanation

The changes satisfy issue #326 by adding variant-aware chart and lightbox alt text, exposing active states with aria-pressed on chart and TabBar buttons, and updating tests. The reported build, test, and lint validation also matches the issue requirements.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[MonaaEid]

Hi @5affron, it looks like you’ve pushed the commit from another PR into this one

[github-actions]

📊 Dashboard preview

The dashboard was built for this PR.

➡️ Download dashboard-preview-422, unzip, then serve it with python3 -m http.server -d . and open the URL it prints. (The app fetches its data over HTTP, so opening index.html directly shows an empty page.)

The artifact is built from this PR — treat it as contributor-authored code and glance at the diff before opening it. It expires after 7 days and is replaced on each new push.

[exploreriii]

Hi @5affron
Please check for code quality please, as the code base grows we will get growign pains with maintainability issues

[5affron]

@exploreriii Thanks for the review. I addressed this by extracting the shared activeVariant and chartAlt helpers so the chart and lightbox use the same variant handling without duplicating the logic. I also cleaned up the test assertions to avoid duplicating the pressed-state checks. Full tests, build, and lint pass with no lint errors.

[5affron]

Hi @exploreriii, @mgarbs, @MonaaEid — I’ve gone through the comments and made the requested changes.

I removed the unrelated changes, cleaned up the repeated logic by moving it into helpers, and simplified the test that was checking the same thing twice.

I also ran the checks locally — Ruff, formatting, oxlint, the build, and all 62 tests are passing.

The PR is now updated with only the intended changes. If there’s anything else you think needs to be taken care of, please let me know here and I’ll take a look. Thanks for the feedback!

[phillip-nyinomujuni]

Author already addressed the maintainability feedback from the last round (helper extraction, deduped test assertions) confirmed via diff, not re-raising that. The alt text fix and aria-pressed addition both look correct and are covered by tests. Ruff/lint/build reported clean per the author's comment. No new blocking issues from me — approving.

[exploreriii]

Please check GPG key signing @5affron

[exploreriii]

@5affron rebase please to avoid the conflict, else we will probably append a commit ASAP to do so

stale