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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

package/README.md

@@ -121,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::d7505be26b7cccfa9d157da41fd37a98>>
+ * @codegen <<SignedSource::d924c9b1f1f815e7bbe77b86ee42ad86>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -85,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::2063561581c09470ca6ff9a6f3112393>>
+ * @codegen <<SignedSource::9dbc4d90a7430699860bd67938cfd53b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -84,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

@@ -77,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::e36ff3c1350e9663e23e8bf40c7aa809>>
+ * @codegen <<SignedSource::aec1237f211398c8225cd256e75476ff>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -160,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-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::d7505be26b7cccfa9d157da41fd37a98>>
+ * @codegen <<SignedSource::d924c9b1f1f815e7bbe77b86ee42ad86>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -79,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::2063561581c09470ca6ff9a6f3112393>>
+ * @codegen <<SignedSource::9dbc4d90a7430699860bd67938cfd53b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -78,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::e36ff3c1350e9663e23e8bf40c7aa809>>
+ * @codegen <<SignedSource::aec1237f211398c8225cd256e75476ff>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -76,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';
@@ -153,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-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;

package/dist/esm/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::d7505be26b7cccfa9d157da41fd37a98>>
+ * @codegen <<SignedSource::d924c9b1f1f815e7bbe77b86ee42ad86>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -79,6 +79,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/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2063561581c09470ca6ff9a6f3112393>>
+ * @codegen <<SignedSource::9dbc4d90a7430699860bd67938cfd53b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -78,6 +78,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/esm/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 @@ 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/esm/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 @@ 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/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e36ff3c1350e9663e23e8bf40c7aa809>>
+ * @codegen <<SignedSource::aec1237f211398c8225cd256e75476ff>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -76,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';
@@ -153,6 +154,7 @@ export var 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/esm/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';
+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'
+};
+export var ruleName = __dirname.split('/').slice(-1)[0];
+var 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: 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 (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: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+
+        // Check if this is a Textfield component
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var componentName = node.openingElement.name.name;
+        if (!textfieldImportNames.includes(componentName)) {
+          return;
+        }
+
+        // Check for type prop
+        var typeProp = JSXElementHelper.getAttributeByName(node, TYPE_PROP);
+        if (!typeProp) {
+          return;
+        }
+
+        // Get the type value - only process if it's a static string literal
+        var typeValue = 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 = JSXElementHelper.getAttributeByName(node, AUTOCOMPLETE_PROP);
+        if (!autoCompleteProp) {
+          // Missing autoComplete entirely
+          return context.report({
+            node: node,
+            messageId: 'missingAutocomplete',
+            fix: function fix(fixer) {
+              return JSXElementHelper.addAttribute(node, AUTOCOMPLETE_PROP, expectedAutocomplete, fixer);
+            }
+          });
+        }
+
+        // Check the autoComplete value
+        var 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: node,
+            messageId: 'missingAutocomplete',
+            fix: function fix(fixer) {
+              if (!autoCompleteProp.value) {
+                return 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 && 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
+      }
+    };
+  }
+});
+export default rule;

package/dist/types/presets/all-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d7505be26b7cccfa9d157da41fd37a98>>
+ * @codegen <<SignedSource::d924c9b1f1f815e7bbe77b86ee42ad86>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2063561581c09470ca6ff9a6f3112393>>
+ * @codegen <<SignedSource::9dbc4d90a7430699860bd67938cfd53b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types/presets/recommended-flat.codegen.d.ts

@@ -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
  */
 import type { Linter } from 'eslint';

package/dist/types/presets/recommended.codegen.d.ts

@@ -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
  */
 import type { ESLint } from 'eslint';

package/dist/types/rules/index.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e36ff3c1350e9663e23e8bf40c7aa809>>
+ * @codegen <<SignedSource::aec1237f211398c8225cd256e75476ff>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types/rules/use-textfield-autocomplete/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const ruleName: string;
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/presets/all-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d7505be26b7cccfa9d157da41fd37a98>>
+ * @codegen <<SignedSource::d924c9b1f1f815e7bbe77b86ee42ad86>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2063561581c09470ca6ff9a6f3112393>>
+ * @codegen <<SignedSource::9dbc4d90a7430699860bd67938cfd53b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types-ts4.5/presets/recommended-flat.codegen.d.ts

@@ -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
  */
 import type { Linter } from 'eslint';

package/dist/types-ts4.5/presets/recommended.codegen.d.ts

@@ -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
  */
 import type { ESLint } from 'eslint';

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e36ff3c1350e9663e23e8bf40c7aa809>>
+ * @codegen <<SignedSource::aec1237f211398c8225cd256e75476ff>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types-ts4.5/rules/use-textfield-autocomplete/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const ruleName: string;
+declare const rule: Rule.RuleModule;
+export default rule;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "13.42.0",
+	"version": "13.43.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -41,7 +41,7 @@
 		"@atlaskit/eslint-utils": "^2.0.0",
 		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/icon-lab": "^6.2.0",
-		"@atlaskit/tokens": "^11.2.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^7.1.0",
 		"ajv": "^6.12.6",