Merge pull request #49 from Darshan808/enhance-no-untranslated-strings

Improve `@jupyter/no-untranslated-string` for `JSX`

Author: Darshan808

.github/workflows/downstream.yml

@@ -45,6 +45,7 @@ jobs:
         run: |
           npx eslint --config eslint.downstream.config.mjs \
             'jupyterlab/packages/*/src/**/*.ts' \
+            'jupyterlab/packages/*/src/**/*.tsx' \
             --max-warnings=9999
         env:
           NODE_PATH: ./jupyterlab/node_modules
@@ -87,6 +88,7 @@ jobs:
         run: |
           npx eslint --config eslint.downstream.config.mjs \
             'notebook/packages/*/src/**/*.ts' \
+            'notebook/packages/*/src/**/*.tsx' \
             --max-warnings=9999
         env:
           NODE_PATH: ./notebook/node_modules
@@ -129,6 +131,7 @@ jobs:
         run: |
           npx eslint --config eslint.downstream.config.mjs \
             'jupyterlite/packages/*/src/**/*.ts' \
+            'jupyterlite/packages/*/src/**/*.tsx' \
             --max-warnings=9999
         env:
           NODE_PATH: ./jupyterlite/node_modules

eslint.downstream.config.mjs

@@ -21,7 +21,10 @@ export default [
   // JupyterLab
   {
     basePath: __dirname,
-    files: ['jupyterlab/packages/*/src/**/*.ts'],
+    files: [
+      'jupyterlab/packages/*/src/**/*.ts',
+      'jupyterlab/packages/*/src/**/*.tsx'
+    ],
     plugins: {
       'jupyter': resolvedPlugin,
       '@typescript-eslint': resolvedTsPlugin
@@ -50,7 +53,10 @@ export default [
   // Notebook
   {
     basePath: __dirname,
-    files: ['notebook/packages/*/src/**/*.ts'],
+    files: [
+      'notebook/packages/*/src/**/*.ts',
+      'notebook/packages/*/src/**/*.tsx'
+    ],
     plugins: {
       'jupyter': resolvedPlugin,
       '@typescript-eslint': resolvedTsPlugin
@@ -79,7 +85,10 @@ export default [
   // Jupyterlite
   {
     basePath: __dirname,
-    files: ['jupyterlite/packages/*/src/**/*.ts'],
+    files: [
+      'jupyterlite/packages/*/src/**/*.ts',
+      'jupyterlite/packages/*/src/**/*.tsx'
+    ],
     plugins: {
       'jupyter': resolvedPlugin,
       '@typescript-eslint': resolvedTsPlugin

src/rules/no-untranslated-string.ts

@@ -8,31 +8,33 @@ import { isAddCommandCall } from '../utils/commands';
 import { getObjectProperties } from '../utils/plugin-utils';
 import { createRule } from '../utils/create-rule';
 
-/**
- * Returns true if the node is a non-empty raw string literal that should be
- * wrapped in a translation call. Handles:
- *   - String Literal: 'string' or "string"
- *   - TemplateLiteral with no expressions: `string`
- *   - Concise ArrowFunctionExpression whose body is one of the above
- */
-function isRawStringNode(node: TSESTree.Node): boolean {
-  if (node.type === 'Literal') {
-    return typeof node.value === 'string' && node.value.length > 0;
+function hasLetters(str: string): boolean {
+  return /\p{L}/u.test(str);
+}
+
+function getRawStringValue(node: TSESTree.Node): string | null {
+  if (node.type === 'Literal' && typeof node.value === 'string') {
+    return node.value;
   }
-  if (node.type === 'TemplateLiteral') {
-    if (node.expressions.length > 0) {
-      return false;
-    }
-    const cooked = node.quasis.map(q => q.value.cooked ?? '').join('');
-    return cooked.length > 0;
+  if (node.type === 'TemplateLiteral' && node.expressions.length === 0) {
+    return node.quasis.map(q => q.value.cooked ?? '').join('');
   }
   if (
     node.type === 'ArrowFunctionExpression' &&
     node.body.type !== 'BlockStatement'
   ) {
-    return isRawStringNode(node.body);
+    return getRawStringValue(node.body);
   }
-  return false;
+  return null;
+}
+
+/**
+ * Returns true if the node is a non-empty raw string literal that should be
+ * wrapped in a translation call.
+ */
+function isRawStringNode(node: TSESTree.Node): boolean {
+  const rawValue = getRawStringValue(node);
+  return rawValue !== null && rawValue.trim().length > 0;
 }
 
 function isSetAttributeCall(node: TSESTree.CallExpression): boolean {
@@ -71,9 +73,11 @@ function isDialogButtonCall(node: TSESTree.CallExpression): boolean {
 }
 
 const MONITORED_COMMAND_PROPS = ['label', 'caption', 'usage'];
-const MONITORED_SET_ATTRIBUTE_ATTRS = ['aria-label', 'aria-description', 'title'];
+const MONITORED_A11Y_ATTRS = ['aria-label', 'aria-description', 'title'];
+const MONITORED_SET_ATTRIBUTE_ATTRS = MONITORED_A11Y_ATTRS;
 const MONITORED_ASSIGNMENT_PROPS = ['title', 'ariaLabel'];
 const MONITORED_DIALOG_PROPS = ['title', 'body'];
+const MONITORED_JSX_ATTRS = MONITORED_A11Y_ATTRS;
 
 const noUntranslatedString = createRule({
   name: 'no-untranslated-string',
@@ -100,11 +104,23 @@ const noUntranslatedString = createRule({
       untranslatedJsxText:
         'JSX text content has an untranslated string literal. Wrap it with {trans.__(...)}'
     },
-    schema: []
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          enforcePunctuation: { type: 'boolean' }
+        },
+        additionalProperties: false
+      }
+    ]
   },
-  defaultOptions: [],
+  defaultOptions: [{ enforcePunctuation: false }],
 
   create(context) {
+    const enforcePunctuation =
+      (context.options[0] as { enforcePunctuation?: boolean })
+        ?.enforcePunctuation ?? false;
+
     return {
       CallExpression(node) {
         // Branch A: commands.addCommand(id, { label, caption, usage })
@@ -265,9 +281,27 @@ const noUntranslatedString = createRule({
         }
       },
 
+      // Accessibility attribute with a plain string: <span aria-label="text" />
+      JSXAttribute(node) {
+        if (!node.value || node.value.type === 'JSXExpressionContainer') {
+          return;
+        }
+        const attrName =
+          node.name.type === 'JSXIdentifier' ? node.name.name : null;
+        if (!attrName || !MONITORED_JSX_ATTRS.includes(attrName)) {
+          return;
+        }
+        if (isRawStringNode(node.value)) {
+          context.report({
+            node: node.value,
+            messageId: 'untranslatedJsxText'
+          });
+        }
+      },
+
       // Raw text between JSX tags: <span>Untranslated text</span>
       JSXText(node) {
-        if (node.value.trim().length > 0) {
+        if (node.value.trim().length > 0 && (enforcePunctuation || hasLetters(node.value))) {
           context.report({
             node,
             messageId: 'untranslatedJsxText'
@@ -280,11 +314,30 @@ const noUntranslatedString = createRule({
         if (node.expression.type === 'JSXEmptyExpression') {
           return;
         }
+        if (node.parent.type === 'JSXAttribute') {
+          const attrName =
+            node.parent.name.type === 'JSXIdentifier'
+              ? node.parent.name.name
+              : null;
+          if (!attrName || !MONITORED_JSX_ATTRS.includes(attrName)) {
+            return;
+          }
+          if (isRawStringNode(node.expression)) {
+            context.report({
+              node: node.expression,
+              messageId: 'untranslatedJsxText'
+            });
+          }
+          return;
+        }
         if (isRawStringNode(node.expression)) {
-          context.report({
-            node: node.expression,
-            messageId: 'untranslatedJsxText'
-          });
+          const value = getRawStringValue(node.expression);
+          if (value !== null && (enforcePunctuation ? value.trim().length > 0 : hasLetters(value))) {
+            context.report({
+              node: node.expression,
+              messageId: 'untranslatedJsxText'
+            });
+          }
         }
       }
     };

tests/jupyter-no-untranslated-string.test.ts

@@ -247,7 +247,13 @@ jsxRuleTester.run('no-untranslated-string (JSX)', noUntranslatedString, {
   valid: [
     // --- JSX: translated expression ---
     { code: `const el = <span>{trans.__('Error message:')}</span>;` },
-    { code: `const el = (\n  <div>\n    <span>{trans.__('Label')}</span>\n  </div>\n);` }
+    { code: `const el = (\n  <div>\n    <span>{trans.__('Label')}</span>\n  </div>\n);` },
+    { code: `<div className={'normal-class-string'} />` },
+    { code: `<div id={'my-id'} />` },
+    { code: `<span aria-label={trans.__('Close')} />` },
+    // Punctuation-only JSX text should not be flagged
+    { code: `<span>,</span>` },
+    { code: `<span>{' + '}</span>` }
   ],
 
   invalid: [
@@ -260,6 +266,49 @@ jsxRuleTester.run('no-untranslated-string (JSX)', noUntranslatedString, {
     {
       code: `const el = <span>{'raw string'}</span>;`,
       errors: [{ messageId: 'untranslatedJsxText' }]
+    },
+    // --- JSX accessibility attributes must be translated ---
+    {
+      code: `<button aria-label={'Close dialog'} />`,
+      errors: [{ messageId: 'untranslatedJsxText' }]
+    },
+    {
+      code: `<div title={'My tooltip'} />`,
+      errors: [{ messageId: 'untranslatedJsxText' }]
+    },
+    {
+      code: `<span aria-description={'Describes something'} />`,
+      errors: [{ messageId: 'untranslatedJsxText' }]
+    },
+    {
+      code: `<span aria-description="Describes something" />`,
+      errors: [{ messageId: 'untranslatedJsxText' }]
+    }
+  ]
+});
+
+// enforcePunctuation option tests
+jsxRuleTester.run('no-untranslated-string (JSX, enforcePunctuation)', noUntranslatedString, {
+  valid: [
+    // Empty strings still ignored even with enforcePunctuation
+    { code: `<span>{''}</span>`, options: [{ enforcePunctuation: true }] }
+  ],
+  invalid: [
+    // Punctuation-only JSX text flagged when enforcePunctuation: true
+    {
+      code: `<div>,</div>`,
+      options: [{ enforcePunctuation: true }],
+      errors: [{ messageId: 'untranslatedJsxText' }]
+    },
+    {
+      code: `<span>{' - '}</span>`,
+      options: [{ enforcePunctuation: true }],
+      errors: [{ messageId: 'untranslatedJsxText' }]
+    },
+    {
+      code: `<span>{'.'}</span>`,
+      options: [{ enforcePunctuation: true }],
+      errors: [{ messageId: 'untranslatedJsxText' }]
     }
   ]
 });

website/docs/rules/command-described-by.md

@@ -1,4 +1,4 @@
-# `jupyter/command-described-by`
+# `command-described-by`
 
 Ensure JupyterLab command registrations include a `describedBy` property.
 

website/docs/rules/no-translation-concatenation.md

@@ -1,4 +1,4 @@
-# `jupyter/no-translation-concatenation`
+# `no-translation-concatenation`
 
 Forbid string concatenation inside JupyterLab translation wrapper calls.
 

website/docs/rules/no-untranslated-string.md

@@ -1,4 +1,4 @@
-# `jupyter/no-untranslated-string`
+# `no-untranslated-string`
 
 Require user-facing string literals to be wrapped in a translation call such as `trans.__()`.
 
@@ -94,4 +94,10 @@ const el = <span>{trans.__('Error message:')}</span>;
 
 ## Options
 
-This rule has no options.
+```ts
+{
+  "enforcePunctuation": false
+}
+```
+
+Set `enforcePunctuation` option to `true` to enforce translation of punctuation characters such as `,`, `-`, `+`, and other symbols.

website/docs/rules/plugin-activation-args.md

@@ -1,4 +1,4 @@
-# `jupyter/plugin-activation-args`
+# `plugin-activation-args`
 
 Ensure JupyterLab plugin `activate` arguments match the order and count of `requires` and `optional` tokens.
 

website/docs/rules/plugin-description.md

@@ -1,4 +1,4 @@
-# `jupyter/plugin-description`
+# `plugin-description`
 
 Ensure all `JupyterFrontEndPlugin` objects define a non-empty `description` property.
 

website/docs/rules/token-format.md

@@ -1,4 +1,4 @@
-# `jupyter/token-format`
+# `token-format`
 
 Ensure JupyterLab `Token` ids follow the `<package>:<TokenSymbol>` naming convention where the symbol is a valid JavaScript identifier.