Skip to content

feat(generator): add role, aria-label, and title to root SVG for acce… - #5

Merged
m3hrab merged 1 commit into
m3hrab:mainfrom
raiyan22:feat/svg-accessibility
Sep 8, 2026
Merged

m3hrab merged 1 commit into
m3hrab:mainfrom
raiyan22:feat/svg-accessibility

Conversation

@raiyan22

@raiyan22 raiyan22 commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

What does this PR do?

Adds screen-reader accessibility metadata to the root SVG generated by buildSvg().

  • Adds role="img" to the root <svg>
  • Adds a dynamic aria-label summarizing GitHub contributions and longest streak
  • Adds a <title> element as the first child of the root SVG
  • Works with both full and minimal layouts

Type of change

  • Bug fix
  • New feature (new input, new visual variant, etc.)
  • Documentation
  • Gallery submission (README screenshot)
  • Other

Checklist

  • I ran node src/generate-constellation.js locally and both
    dist/constellation-dark.svg and dist/constellation-light.svg
    generated without errors.
  • If I added/changed an action.yml input, I updated the inputs table in README.md and the DEFAULTS block / doc comment in src/generate-constellation.js.
  • I did not add a new runtime dependency.

Screenshots

Not applicable — this change only adds accessibility metadata and does not change the visual appearance.

Related issues

Closes #3

…ssibility

Add summary to SVG for accessibility and context.

Signed-off-by: Raiyanul Islam <58294098+raiyan22@users.noreply.github.com>
@m3hrab
m3hrab self-requested a review September 8, 2026 09:36

@m3hrab m3hrab left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

PR #5 Review

Approved ✅ - merging now.

@raiyan22 Correct implementation. role="img", aria-label, and <title> added properly. No visual changes.

@yourasmit15-web I noticed your commit 59e7bb4 also addresses the same issue. Appreciate the initiative! Since @raiyan22's PR is already complete and linked to #3, I'm going with this one. Feel free to open a separate PR if you have any additional improvements or a different approach worth exploring.

Minor nit (not blocking):

The summary label currently shows "longest streak 0 days" when a user has no active streak. While this is technically accurate, it might sound a bit awkward. Consider handling this edge case in a follow-up:

const streakText = stats.longest > 0 ? `${stats.longest} days` : 'no streak yet';
const summary = `GitHub contribution constellation: ${totalContributions} contributions, longest streak ${streakText}`;

@m3hrab
m3hrab merged commit 2b0a47e into m3hrab:main Sep 8, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Add screen-reader accessibility to generated SVG output

2 participants