@atlaskit/eslint-plugin-design-system 13.41.3 → 13.43.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.43.0
+
+### Minor Changes
+
+- [`7c66756e9392b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c66756e9392b) -
+  Add use-textfield-autocomplete rule to flag inaccessible use of autocomplete prop for email, url
+  and tel text fields
+
+## 13.42.0
+
+### Minor Changes
+
+- [`0daada0469ab8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0daada0469ab8) -
+  Remove `@atlaskit/icon/migration-map` entry point, `IconMigrationMap` and
+  `IconMigrationSizeGuidance` types from `@atlaskit/icon`, and `@atlaskit/icon-lab/migration-map`
+  entry point. These were only needed to support the legacy glyph icon migration path which has now
+  been fully completed. Remove the `no-legacy-icons` ESLint rule from
+  `@atlaskit/eslint-plugin-design-system` as `@atlaskit/icon/glyph` and
+  `@atlaskit/icon/core/migration` no longer exist.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.41.3
 
 ### Patch Changes

package/README.md

@@ -85,7 +85,6 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-icon-spacing-prop/README.md">no-icon-spacing-prop</a>                                                 | Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead.                                                                                                                                                                                                              | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-invalid-css-map/README.md">no-invalid-css-map</a>                                                     | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.                                                                                                                                                                                          | Yes         |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-keyframes-tagged-template-expression/README.md">no-keyframes-tagged-template-expression</a>           | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |
-| <a href="./packages/design-system/eslint-plugin/src/rules/no-legacy-icons/README.md">no-legacy-icons</a>                                                           | Enforces no legacy icons are used.                                                                                                                                                                                                                                                                                  |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-margin/README.md">no-margin</a>                                                                       | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-nested-styles/README.md">no-nested-styles</a>                                                         | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-physical-properties/README.md">no-physical-properties</a>                                             | Disallow physical properties and values in `css` and `cssMap` function calls.                                                                                                                                                                                                                                       |             | Yes     |             |
@@ -122,6 +121,7 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-simple-form/README.md">use-simple-form</a>                                                           | Encourage use of simple form for better developer experience and accessibility.                                                                                                                                                                                                                                     | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-spotlight-package/README.md">use-spotlight-package</a>                                               | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.                                                                                                                                                                                                                                         |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-tag-group-label/README.md">use-tag-group-label</a>                                                   | Ensures tag groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                   | Yes         |         | Yes         |
+| <a href="./packages/design-system/eslint-plugin/src/rules/use-textfield-autocomplete/README.md">use-textfield-autocomplete</a>                                     | Enforce that Textfield components with type="email", "tel", or "url" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose).                                                                                                                                              | Yes         | Yes     |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-tokens-shape/README.md">use-tokens-shape</a>                                                         | Enforces usage of shape design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-tokens-space/README.md">use-tokens-space</a>                                                         | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-tokens-typography/README.md">use-tokens-typography</a>                                               | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            | Yes         | Yes     | Yes         |

package/dist/cjs/presets/all-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6a7b233fc5b211ee3868899e1525bbdb>>
+ * @codegen <<SignedSource::d924c9b1f1f815e7bbe77b86ee42ad86>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -49,7 +49,6 @@ var rules = {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
-    '@atlaskit/design-system/no-legacy-icons': 'warn',
     '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
@@ -86,6 +85,7 @@ var rules = {
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-spotlight-package': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
     '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::69b963bac3d18247c1cba21a3bca7bb4>>
+ * @codegen <<SignedSource::9dbc4d90a7430699860bd67938cfd53b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -48,7 +48,6 @@ var rules = {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
-    '@atlaskit/design-system/no-legacy-icons': 'warn',
     '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
@@ -85,6 +84,7 @@ var rules = {
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-spotlight-package': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
     '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',

package/dist/cjs/presets/recommended-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6f0d931df90a4eea8dc4201b3a8e0866>>
+ * @codegen <<SignedSource::e38fe36e83da94463de0e055c45eac02>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -67,6 +67,7 @@ var rules = {
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa118aeb6a9c0d954f6e3a5ea7bd10af>>
+ * @codegen <<SignedSource::a12b7837d2a4105c5d20b49d5b9b54ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -66,6 +66,7 @@ var rules = {
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

package/dist/cjs/rules/index.codegen.js

@@ -41,7 +41,6 @@ var _noHtmlTextarea = _interopRequireDefault(require("./no-html-textarea"));
 var _noIconSpacingProp = _interopRequireDefault(require("./no-icon-spacing-prop"));
 var _noInvalidCssMap = _interopRequireDefault(require("./no-invalid-css-map"));
 var _noKeyframesTaggedTemplateExpression = _interopRequireDefault(require("./no-keyframes-tagged-template-expression"));
-var _noLegacyIcons = _interopRequireDefault(require("./no-legacy-icons"));
 var _noMargin = _interopRequireDefault(require("./no-margin"));
 var _noNestedStyles = _interopRequireDefault(require("./no-nested-styles"));
 var _noPhysicalProperties = _interopRequireDefault(require("./no-physical-properties"));
@@ -78,13 +77,14 @@ var _useSimpleField = _interopRequireDefault(require("./use-simple-field"));
 var _useSimpleForm = _interopRequireDefault(require("./use-simple-form"));
 var _useSpotlightPackage = _interopRequireDefault(require("./use-spotlight-package"));
 var _useTagGroupLabel = _interopRequireDefault(require("./use-tag-group-label"));
+var _useTextfieldAutocomplete = _interopRequireDefault(require("./use-textfield-autocomplete"));
 var _useTokensShape = _interopRequireDefault(require("./use-tokens-shape"));
 var _useTokensSpace = _interopRequireDefault(require("./use-tokens-space"));
 var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typography"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5d0d1213db83267889fa81e0aab419f7>>
+ * @codegen <<SignedSource::aec1237f211398c8225cd256e75476ff>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -125,7 +125,6 @@ var rules = exports.rules = {
   'no-icon-spacing-prop': _noIconSpacingProp.default,
   'no-invalid-css-map': _noInvalidCssMap.default,
   'no-keyframes-tagged-template-expression': _noKeyframesTaggedTemplateExpression.default,
-  'no-legacy-icons': _noLegacyIcons.default,
   'no-margin': _noMargin.default,
   'no-nested-styles': _noNestedStyles.default,
   'no-physical-properties': _noPhysicalProperties.default,
@@ -162,6 +161,7 @@ var rules = exports.rules = {
   'use-simple-form': _useSimpleForm.default,
   'use-spotlight-package': _useSpotlightPackage.default,
   'use-tag-group-label': _useTagGroupLabel.default,
+  'use-textfield-autocomplete': _useTextfieldAutocomplete.default,
   'use-tokens-shape': _useTokensShape.default,
   'use-tokens-space': _useTokensSpace.default,
   'use-tokens-typography': _useTokensTypography.default,

package/dist/cjs/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -73,10 +73,11 @@ var isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform =
       return _cssToXcss.supportedStylesMap[styleProperty] && _cssToXcss.supportedStylesMap[styleProperty][styleValue.fallbackValue] === styleValue.tokenName;
     } else {
       // direct value used
-      return _cssToXcss.supportedStylesMap[styleProperty] &&
-      // Is the key something we can map
-      _cssToXcss.supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
-      ;
+      return (
+        // Is the value something we can map
+        // Is the key something we can map
+        _cssToXcss.supportedStylesMap[styleProperty] && _cssToXcss.supportedStylesMap[styleProperty][styleValue]
+      );
     }
   });
   if (!containsOnlyValidStyles) {

package/dist/cjs/rules/use-textfield-autocomplete/index.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ruleName = exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _jsxAttribute = require("../../ast-nodes/jsx-attribute");
+var _jsxElement = require("../../ast-nodes/jsx-element");
+var _createRule = require("../utils/create-rule");
+var TEXTFIELD_PACKAGE = '@atlaskit/textfield';
+var TYPE_PROP = 'type';
+var AUTOCOMPLETE_PROP = 'autoComplete';
+
+/**
+ * Mapping of input types to their corresponding autocomplete values
+ * Can be expanded in the future for other input types (tel, url, etc.)
+ */
+var TYPE_TO_AUTOCOMPLETE = {
+  email: 'email',
+  tel: 'tel',
+  url: 'url'
+};
+var ruleName = exports.ruleName = __dirname.split('/').slice(-1)[0];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Enforce that Textfield components with type="email", "tel", or "url" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose).',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingAutocomplete: 'Textfield with type="email", "tel", or "url" should have an appropriate autocomplete value to comply with WCAG 2.2 SC 1.3.5 (Identify Input Purpose).',
+      noAutocompleteOff: 'Textfield with type="email", "tel", or "url" should not have autocomplete="off". Set it to an appropriate autocomplete value to comply with WCAG 2.2 SC 1.3.5 (Identify Input Purpose).'
+    }
+  },
+  create: function create(context) {
+    // Track locally imported Textfield component names
+    var textfieldImportNames = [];
+    return {
+      // Track imports from @atlaskit/textfield
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value !== TEXTFIELD_PACKAGE) {
+          return;
+        }
+        node.specifiers.forEach(function (spec) {
+          // Handle: import Textfield from '@atlaskit/textfield'
+          if ((0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportDefaultSpecifier')) {
+            textfieldImportNames.push(spec.local.name);
+          }
+          // Handle: import { default as Textfield } from '@atlaskit/textfield' (edge case)
+          if ((0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportSpecifier') && spec.imported.name === 'default') {
+            textfieldImportNames.push(spec.local.name);
+          }
+        });
+      },
+      JSXElement: function JSXElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+          return;
+        }
+
+        // Check if this is a Textfield component
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var componentName = node.openingElement.name.name;
+        if (!textfieldImportNames.includes(componentName)) {
+          return;
+        }
+
+        // Check for type prop
+        var typeProp = _jsxElement.JSXElementHelper.getAttributeByName(node, TYPE_PROP);
+        if (!typeProp) {
+          return;
+        }
+
+        // Get the type value - only process if it's a static string literal
+        var typeValue = _jsxAttribute.JSXAttribute.getValue(typeProp);
+        if (!typeValue || typeValue.type !== 'Literal') {
+          // Skip dynamic types (e.g., type={inputType})
+          return;
+        }
+        var typeString = String(typeValue.value);
+        if (!(typeString in TYPE_TO_AUTOCOMPLETE)) {
+          // Skip if type is not one we're checking
+          return;
+        }
+        var expectedAutocomplete = TYPE_TO_AUTOCOMPLETE[typeString];
+
+        // Check for autoComplete prop
+        var autoCompleteProp = _jsxElement.JSXElementHelper.getAttributeByName(node, AUTOCOMPLETE_PROP);
+        if (!autoCompleteProp) {
+          // Missing autoComplete entirely
+          return context.report({
+            node: node,
+            messageId: 'missingAutocomplete',
+            fix: function fix(fixer) {
+              return _jsxElement.JSXElementHelper.addAttribute(node, AUTOCOMPLETE_PROP, expectedAutocomplete, fixer);
+            }
+          });
+        }
+
+        // Check the autoComplete value
+        var autoCompleteValue = _jsxAttribute.JSXAttribute.getValue(autoCompleteProp);
+        if (!autoCompleteValue) {
+          // Boolean `autoComplete` has no value node — add the prop. `autoComplete=""` also yields no
+          // getValue() (shared helper skips falsy literals); we report but do not autofix to avoid
+          // inserting a duplicate attribute.
+          return context.report({
+            node: node,
+            messageId: 'missingAutocomplete',
+            fix: function fix(fixer) {
+              if (!autoCompleteProp.value) {
+                return _jsxElement.JSXElementHelper.addAttribute(node, AUTOCOMPLETE_PROP, expectedAutocomplete, fixer);
+              }
+              return null;
+            }
+          });
+        }
+
+        // Handle different value types
+        if (autoCompleteValue.type === 'Literal') {
+          var valueString = String(autoCompleteValue.value);
+
+          // Check for "off"
+          if (valueString === 'off') {
+            return context.report({
+              node: node,
+              messageId: 'noAutocompleteOff',
+              fix: function fix(fixer) {
+                if (autoCompleteProp.value && (0, _eslintCodemodUtils.isNodeOfType)(autoCompleteProp.value, 'Literal')) {
+                  return fixer.replaceText(autoCompleteProp.value, "\"".concat(expectedAutocomplete, "\""));
+                }
+                return null;
+              }
+            });
+          }
+
+          // Valid autoComplete value (e.g. "email")
+          // If it is an invalid value, it will be caught by the jsx-a11y/autocomplete-valid rule
+          return;
+        }
+
+        // If it's a dynamic expression (e.g., autoComplete={someVar}), we can't statically analyze it
+        // so we allow it
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/es2019/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6a7b233fc5b211ee3868899e1525bbdb>>
+ * @codegen <<SignedSource::d924c9b1f1f815e7bbe77b86ee42ad86>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -43,7 +43,6 @@ const rules = {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
-    '@atlaskit/design-system/no-legacy-icons': 'warn',
     '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
@@ -80,6 +79,7 @@ const rules = {
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-spotlight-package': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
     '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::69b963bac3d18247c1cba21a3bca7bb4>>
+ * @codegen <<SignedSource::9dbc4d90a7430699860bd67938cfd53b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -42,7 +42,6 @@ const rules = {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
-    '@atlaskit/design-system/no-legacy-icons': 'warn',
     '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-nested-styles': 'error',
     '@atlaskit/design-system/no-physical-properties': 'error',
@@ -79,6 +78,7 @@ const rules = {
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-spotlight-package': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
     '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',

package/dist/es2019/presets/recommended-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6f0d931df90a4eea8dc4201b3a8e0866>>
+ * @codegen <<SignedSource::e38fe36e83da94463de0e055c45eac02>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -61,6 +61,7 @@ const rules = {
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa118aeb6a9c0d954f6e3a5ea7bd10af>>
+ * @codegen <<SignedSource::a12b7837d2a4105c5d20b49d5b9b54ab>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -60,6 +60,7 @@ const rules = {
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5d0d1213db83267889fa81e0aab419f7>>
+ * @codegen <<SignedSource::aec1237f211398c8225cd256e75476ff>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -40,7 +40,6 @@ import noHtmlTextarea from './no-html-textarea';
 import noIconSpacingProp from './no-icon-spacing-prop';
 import noInvalidCssMap from './no-invalid-css-map';
 import noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
-import noLegacyIcons from './no-legacy-icons';
 import noMargin from './no-margin';
 import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
@@ -77,6 +76,7 @@ import useSimpleField from './use-simple-field';
 import useSimpleForm from './use-simple-form';
 import useSpotlightPackage from './use-spotlight-package';
 import useTagGroupLabel from './use-tag-group-label';
+import useTextfieldAutocomplete from './use-textfield-autocomplete';
 import useTokensShape from './use-tokens-shape';
 import useTokensSpace from './use-tokens-space';
 import useTokensTypography from './use-tokens-typography';
@@ -118,7 +118,6 @@ export const rules = {
   'no-icon-spacing-prop': noIconSpacingProp,
   'no-invalid-css-map': noInvalidCssMap,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
-  'no-legacy-icons': noLegacyIcons,
   'no-margin': noMargin,
   'no-nested-styles': noNestedStyles,
   'no-physical-properties': noPhysicalProperties,
@@ -155,6 +154,7 @@ export const rules = {
   'use-simple-form': useSimpleForm,
   'use-spotlight-package': useSpotlightPackage,
   'use-tag-group-label': useTagGroupLabel,
+  'use-textfield-autocomplete': useTextfieldAutocomplete,
   'use-tokens-shape': useTokensShape,
   'use-tokens-space': useTokensSpace,
   'use-tokens-typography': useTokensTypography,

package/dist/es2019/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -58,10 +58,11 @@ export const isValidCssPropertiesToTransform = (node, config) => {
       return supportedStylesMap[styleProperty] && supportedStylesMap[styleProperty][styleValue.fallbackValue] === styleValue.tokenName;
     } else {
       // direct value used
-      return supportedStylesMap[styleProperty] &&
-      // Is the key something we can map
-      supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
-      ;
+      return (
+        // Is the value something we can map
+        // Is the key something we can map
+        supportedStylesMap[styleProperty] && supportedStylesMap[styleProperty][styleValue]
+      );
     }
   });
   if (!containsOnlyValidStyles) {

package/dist/es2019/rules/use-textfield-autocomplete/index.js

@@ -0,0 +1,147 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { JSXAttribute } from '../../ast-nodes/jsx-attribute';
+import { JSXElementHelper } from '../../ast-nodes/jsx-element';
+import { createLintRule } from '../utils/create-rule';
+const TEXTFIELD_PACKAGE = '@atlaskit/textfield';
+const TYPE_PROP = 'type';
+const AUTOCOMPLETE_PROP = 'autoComplete';
+
+/**
+ * Mapping of input types to their corresponding autocomplete values
+ * Can be expanded in the future for other input types (tel, url, etc.)
+ */
+const TYPE_TO_AUTOCOMPLETE = {
+  email: 'email',
+  tel: 'tel',
+  url: 'url'
+};
+export const ruleName = __dirname.split('/').slice(-1)[0];
+const rule = createLintRule({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Enforce that Textfield components with type="email", "tel", or "url" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose).',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingAutocomplete: 'Textfield with type="email", "tel", or "url" should have an appropriate autocomplete value to comply with WCAG 2.2 SC 1.3.5 (Identify Input Purpose).',
+      noAutocompleteOff: 'Textfield with type="email", "tel", or "url" should not have autocomplete="off". Set it to an appropriate autocomplete value to comply with WCAG 2.2 SC 1.3.5 (Identify Input Purpose).'
+    }
+  },
+  create(context) {
+    // Track locally imported Textfield component names
+    const textfieldImportNames = [];
+    return {
+      // Track imports from @atlaskit/textfield
+      ImportDeclaration(node) {
+        if (node.source.value !== TEXTFIELD_PACKAGE) {
+          return;
+        }
+        node.specifiers.forEach(spec => {
+          // Handle: import Textfield from '@atlaskit/textfield'
+          if (isNodeOfType(spec, 'ImportDefaultSpecifier')) {
+            textfieldImportNames.push(spec.local.name);
+          }
+          // Handle: import { default as Textfield } from '@atlaskit/textfield' (edge case)
+          if (isNodeOfType(spec, 'ImportSpecifier') && spec.imported.name === 'default') {
+            textfieldImportNames.push(spec.local.name);
+          }
+        });
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+
+        // Check if this is a Textfield component
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const componentName = node.openingElement.name.name;
+        if (!textfieldImportNames.includes(componentName)) {
+          return;
+        }
+
+        // Check for type prop
+        const typeProp = JSXElementHelper.getAttributeByName(node, TYPE_PROP);
+        if (!typeProp) {
+          return;
+        }
+
+        // Get the type value - only process if it's a static string literal
+        const typeValue = JSXAttribute.getValue(typeProp);
+        if (!typeValue || typeValue.type !== 'Literal') {
+          // Skip dynamic types (e.g., type={inputType})
+          return;
+        }
+        const typeString = String(typeValue.value);
+        if (!(typeString in TYPE_TO_AUTOCOMPLETE)) {
+          // Skip if type is not one we're checking
+          return;
+        }
+        const expectedAutocomplete = TYPE_TO_AUTOCOMPLETE[typeString];
+
+        // Check for autoComplete prop
+        const autoCompleteProp = JSXElementHelper.getAttributeByName(node, AUTOCOMPLETE_PROP);
+        if (!autoCompleteProp) {
+          // Missing autoComplete entirely
+          return context.report({
+            node,
+            messageId: 'missingAutocomplete',
+            fix(fixer) {
+              return JSXElementHelper.addAttribute(node, AUTOCOMPLETE_PROP, expectedAutocomplete, fixer);
+            }
+          });
+        }
+
+        // Check the autoComplete value
+        const autoCompleteValue = JSXAttribute.getValue(autoCompleteProp);
+        if (!autoCompleteValue) {
+          // Boolean `autoComplete` has no value node — add the prop. `autoComplete=""` also yields no
+          // getValue() (shared helper skips falsy literals); we report but do not autofix to avoid
+          // inserting a duplicate attribute.
+          return context.report({
+            node,
+            messageId: 'missingAutocomplete',
+            fix(fixer) {
+              if (!autoCompleteProp.value) {
+                return JSXElementHelper.addAttribute(node, AUTOCOMPLETE_PROP, expectedAutocomplete, fixer);
+              }
+              return null;
+            }
+          });
+        }
+
+        // Handle different value types
+        if (autoCompleteValue.type === 'Literal') {
+          const valueString = String(autoCompleteValue.value);
+
+          // Check for "off"
+          if (valueString === 'off') {
+            return context.report({
+              node,
+              messageId: 'noAutocompleteOff',
+              fix(fixer) {
+                if (autoCompleteProp.value && isNodeOfType(autoCompleteProp.value, 'Literal')) {
+                  return fixer.replaceText(autoCompleteProp.value, `"${expectedAutocomplete}"`);
+                }
+                return null;
+              }
+            });
+          }
+
+          // Valid autoComplete value (e.g. "email")
+          // If it is an invalid value, it will be caught by the jsx-a11y/autocomplete-valid rule
+          return;
+        }
+
+        // If it's a dynamic expression (e.g., autoComplete={someVar}), we can't statically analyze it
+        // so we allow it
+      }
+    };
+  }
+});
+export default rule;