Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

i18n: translate the Accessibility Lab

Open
  • Is something wrong?
#406 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
78/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
next.js, typescript
Domain
accessibility, internationalization

Research direction

Read docs/translating.md and the translating section in CONTRIBUTING.md, then compare components/effects/focus-ring-controls.tsx with components/accessibility/a11y-workspace.tsx, contrast-results.tsx and check-list.tsx. Add matching a11y. catalog entries for en, es, fr and hi, preserving placeholders and using plural() for counts; update lib/i18n/messages.test.ts when the keys are complete. Run the listed checks, including pnpm test, and confirm the lab reads correctly in Hindi at a narrow width.

Written by the indexing model from the issue text.

Description

area: accessibility-lab difficulty: medium enhancement help wanted v2.0.0

Summary

None of the 19 components in components/accessibility use the message catalogs, so the Accessibility Lab is English only in every language. Move its interface text into the catalogs (en, es, fr, hi) a tab at a time, starting with the workspace tabs and the contrast results.

Part of the 2.0.0 plan: fewer, better and fully tested studios.

Where to look

  • docs/translating.md and CONTRIBUTING.md, "Translating the interface"
  • components/accessibility/a11y-workspace.tsx, contrast-results.tsx and check-list.tsx
  • components/effects/focus-ring-controls.tsx: a finished example with {ratio} placeholders and Pass and Fail badges
  • lib/i18n/messages/*.ts and lib/i18n/messages.test.ts

Behaviour

  • Use an a11y. key prefix, keep keys and placeholders identical across languages and use plural() for counts.
  • Do not translate WCAG criterion numbers, CSS property names or APCA terms.
  • The JSON, Markdown and HTML reports stay English for now: they are shared with other tools and teams. Say so in the pull request.

Acceptance criteria

  • No hard-coded English remains in the workspace tabs, the contrast results and the check list.
  • Add a11y. to the areas that must be complete in lib/i18n/messages.test.ts once the keys are done.
  • Contrast values use {ratio} placeholders, not concatenation.
  • pnpm test passes, and the lab reads correctly in Hindi at a narrow width.

Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build (CI fails on unformatted files, so pnpm format first). See CONTRIBUTING.md and the first contribution walkthrough.

Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.

Dominant language
TypeScript
Stars
11
Forks
3
Avg merge
4h 4m
Merged PRs (30d)
74

Getting set up

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.

More from yakew7/DesignHub

All issues in yakew7/DesignHub

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.