@atlaskit/eslint-plugin-design-system 9.6.0 → 9.7.0

package/README.md

@@ -78,6 +78,7 @@ module.exports = {
 | <a href="./src/rules/use-heading/README.md">use-heading</a>                                                                 | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a>                 | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a>                                             | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
+| <a href="./src/rules/use-popup-label/README.md">use-popup-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | Yes         |         | Yes         |
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                                           | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a>                                                 | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
 | <a href="./src/rules/use-tokens-space/README.md">use-tokens-space</a>                                                       | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |

package/constellation/index/usage.mdx

@@ -40,6 +40,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="use-heading/usage">use-heading</a>                                                                 | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a>                 | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="use-href-in-link-item/usage">use-href-in-link-item</a>                                             | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
+| <a href="use-popup-label/usage">use-popup-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | Yes         |         | Yes         |
 | <a href="use-primitives/usage">use-primitives</a>                                                           | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="use-primitives-text/usage">use-primitives-text</a>                                                 | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
 | <a href="use-tokens-space/usage">use-tokens-space</a>                                                       | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |

package/constellation/use-popup-label/usage.mdx

@@ -0,0 +1,53 @@
+# use-popup-label
+
+Popup should have an accessible name or a reference to it when `role="dialog"`, so that upon opening, users of assistive technologies could have contextual information of interaction with current element.
+
+## Examples
+
+This rule will indicate user with warning to strongly recommend usage of either `label` or `titleId` prop.
+
+### Incorrect
+
+```tsx
+<Popup role="dialog">
+ ^^^^^^ Missing either `label` or `titleId` prop.
+  Popup content
+</Popup>
+
+<Popup role="dialog" label>
+                     ^^^^^ `label` prop is missing value.
+  Popup content
+</Popup>
+
+<Popup role="dialog" label="">
+                     ^^^^^ `label` prop is missing accessible name value.
+  Popup content
+</Popup>
+
+<Popup role="dialog" titleId>
+                     ^^^^^^^ `titleId` prop is missing reference value.
+  <h1 id="popup-title">Popup content title</hi>
+</Popup>
+
+<Popup role="dialog" titleId="">
+                     ^^^^^^^ `titleId` prop is missing reference value.
+  <h1 id="popup-title">Popup content title</hi>
+</Popup>
+
+<Popup role="dialog" titleId="popup-title" label="">
+                     ^^^^^^^               ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.
+  <h1 id="popup-title">Popup content title</hi>
+</Popup>
+```
+
+### Correct
+
+```tsx
+<Popup role="dialog" label="Popup content title">
+  Popup content
+</Popup>
+
+<Popup role="dialog" titleId="popup-title">
+  <h1 id="popup-title">Popup content title</hi>
+</Popup>
+```

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::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::5a5b0ed8cf86631274d7d30df4199e5d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -41,6 +41,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-tokens-space': '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::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::af55c21605e3b8ee7836cb8950a9f713>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -32,6 +32,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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

@@ -34,6 +34,7 @@ var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
 var _useHeading = _interopRequireDefault(require("./use-heading"));
 var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
+var _usePopupLabel = _interopRequireDefault(require("./use-popup-label"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
 var _useTokensSpace = _interopRequireDefault(require("./use-tokens-space"));
@@ -41,7 +42,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::293575f7bd0150862f792e3fffc286c4>>
+ * @codegen <<SignedSource::5e5b4678175cdf8209b7e2443bc4abb4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -74,6 +75,7 @@ var _default = exports.default = {
   'use-heading': _useHeading.default,
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,
+  'use-popup-label': _usePopupLabel.default,
   'use-primitives': _usePrimitives.default,
   'use-primitives-text': _usePrimitivesText.default,
   'use-tokens-space': _useTokensSpace.default,

package/dist/cjs/rules/use-popup-label/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var elementsAccessibleNameProps = ['label', 'titleId'];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-popup-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages to provide accessible name for Atlassian Design System Popup component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/popup') {
+          if (node.specifiers.length) {
+            var defaultImport = node.specifiers.filter(function (spec) {
+              return spec.type === 'ImportDefaultSpecifier';
+            });
+            if (defaultImport.length) {
+              var local = defaultImport[0].local;
+              contextLocalIdentifier.push(local.name);
+            }
+          }
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          var componentRoleDialogProp = node.openingElement.attributes.find(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && attr.value && (0, _eslintCodemodUtils.isNodeOfType)(attr.value, 'Literal') && attr.name.name === 'role' && attr.value.value === 'dialog';
+          });
+          var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
+          });
+          if (componentLabelProps.length === 1) {
+            var prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal') && !prop.value.value || (0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            if (componentRoleDialogProp) {
+              context.report({
+                node: node.openingElement,
+                messageId: 'missingLabelProp'
+              });
+            } else {
+              return;
+            }
+          }
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

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::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::5a5b0ed8cf86631274d7d30df4199e5d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -35,6 +35,7 @@ export default {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-tokens-space': '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::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::af55c21605e3b8ee7836cb8950a9f713>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -26,6 +26,7 @@ export default {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': '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::293575f7bd0150862f792e3fffc286c4>>
+ * @codegen <<SignedSource::5e5b4678175cdf8209b7e2443bc4abb4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -32,6 +32,7 @@ import useDrawerLabel from './use-drawer-label';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
+import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
 import useTokensSpace from './use-tokens-space';
@@ -67,6 +68,7 @@ export default {
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
+  'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,
   'use-tokens-space': useTokensSpace,

package/dist/es2019/rules/use-popup-label/index.js

@@ -0,0 +1,80 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const elementsAccessibleNameProps = ['label', 'titleId'];
+const rule = createLintRule({
+  meta: {
+    name: 'use-popup-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages to provide accessible name for Atlassian Design System Popup component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create(context) {
+    const contextLocalIdentifier = [];
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/popup') {
+          if (node.specifiers.length) {
+            const defaultImport = node.specifiers.filter(spec => spec.type === 'ImportDefaultSpecifier');
+            if (defaultImport.length) {
+              const {
+                local
+              } = defaultImport[0];
+              contextLocalIdentifier.push(local.name);
+            }
+          }
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          const componentRoleDialogProp = node.openingElement.attributes.find(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && attr.value && isNodeOfType(attr.value, 'Literal') && attr.name.name === 'role' && attr.value.value === 'dialog');
+          const componentLabelProps = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name));
+          if (componentLabelProps.length === 1) {
+            const prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            if (componentRoleDialogProp) {
+              context.report({
+                node: node.openingElement,
+                messageId: 'missingLabelProp'
+              });
+            } else {
+              return;
+            }
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

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::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::5a5b0ed8cf86631274d7d30df4199e5d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -35,6 +35,7 @@ export default {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-tokens-space': '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::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::af55c21605e3b8ee7836cb8950a9f713>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -26,6 +26,7 @@ export default {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': '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::293575f7bd0150862f792e3fffc286c4>>
+ * @codegen <<SignedSource::5e5b4678175cdf8209b7e2443bc4abb4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -32,6 +32,7 @@ import useDrawerLabel from './use-drawer-label';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
+import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
 import useTokensSpace from './use-tokens-space';
@@ -67,6 +68,7 @@ export default {
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
+  'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,
   'use-tokens-space': useTokensSpace,

package/dist/esm/rules/use-popup-label/index.js

@@ -0,0 +1,84 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+var elementsAccessibleNameProps = ['label', 'titleId'];
+var rule = createLintRule({
+  meta: {
+    name: 'use-popup-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages to provide accessible name for Atlassian Design System Popup component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/popup') {
+          if (node.specifiers.length) {
+            var defaultImport = node.specifiers.filter(function (spec) {
+              return spec.type === 'ImportDefaultSpecifier';
+            });
+            if (defaultImport.length) {
+              var local = defaultImport[0].local;
+              contextLocalIdentifier.push(local.name);
+            }
+          }
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          var componentRoleDialogProp = node.openingElement.attributes.find(function (attr) {
+            return isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && attr.value && isNodeOfType(attr.value, 'Literal') && attr.name.name === 'role' && attr.value.value === 'dialog';
+          });
+          var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
+            return isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
+          });
+          if (componentLabelProps.length === 1) {
+            var prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            if (componentRoleDialogProp) {
+              context.report({
+                node: node.openingElement,
+                messageId: 'missingLabelProp'
+              });
+            } else {
+              return;
+            }
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

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

@@ -32,6 +32,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
+            '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-primitives-text': string;
             '@atlaskit/design-system/use-tokens-space': string;
@@ -62,6 +63,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
+            '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-visually-hidden': string;
         };
     };

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::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::5a5b0ed8cf86631274d7d30df4199e5d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -35,6 +35,7 @@ declare const _default: {
         '@atlaskit/design-system/use-heading': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
+        '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-primitives': string;
         '@atlaskit/design-system/use-primitives-text': string;
         '@atlaskit/design-system/use-tokens-space': string;

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::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::af55c21605e3b8ee7836cb8950a9f713>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -26,6 +26,7 @@ declare const _default: {
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;
+        '@atlaskit/design-system/use-popup-label': string;
         '@atlaskit/design-system/use-visually-hidden': string;
     };
 };

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

@@ -32,6 +32,7 @@ declare const _default: {
     'use-heading': import("eslint").Rule.RuleModule;
     'use-heading-level-in-spotlight-card': import("eslint").Rule.RuleModule;
     'use-href-in-link-item': import("eslint").Rule.RuleModule;
+    'use-popup-label': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;
     'use-primitives-text': import("eslint").Rule.RuleModule;
     'use-tokens-space': import("eslint").Rule.RuleModule;

package/dist/types/rules/use-popup-label/index.d.ts

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

package/dist/types/rules/use-tokens-typography/utils.d.ts

@@ -127,39 +127,6 @@ export declare const fontFamilyTokens: ({
     name: string;
     path: string[];
     cleanName: string;
-} | {
-    attributes: {
-        group: string;
-        state: string;
-        introduced: string;
-        deprecated: string;
-        description: string;
-        responsiveSmallerVariant?: undefined;
-    };
-    value: string;
-    filePath: string;
-    isSource: boolean;
-    original: {
-        attributes: {
-            group: string;
-            state: string;
-            introduced: string;
-            deprecated: string;
-            description: string;
-            responsiveSmallerVariant?: undefined;
-        };
-        value: {
-            fontWeight: string;
-            fontSize: string;
-            lineHeight: string;
-            fontFamily: string;
-            fontStyle: string;
-            letterSpacing: string;
-        };
-    };
-    name: string;
-    path: string[];
-    cleanName: string;
 } | {
     attributes: {
         group: string;

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

@@ -32,6 +32,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-heading': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
+            '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-primitives': string;
             '@atlaskit/design-system/use-primitives-text': string;
             '@atlaskit/design-system/use-tokens-space': string;
@@ -62,6 +63,7 @@ export declare const configs: {
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
+            '@atlaskit/design-system/use-popup-label': string;
             '@atlaskit/design-system/use-visually-hidden': string;
         };
     };