feat: charts a11y improvements by graphieros · Pull Request #2193 · npmx-dev/npmx.dev

graphieros · 2026-03-22T11:13:13Z

This PR is part of #2153

Bump vue-data-ui to 3.16.0 (release notes)
- keyboard navigation in the chart areas to cycle through datapoints when charts are in focus
- sr hidden data tables & hints
Add translations for hints & sr sections
Update focus styles

Updated charts:

sparkline (weekly downloads on package page)
downloads chart in modal (package page)
versions chart in modal (package page=
downloads charts (compare page)
bar charts (compare page)

vercel · 2026-03-22T11:13:19Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 8:22pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 8:22pm
npmx-lunaria	Ignored		Mar 22, 2026 8:22pm

github-actions · 2026-03-22T11:13:57Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.
i18n/locales/fr-FR.json	Localization changed, will be marked as complete.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

coderabbitai · 2026-03-22T11:15:03Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 179646a8-7512-4612-a6d2-e759085bcf10

📥 Commits

Reviewing files that changed from the base of the PR and between 245b76e and 6a14e76.

📒 Files selected for processing (7)

app/components/Compare/FacetBarChart.vue
app/components/Package/TrendsChart.vue
app/components/Package/VersionDistribution.vue
app/components/Package/WeeklyDownloadStats.vue
i18n/locales/en.json
i18n/locales/fr-FR.json
i18n/schema.json

✅ Files skipped from review due to trivial changes (4)

app/components/Package/WeeklyDownloadStats.vue
i18n/locales/fr-FR.json
i18n/locales/en.json
i18n/schema.json

🚧 Files skipped from review as they are similar to previous changes (3)

app/components/Package/VersionDistribution.vue
app/components/Compare/FacetBarChart.vue
app/components/Package/TrendsChart.vue

📝 Walkthrough

Walkthrough

This PR adds accessibility support to several chart components (FacetBarChart, TrendsChart, VersionDistribution, WeeklyDownloadStats) by injecting a11y.translations into chart configs, adding conditional hint slots for keyboard-navigation hints, and adding scoped :focus-visible styling. It updates English and French i18n files and the i18n schema for the new keys, and bumps vue-data-ui from 3.15.12 to 3.16.0.

Possibly related issues

charts a11y improvements #2153: Implements the chart accessibility behaviour (keyboard navigation hints, hint slots and screen-reader/table support) described in this issue.

Possibly related PRs

fix: tweak versions chart config #1365: Modifies chartConfig in VersionDistribution.vue — overlaps with this PR’s changes to that component’s configuration.
fix: handle CLS issues in chart modal #2032: Modifies TrendsChart.vue chartConfig and container logic — touches the same template/config area updated here.
feat(a11y): use seeded patterns in bar charts #2157: Modifies FacetBarChart.vue — intersects with this PR’s accessibility, hint-slot and focus-styling changes to that component.

Suggested labels

front, needs review

Suggested reviewers

knowler
shuuji3
danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing vue-data-ui upgrade, translations addition, focus style updates, and specific charts modified.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch vue-data-ui-a11y-updates

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

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

…v/npmx.dev into vue-data-ui-a11y-updates

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/components/Package/VersionDistribution.vue (1)
688-692: Prefer global focus-visible styling for button-like controls.

These local rules for user-options controls should be centralised in the global focus-visible styling layer to avoid drift across chart components.
♻️ Suggested change
-:deep(.vue-ui-user-options-button:focus-visible),
-:deep(.vue-ui-user-options :first-child:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
-  border-radius: 0.25rem;
-}
Based on learnings: In the npmx.dev project, focus-visible styling for button and select elements is implemented globally in `app/assets/main.css` and components should rely on that global rule.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 34944309-c7de-4246-9413-d9f1d31ced47

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2fc1a and 548e06c.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (8)

app/components/Compare/FacetBarChart.vue
app/components/Package/TrendsChart.vue
app/components/Package/VersionDistribution.vue
app/components/Package/WeeklyDownloadStats.vue
i18n/locales/en.json
i18n/locales/fr-FR.json
i18n/schema.json
package.json

i18n/schema.json

codecov · 2026-03-22T14:44:26Z

Codecov Report

❌ Patch coverage is 66.66667% with 7 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/VersionDistribution.vue	20.00%	3 Missing and 1 partial ⚠️
app/components/Package/WeeklyDownloadStats.vue	50.00%	2 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

alexdln

Wow, I love it (I'm one of those keyboard person)

I think for even better accessibility, would be usable to provide a text hint somewhere on focused element. Either via an aria-label on the SVG itself, or focus specifically on the text element (with title?). Perhaps would be usable additionally update the text or change focus on next point label on tabing. Maybe @knowler can suggest how this might work, because I'm not sure about exact implementation and don't think those suggestion will work.

Anyway it looks good and is already a great improvement, thanks 🤍

graphieros · 2026-03-22T19:58:29Z

Anyway it looks good and is already a great improvement, thanks 🤍

Thank you @alexdln :)

This is part of gradual a11y improvements, and I know it can be even better.
I would suggest to ship this for a start, at least we have kbd navigation, then I can continue to improve (and learn notably from @knowler).

i18n/locales/en.json

graphieros added 5 commits March 22, 2026 11:54

chore: bump vue-data-ui from 3.15.12 to 3.16.0

6aad7fd

feat: add translations

80925c0

feat: update charts with keyboard navigation & hints

6f5ff46

feat: add translations

bf4a657

feat: implement translations for chart sr sections

92cd89d

[autofix.ci] apply automated fixes

c625c90

graphieros added 2 commits March 22, 2026 12:15

fix: use proper translation key

d471eb6

Merge branch 'vue-data-ui-a11y-updates' of https://github.com/npmx-de…

548e06c

…v/npmx.dev into vue-data-ui-a11y-updates

vercel bot deployed to Preview – npmx.dev March 22, 2026 11:18 View deployment

fix: schema

245b76e

vercel bot deployed to Preview – npmx.dev March 22, 2026 11:23 View deployment

coderabbitai bot reviewed Mar 22, 2026

View reviewed changes

i18n/schema.json Outdated Show resolved Hide resolved

alexdln approved these changes Mar 22, 2026

View reviewed changes

ghostdevv requested changes Mar 22, 2026

View reviewed changes

i18n/locales/en.json Outdated Show resolved Hide resolved

graphieros and others added 2 commits March 22, 2026 21:19

fix: use readable translation keys

fa48ca7

[autofix.ci] apply automated fixes

6a14e76

vercel bot deployed to Preview – npmx.dev March 22, 2026 20:22 View deployment

ghostdevv approved these changes Mar 22, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: charts a11y improvements#2193

feat: charts a11y improvements#2193
graphieros wants to merge 11 commits intomainfrom
vue-data-ui-a11y-updates

graphieros commented Mar 22, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 22, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 22, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 22, 2026 •

edited

Loading

Walkthrough

Possibly related issues

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

codecov bot commented Mar 22, 2026

Uh oh!

alexdln left a comment

Uh oh!

graphieros commented Mar 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

graphieros commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

coderabbitai bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related issues

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov bot commented Mar 22, 2026

Codecov Report

Uh oh!

alexdln left a comment

Choose a reason for hiding this comment

Uh oh!

graphieros commented Mar 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

graphieros commented Mar 22, 2026 •

edited

Loading

vercel bot commented Mar 22, 2026 •

edited

Loading

github-actions bot commented Mar 22, 2026 •

edited

Loading

coderabbitai bot commented Mar 22, 2026 •

edited

Loading