@elastic/eslint-plugin-eui 2.6.0 → 2.8.0

package/README.md

@@ -167,6 +167,21 @@ Ensure interactive EUI components (like e.g. `EuiLink`, `EuiButton`, `EuiRadio`)
 
 Ensure `EuiInMemoryTable`, `EuiBasicTable` have a `tableCaption` property for accessibility.
 
+### `@elastic/eui/badge-accessibility-rules`
+
+Ensure the `EuiBadge` includes appropriate accessibility attributes.
+
+- `iconOnClick` and `onClick` must not reference the same callback. The rule autofixes by removing `iconOnClick`.
+- `iconOnClickAriaLabel` is only valid when `iconOnClick` is present. The rule autofixes by removing `iconOnClickAriaLabel`.
+- `onClickAriaLabel` is only valid when `onClick` is present. The rule autofixes by removing `onClickAriaLabel`.
+
+### `@elastic/eui/icon-accessibility-rules`
+
+Ensure the `EuiIcon` includes appropriate accessibility attributes.
+ 
+- `EuiIcon` has an accessible name via `title`, `aria-label`, or `aria-labelledby`; otherwise mark it decorative with `aria-hidden={true}`
+- Do not combine `tabIndex` with `aria-hidden`
+
 ## Testing
 
 ### Running unit tests

package/lib/cjs/index.js

@@ -1,18 +1,21 @@
 "use strict";
 
+var _accessible_interactive_element = require("./rules/a11y/accessible_interactive_element");
+var _callout_announce_on_mount = require("./rules/a11y/callout_announce_on_mount");
+var _consistent_is_invalid_props = require("./rules/a11y/consistent_is_invalid_props");
 var _href_or_on_click = require("./rules/href_or_on_click");
-var _no_restricted_eui_imports = require("./rules/no_restricted_eui_imports");
 var _no_css_color = require("./rules/no_css_color");
+var _no_restricted_eui_imports = require("./rules/no_restricted_eui_imports");
+var _no_static_z_index = require("./rules/no_static_z_index");
+var _no_unnamed_interactive_element = require("./rules/a11y/no_unnamed_interactive_element");
+var _no_unnamed_radio_group = require("./rules/a11y/no_unnamed_radio_group");
+var _prefer_eui_icon_tip = require("./rules/a11y/prefer_eui_icon_tip");
 var _require_aria_label_for_modals = require("./rules/a11y/require_aria_label_for_modals");
-var _consistent_is_invalid_props = require("./rules/a11y/consistent_is_invalid_props");
+var _require_table_caption = require("./rules/a11y/require_table_caption");
 var _sr_output_disabled_tooltip = require("./rules/a11y/sr_output_disabled_tooltip");
-var _prefer_eui_icon_tip = require("./rules/a11y/prefer_eui_icon_tip");
-var _no_unnamed_radio_group = require("./rules/a11y/no_unnamed_radio_group");
-var _no_unnamed_interactive_element = require("./rules/a11y/no_unnamed_interactive_element");
 var _tooltip_focusable_anchor = require("./rules/a11y/tooltip_focusable_anchor");
-var _callout_announce_on_mount = require("./rules/a11y/callout_announce_on_mount");
-var _accessible_interactive_element = require("./rules/a11y/accessible_interactive_element");
-var _require_table_caption = require("./rules/a11y/require_table_caption");
+var _badge_accessibility_rules = require("./rules/a11y/badge_accessibility_rules");
+var _icon_accessibility_rules = require("./rules/a11y/icon_accessibility_rules");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,37 +26,43 @@ var _require_table_caption = require("./rules/a11y/require_table_caption");
 
 const config = {
   rules: {
+    'accessible-interactive-element': _accessible_interactive_element.AccessibleInteractiveElements,
+    'callout-announce-on-mount': _callout_announce_on_mount.CallOutAnnounceOnMount,
+    'consistent-is-invalid-props': _consistent_is_invalid_props.ConsistentIsInvalidProps,
     'href-or-on-click': _href_or_on_click.HrefOnClick,
-    'no-restricted-eui-imports': _no_restricted_eui_imports.NoRestrictedEuiImports,
     'no-css-color': _no_css_color.NoCssColor,
+    'no-restricted-eui-imports': _no_restricted_eui_imports.NoRestrictedEuiImports,
+    'no-static-z-index': _no_static_z_index.NoStaticZIndex,
+    'no-unnamed-interactive-element': _no_unnamed_interactive_element.NoUnnamedInteractiveElement,
+    'no-unnamed-radio-group': _no_unnamed_radio_group.NoUnnamedRadioGroup,
+    'prefer-eui-icon-tip': _prefer_eui_icon_tip.PreferEuiIconTip,
     'require-aria-label-for-modals': _require_aria_label_for_modals.RequireAriaLabelForModals,
-    'consistent-is-invalid-props': _consistent_is_invalid_props.ConsistentIsInvalidProps,
+    'require-table-caption': _require_table_caption.RequireTableCaption,
     'sr-output-disabled-tooltip': _sr_output_disabled_tooltip.ScreenReaderOutputDisabledTooltip,
-    'prefer-eui-icon-tip': _prefer_eui_icon_tip.PreferEuiIconTip,
-    'no-unnamed-radio-group': _no_unnamed_radio_group.NoUnnamedRadioGroup,
-    'callout-announce-on-mount': _callout_announce_on_mount.CallOutAnnounceOnMount,
-    'no-unnamed-interactive-element': _no_unnamed_interactive_element.NoUnnamedInteractiveElement,
     'tooltip-focusable-anchor': _tooltip_focusable_anchor.TooltipFocusableAnchor,
-    'accessible-interactive-element': _accessible_interactive_element.AccessibleInteractiveElements,
-    'require-table-caption': _require_table_caption.RequireTableCaption
+    'badge-accessibility-rules': _badge_accessibility_rules.EuiBadgeAccessibilityRules,
+    'icon-accessibility-rules': _icon_accessibility_rules.EuiIconAccessibilityRules
   },
   configs: {
     recommended: {
       plugins: ['@elastic/eslint-plugin-eui'],
       rules: {
+        '@elastic/eui/accessible-interactive-element': 'warn',
+        '@elastic/eui/callout-announce-on-mount': 'warn',
+        '@elastic/eui/consistent-is-invalid-props': 'warn',
         '@elastic/eui/href-or-on-click': 'warn',
-        '@elastic/eui/no-restricted-eui-imports': 'warn',
         '@elastic/eui/no-css-color': 'warn',
+        '@elastic/eui/no-restricted-eui-imports': 'warn',
+        '@elastic/eui/no-static-z-index': 'warn',
+        '@elastic/eui/no-unnamed-interactive-element': 'warn',
+        '@elastic/eui/no-unnamed-radio-group': 'warn',
+        '@elastic/eui/prefer-eui-icon-tip': 'warn',
         '@elastic/eui/require-aria-label-for-modals': 'warn',
-        '@elastic/eui/consistent-is-invalid-props': 'warn',
+        '@elastic/eui/require-table-caption': 'warn',
         '@elastic/eui/sr-output-disabled-tooltip': 'warn',
-        '@elastic/eui/prefer-eui-icon-tip': 'warn',
-        '@elastic/eui/no-unnamed-radio-group': 'warn',
-        '@elastic/eui/callout-announce-on-mount': 'warn',
-        '@elastic/eui/no-unnamed-interactive-element': 'warn',
         '@elastic/eui/tooltip-focusable-anchor': 'warn',
-        '@elastic/eui/accessible-interactive-element': 'warn',
-        '@elastic/eui/require-table-caption': 'warn'
+        '@elastic/eui/badge-accessibility-rules': 'warn',
+        '@elastic/eui/icon-accessibility-rules': 'warn'
       }
     }
   }

package/lib/cjs/rules/a11y/badge_accessibility_rules.d.ts

@@ -0,0 +1,3 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const EuiBadgeAccessibilityRules: ESLintUtils.RuleModule<"sameCallback" | "iconOnClickAriaLabelWithoutIconOnClick" | "onClickAriaLabelWithoutOnClick", [], unknown, ESLintUtils.RuleListener>;
+//# sourceMappingURL=badge_accessibility_rules.d.ts.map

package/lib/cjs/rules/a11y/badge_accessibility_rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge_accessibility_rules.d.ts","sourceRoot":"","sources":["../../../../src/rules/a11y/badge_accessibility_rules.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIvD,eAAO,MAAM,0BAA0B,6JAyFrC,CAAC"}

package/lib/cjs/rules/a11y/badge_accessibility_rules.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiBadgeAccessibilityRules = void 0;
+var _utils = require("@typescript-eslint/utils");
+const BADGE_COMPONENT = 'EuiBadge';
+const EuiBadgeAccessibilityRules = exports.EuiBadgeAccessibilityRules = _utils.ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    return {
+      JSXElement(node) {
+        const {
+          openingElement
+        } = node;
+        if (openingElement.name.type !== 'JSXIdentifier' || openingElement.name.name !== BADGE_COMPONENT) {
+          return;
+        }
+        let iconOnClick, onClick, iconOnClickAriaLabel, onClickAriaLabel;
+        for (const attr of openingElement.attributes) {
+          if (attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier') {
+            switch (attr.name.name) {
+              case 'iconOnClick':
+                iconOnClick = attr;
+                break;
+              case 'onClick':
+                onClick = attr;
+                break;
+              case 'iconOnClickAriaLabel':
+                iconOnClickAriaLabel = attr;
+                break;
+              case 'onClickAriaLabel':
+                onClickAriaLabel = attr;
+                break;
+            }
+          }
+        }
+
+        // 1. iconOnClick and onClick cannot refer to the same callback
+        if (iconOnClick && onClick && iconOnClick.value && onClick.value && iconOnClick.value.type === 'JSXExpressionContainer' && onClick.value.type === 'JSXExpressionContainer' && iconOnClick.value.expression.type === 'Identifier' && onClick.value.expression.type === 'Identifier' && iconOnClick.value.expression.name === onClick.value.expression.name) {
+          context.report({
+            node: iconOnClick,
+            messageId: 'sameCallback',
+            fix: fixer => fixer.removeRange([iconOnClick.range[0], iconOnClick.range[1]])
+          });
+        }
+
+        // 2. iconOnClickAriaLabel should be set only if iconOnClick is set
+        if (iconOnClickAriaLabel && !iconOnClick) {
+          context.report({
+            node: iconOnClickAriaLabel,
+            messageId: 'iconOnClickAriaLabelWithoutIconOnClick',
+            fix: fixer => fixer.removeRange([iconOnClickAriaLabel.range[0], iconOnClickAriaLabel.range[1]])
+          });
+        }
+
+        // 3. onClickAriaLabel should be set only if onClick is set
+        if (onClickAriaLabel && !onClick) {
+          context.report({
+            node: onClickAriaLabel,
+            messageId: 'onClickAriaLabelWithoutOnClick',
+            fix: fixer => fixer.removeRange([onClickAriaLabel.range[0], onClickAriaLabel.range[1]])
+          });
+        }
+      }
+    };
+  },
+  meta: {
+    type: 'problem',
+    docs: {
+      description: `Ensure the ${BADGE_COMPONENT} includes appropriate accessibility attributes`
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      sameCallback: '`iconOnClick` and `onClick` should not refer to the same callback. Remove `iconOnClick` and keep only `onClick`.',
+      iconOnClickAriaLabelWithoutIconOnClick: '`iconOnClickAriaLabel` should only be set if `iconOnClick` is present. Remove this prop.',
+      onClickAriaLabelWithoutOnClick: '`onClickAriaLabel` should only be set if `onClick` is present. Remove this prop.'
+    }
+  },
+  defaultOptions: []
+});

package/lib/cjs/rules/a11y/icon_accessibility_rules.d.ts

@@ -0,0 +1,3 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const EuiIconAccessibilityRules: ESLintUtils.RuleModule<"missingTitleOrAriaHidden" | "tabIndexWithAriaHidden", [], unknown, ESLintUtils.RuleListener>;
+//# sourceMappingURL=icon_accessibility_rules.d.ts.map

package/lib/cjs/rules/a11y/icon_accessibility_rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon_accessibility_rules.d.ts","sourceRoot":"","sources":["../../../../src/rules/a11y/icon_accessibility_rules.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAY,MAAM,0BAA0B,CAAC;AAKjE,eAAO,MAAM,yBAAyB,sHAyFpC,CAAC"}

package/lib/cjs/rules/a11y/icon_accessibility_rules.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiIconAccessibilityRules = void 0;
+var _utils = require("@typescript-eslint/utils");
+var _remove_attr = require("../../utils/remove_attr");
+const COMPONENT = 'EuiIcon';
+const EuiIconAccessibilityRules = exports.EuiIconAccessibilityRules = _utils.ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    return {
+      JSXElement(node) {
+        const {
+          openingElement
+        } = node;
+        if (openingElement.name.type !== 'JSXIdentifier' || openingElement.name.name !== COMPONENT) {
+          return;
+        }
+        let ariaHiddenAttr;
+        let tabIndexAttr;
+        let isIconNamed = false;
+        for (const attr of openingElement.attributes) {
+          if (attr.type !== 'JSXAttribute' || attr.name.type !== 'JSXIdentifier') continue;
+          const name = attr.name.name;
+          if (name === 'aria-hidden') ariaHiddenAttr = attr;
+          if (name === 'tabIndex') tabIndexAttr = attr;
+          if (['title', 'aria-labelledby', 'aria-label'].includes(name)) {
+            isIconNamed = true;
+          }
+        }
+        const hasAriaHiddenTrue = !!ariaHiddenAttr && ariaHiddenAttr.value && (
+        // aria-hidden={true}
+        ariaHiddenAttr.value.type === 'JSXExpressionContainer' && ariaHiddenAttr.value.expression.type === 'Literal' && ariaHiddenAttr.value.expression.value === true ||
+        // aria-hidden='true'
+        ariaHiddenAttr.value.type === 'Literal' && ariaHiddenAttr.value.value === 'true');
+
+        // Case: `tabIndex` and `aria-hidden` cannot be used together
+        if (tabIndexAttr && hasAriaHiddenTrue) {
+          context.report({
+            node: openingElement,
+            messageId: 'tabIndexWithAriaHidden',
+            fix: fixer => {
+              if (!ariaHiddenAttr?.range) return null;
+              const [start, end] = (0, _remove_attr.removeAttribute)(context, ariaHiddenAttr);
+              return [fixer.removeRange([start, end])];
+            }
+          });
+          return;
+        }
+
+        // Require accessible name or `aria-hidden={true}`;
+        if (!isIconNamed && !hasAriaHiddenTrue) {
+          context.report({
+            node: openingElement,
+            messageId: 'missingTitleOrAriaHidden',
+            fix: fixer => {
+              if (tabIndexAttr) return null;
+              const end = openingElement.range[1];
+              const insertPos = openingElement.selfClosing ? end - 2 : end - 1; // before '/>' or '>'
+              const insertRange = [insertPos, insertPos];
+              return [fixer.insertTextBeforeRange(insertRange, ' aria-hidden={true}')];
+            }
+          });
+        }
+      }
+    };
+  },
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: `Ensure the EuiIcon includes appropriate accessibility attributes`
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      missingTitleOrAriaHidden: 'Add a `title`, `aria-label`, or `aria-labelledby` to EuiIcon, or set `aria-hidden={true}` if it is decorative.',
+      tabIndexWithAriaHidden: 'Do not use `tabIndex` together with `aria-hidden`. Remove `aria-hidden` or provide an accessible name.'
+    }
+  },
+  defaultOptions: []
+});

package/lib/cjs/rules/no_css_color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"no_css_color.d.ts","sourceRoot":"","sources":["../../../src/rules/no_css_color.ts"],"names":[],"mappings":"AASA,OAAO,EAAY,WAAW,EAAE,MAAM,0BAA0B,CAAC;AA4OjE,eAAO,MAAM,UAAU,2IAsRrB,CAAC"}
+{"version":3,"file":"no_css_color.d.ts","sourceRoot":"","sources":["../../../src/rules/no_css_color.ts"],"names":[],"mappings":"AASA,OAAO,EAAY,WAAW,EAAE,MAAM,0BAA0B,CAAC;AA+OjE,eAAO,MAAM,UAAU,2IAuRrB,CAAC"}

package/lib/cjs/rules/no_css_color.js

@@ -7,6 +7,7 @@ exports.NoCssColor = void 0;
 var _cssstyle = require("cssstyle");
 var _utils = require("@typescript-eslint/utils");
 var _resolve_member_expression_root = require("../utils/resolve_member_expression_root");
+var _get_property_name = require("../utils/get_property_name");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -56,13 +57,14 @@ const checkPropertySpecifiesInvalidCSSColor = ([property, value]) => {
  */
 const raiseReportIfPropertyHasInvalidCssColor = (context, propertyNode, messageToReport) => {
   let didReport = false;
-  if (propertyNode.key.type === 'Identifier' && !htmlElementColorDeclarationRegex.test(propertyNode.key.name)) {
+  const propertyName = (0, _get_property_name.getPropertyName)(propertyNode);
+  if (!propertyName || !htmlElementColorDeclarationRegex.test(propertyName)) {
     return didReport;
   }
   if (propertyNode.value.type === 'Literal') {
-    if (didReport = checkPropertySpecifiesInvalidCSSColor([
-    // @ts-expect-error the key name is present in this scenario
-    propertyNode.key.name, propertyNode.value.value])) {
+    if (didReport = checkPropertySpecifiesInvalidCSSColor([propertyName,
+    // @ts-expect-error the value is present in this scenario
+    propertyNode.value.value])) {
       context.report(messageToReport);
     }
   } else if (propertyNode.value.type === 'Identifier') {

package/lib/cjs/rules/no_static_z_index.d.ts

@@ -0,0 +1,3 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const NoStaticZIndex: ESLintUtils.RuleModule<"noStaticZIndex" | "noStaticZIndexSpecific" | "noStaticZIndexSpecificDeclaredVariable", [], unknown, ESLintUtils.RuleListener>;
+//# sourceMappingURL=no_static_z_index.d.ts.map

package/lib/cjs/rules/no_static_z_index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no_static_z_index.d.ts","sourceRoot":"","sources":["../../../src/rules/no_static_z_index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAY,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAkRjE,eAAO,MAAM,cAAc,uJAwOzB,CAAC"}