@mui/internal-code-infra 0.0.4-canary.41 → 0.0.4-canary.42

package/build/eslint/mui/rules/no-presentation-role.d.mts

@@ -0,0 +1,5 @@
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+declare const rule: import('eslint').Rule.RuleModule;
+export default rule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-code-infra",
-  "version": "0.0.4-canary.41",
+  "version": "0.0.4-canary.42",
   "author": "MUI Team",
   "description": "Infra scripts and configs to be used across MUI repos.",
   "license": "MIT",
@@ -139,9 +139,9 @@
     "unified-lint-rule": "^3.0.1",
     "unist-util-visit": "^5.1.0",
     "yargs": "^18.0.0",
+    "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.27",
     "@mui/internal-babel-plugin-display-name": "1.0.4-canary.19",
-    "@mui/internal-babel-plugin-resolve-imports": "2.0.7-canary.36",
-    "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.27"
+    "@mui/internal-babel-plugin-resolve-imports": "2.0.7-canary.36"
   },
   "peerDependencies": {
     "@next/eslint-plugin-next": "*",
@@ -191,7 +191,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitSha": "23110663aef8376c78c86ae4c6ee8f54c9f8c9ea",
+  "gitSha": "f2b7a9f6b2db57a03f2e16a5bb351f02a55c3e17",
   "scripts": {
     "build": "tsgo -p tsconfig.build.json",
     "typescript": "tsgo -noEmit",

package/src/eslint/mui/config.mjs

@@ -421,6 +421,7 @@ export function createCoreConfig(options = {}) {
         'mui/consistent-production-guard': 'error',
         'mui/add-undef-to-optional': 'off',
         'mui/flatten-parentheses': 'warn',
+        'mui/no-presentation-role': 'off',
 
         'react-hooks/exhaustive-deps': [
           'error',

package/src/eslint/mui/index.mjs

@@ -12,6 +12,7 @@ import rulesOfUseThemeVariants from './rules/rules-of-use-theme-variants.mjs';
 import straightQuotes from './rules/straight-quotes.mjs';
 import addUndefToOptional from './rules/add-undef-to-optional.mjs';
 import flattenParentheses from './rules/flatten-parentheses.mjs';
+import noPresentationRole from './rules/no-presentation-role.mjs';
 
 /** @type {import('eslint').ESLint.Plugin} */
 const muiPlugin = {
@@ -35,6 +36,7 @@ const muiPlugin = {
     // Some discrepancies between TypeScript and ESLint types - casting to any
     'add-undef-to-optional': /** @type {any} */ (addUndefToOptional),
     'flatten-parentheses': /** @type {any} */ (flattenParentheses),
+    'no-presentation-role': noPresentationRole,
   },
 };
 

package/src/eslint/mui/rules/no-presentation-role.mjs

@@ -0,0 +1,60 @@
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+const rule = {
+  meta: {
+    docs: {
+      description:
+        'Disallow role="presentation" in favor of role="none". Both are equivalent, but role="none" is clearer and shorter.',
+    },
+    messages: {
+      noPresentation:
+        'Use role="none" instead of role="presentation". They are equivalent, but role="none" is preferred.',
+    },
+    fixable: 'code',
+    type: 'suggestion',
+    schema: [],
+  },
+  create(context) {
+    return {
+      /** @param {import('estree-jsx').JSXAttribute} node */
+      JSXAttribute(node) {
+        if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'role') {
+          return;
+        }
+
+        const { value } = node;
+
+        // role="presentation"
+        if (value !== null && value.type === 'Literal' && value.value === 'presentation') {
+          context.report({
+            node,
+            messageId: 'noPresentation',
+            fix(fixer) {
+              return fixer.replaceText(value, '"none"');
+            },
+          });
+          return;
+        }
+
+        // role={'presentation'}
+        if (
+          value !== null &&
+          value.type === 'JSXExpressionContainer' &&
+          value.expression.type === 'Literal' &&
+          value.expression.value === 'presentation'
+        ) {
+          context.report({
+            node,
+            messageId: 'noPresentation',
+            fix(fixer) {
+              return fixer.replaceText(value, '"none"');
+            },
+          });
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/src/eslint/mui/rules/no-presentation-role.test.mjs

@@ -0,0 +1,33 @@
+import eslint from 'eslint';
+import parser from '@typescript-eslint/parser';
+import rule from './no-presentation-role.mjs';
+
+const ruleTester = new eslint.RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+ruleTester.run('no-presentation-role', rule, {
+  valid: ['<div role="none" />', '<div role="button" />', '<div />', '<div role={presentation} />'],
+  invalid: [
+    {
+      code: '<div role="presentation" />',
+      errors: [{ messageId: 'noPresentation' }],
+      output: '<div role="none" />',
+    },
+    {
+      code: "<div role={'presentation'} />",
+      errors: [{ messageId: 'noPresentation' }],
+      output: '<div role="none" />',
+    },
+    {
+      code: '<table role="presentation"><tr><td /></tr></table>',
+      errors: [{ messageId: 'noPresentation' }],
+      output: '<table role="none"><tr><td /></tr></table>',
+    },
+  ],
+});