Skip to content

feat(react): add rule to enforce translator comment in sr-only contexts - #5

Open
vraja-pro wants to merge 1 commit into
mainfrom
add-sr-only-translator-comment-rule
Open

feat(react): add rule to enforce translator comment in sr-only contexts#5
vraja-pro wants to merge 1 commit into
mainfrom
add-sr-only-translator-comment-rule

Conversation

@vraja-pro

@vraja-pro vraja-pro commented Aug 28, 2026

Copy link
Copy Markdown

Summary

Adds a new ESLint rule yoast/require-sr-only-translator-comment to reactConfig. The rule enforces that every i18n call whose output is only visible to screen readers has a /* translators: Hidden accessibility text. */ comment directly above it, so translators understand the string has no visual context.

What the rule checks

The rule fires on:

  • __(), _x(), _n(), _nx(), or any of these wrapped in sprintf() inside a JSX element whose className contains "yst-sr-only"
  • The same i18n calls used as the value of an aria-label JSX attribute

It recognises the comment whether it appears before the attribute, before the JSXExpressionContainer, or directly above the i18n call inside the braces — covering all common placement patterns.

Technical notes

  • Rule helpers are arrow functions to satisfy the existing jsdoc/require-jsdoc config (which exempts ArrowFunctionExpression).
  • rules/ is added to the files field in package.json so the rule file is included when the package is published.
  • No new runtime dependencies — the rule is pure ESLint AST analysis.

Testing

  • Go to wordpress-seo/node_modules/@yoast/eslint-config remove all content except the node_modules folder.
  • Copy the package with this PR.
  • Paste in wordpress-seo/node_modules/@yoast/eslint-config
  • Go to packages/js and run yarn lint
  • You should get 33 errors.

🤖 Generated with Claude Code

@vraja-pro
vraja-pro force-pushed the add-sr-only-translator-comment-rule branch from 9a4751e to 9a00536 Compare August 28, 2026 12:22
Adds yoast/require-sr-only-translator-comment to reactConfig. The rule
requires /* translators: Hidden accessibility text. */ before i18n calls
(__(), _x(), _n(), _nx(), or sprintf wrapping one of these) inside:
- JSX elements with className containing "yst-sr-only"
- aria-label JSX attributes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vraja-pro
vraja-pro force-pushed the add-sr-only-translator-comment-rule branch from 9a00536 to dcf0a51 Compare August 28, 2026 12:23
@vraja-pro vraja-pro added the enhancement New feature or request label Aug 28, 2026
vraja-pro added a commit to Yoast/wordpress-seo that referenced this pull request Aug 28, 2026
The rule is pending in Yoast/eslint-config#5. Until that PR is merged
and the package version bumped, the rule is inlined here so CI enforces
it. Remove this once @yoast/eslint-config ships the rule in reactConfig.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant