@atlaskit/eslint-plugin-design-system 10.5.0 → 10.6.1

package/constellation/use-menu-section-title/usage.mdx

@@ -0,0 +1,55 @@
+# use-menu-section-title
+
+Section should have an accessible title or a reference to it, so that 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 `title` or `titleId`
+prop.
+
+### Incorrect
+
+```tsx
+<Section>
+ ^^^^^^ Missing either `title` or `titleId` prop.
+  Section content
+</Section>
+
+<Section title>
+         ^^^^^ `title` prop is missing value.
+  Section content
+</Section>
+
+<Section title="">
+         ^^^^^ `title` prop is missing accessible name value.
+  Section content
+</Section>
+
+<Section titleId>
+         ^^^^^^^ `titleId` prop is missing reference value.
+  <h1 id="section-title">Section content title</hi>
+</Section>
+
+<Section titleId="">
+         ^^^^^^^ `titleId` prop is missing reference value.
+  <h1 id="section-title">Section content title</hi>
+</Section>
+
+<Section titleId="section-title" title="Accessible title">
+         ^^^^^^^                 ^^^^^ Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.
+  <h1 id="section-title">Section content title</hi>
+</Section>
+```
+
+### Correct
+
+```tsx
+<Section title="Section content title">
+  Section content
+</Section>
+
+<Section titleId="section-title">
+  <h1 id="section-title">Section content title</hi>
+</Section>
+```

package/dist/cjs/common/token-maps.partial.js

@@ -10,7 +10,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
+ * @codegen <<SignedSource::a9fbd091c8b53fd9515afc7cdd793c6b>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>

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::45da5525f92249d3a5b5049a95fc2fc5>>
+ * @codegen <<SignedSource::837556032f39113ae86785a120bb9ccb>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -44,6 +44,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
+    '@atlaskit/design-system/use-menu-section-title': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',

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::f5a2e39689cb7db642a65999cdc6f03a>>
+ * @codegen <<SignedSource::b7ed527a03208f0bc68f9d34e4ef2260>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -34,6 +34,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
+    '@atlaskit/design-system/use-menu-section-title': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

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

@@ -37,6 +37,7 @@ 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 _useLatestXcssSyntax = _interopRequireDefault(require("./use-latest-xcss-syntax"));
+var _useMenuSectionTitle = _interopRequireDefault(require("./use-menu-section-title"));
 var _usePopupLabel = _interopRequireDefault(require("./use-popup-label"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
@@ -45,7 +46,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::37cb0f5dfe6f5b8391203fdb1cf7cabe>>
+ * @codegen <<SignedSource::287628b11d396c2bcbcf6f4a175a3d3a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -81,6 +82,7 @@ var _default = exports.default = {
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,
   'use-latest-xcss-syntax': _useLatestXcssSyntax.default,
+  'use-menu-section-title': _useMenuSectionTitle.default,
   'use-popup-label': _usePopupLabel.default,
   'use-primitives': _usePrimitives.default,
   'use-primitives-text': _usePrimitivesText.default,

package/dist/cjs/rules/use-latest-xcss-syntax/transformers/style-property/index.js

@@ -39,7 +39,16 @@ var StyleProperty = exports.StyleProperty = {
         ref: undefined
       };
     }
-    var importDeclarations = ast.Root.findImportsByModule(context.sourceCode.ast.body, '@atlaskit/primitives');
+    var importDeclarations = ast.Root.findImportsByModule(
+    /**
+     * `context.getSourceCode()` is deprecated in favour of `context.sourceCode`.
+     * However, `context.sourceCode` returns undefined for some usages. This may be a bug
+     * in the `eslint` package. So, use `getSourceCode()` instead.
+     *
+     * Note: `context.sourceCode` works in testing environments. So, it is hard to validate whether it
+     * will work in the wild. Even if the tests pass, don't assume it will work in production.
+     */
+    context.getSourceCode().ast.body, '@atlaskit/primitives');
     var isXcssImported = importDeclarations.some(function (importDeclaration) {
       return ast.Import.containsNamedSpecifier(importDeclaration, 'xcss');
     });

package/dist/cjs/rules/use-menu-section-title/index.js

@@ -0,0 +1,85 @@
+"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 = ['title', 'titleId'];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-menu-section-title',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages makers to provide accessible title for Atlassian Design System Menu Section component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingTitleProp: 'Missing accessible title. If there is no visible content to associate use `title` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      titlePropShouldHaveContents: 'Define the string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of the element that defines the accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var _node$specifiers;
+        var menuSectionIdentifier = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.filter(function (spec) {
+          if (node.source.value === '@atlaskit/menu') {
+            var _spec$imported;
+            return spec.type === 'ImportSpecifier' && ((_spec$imported = spec.imported) === null || _spec$imported === void 0 ? void 0 : _spec$imported.name) === 'Section';
+          } else if (node.source.value === '@atlaskit/menu/section') {
+            return spec.type === 'ImportDefaultSpecifier';
+          }
+        });
+        if (menuSectionIdentifier !== null && menuSectionIdentifier !== void 0 && menuSectionIdentifier.length) {
+          var local = menuSectionIdentifier[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 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 === 'title' ? 'titlePropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingTitleProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;