@elastic/eslint-plugin-eui 2.6.0 → 2.8.0

package/lib/cjs/rules/no_static_z_index.js

@@ -0,0 +1,361 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoStaticZIndex = void 0;
+var _utils = require("@typescript-eslint/utils");
+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
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+const propertiesCheckingZIndex = ['zIndex', 'z-index'];
+const zIndexDeclarationRegex = RegExp(String.raw`(${propertiesCheckingZIndex.join('|')})`);
+
+// Regex to find z-index declarations in CSS strings
+// Matches:
+// 1. z-index property name (case insensitive)
+// 2. colon
+// 3. value (captured group 1) until semicolon, closing brace, or !important
+const cssZIndexRegex = /z-index\s*:\s*([^;!}]+)/gi;
+const checkPropertySpecifiesInvalidZIndex = (property, value) => {
+  if (!property || value === undefined || value === null) return false;
+  const normalizedProperty = property.trim();
+  const isZIndex = propertiesCheckingZIndex.includes(normalizedProperty);
+  if (!isZIndex) return false;
+  return isInvalidZIndexValue(value);
+};
+const isInvalidZIndexValue = value => {
+  const allowedCssKeywords = ['auto', 'inherit', 'initial', 'unset', 'revert', 'revert-layer'];
+  const stringValue = String(value).trim().toLowerCase();
+  if (allowedCssKeywords.includes(stringValue)) {
+    return false;
+  }
+
+  // Check if it's a number (positive, negative, or zero)
+  // This regex allows integers. z-index only accepts integers.
+  if (/^-?\d+$/.test(stringValue)) {
+    return true;
+  }
+  return false;
+};
+const raiseReportIfPropertyHasInvalidZIndex = (context, propertyNode, messageToReport) => {
+  let didReport = false;
+  const propertyName = (0, _get_property_name.getPropertyName)(propertyNode);
+  if (!propertyName || !zIndexDeclarationRegex.test(propertyName)) {
+    return didReport;
+  }
+  const visitNode = node => {
+    // Handle Literal values: zIndex: 10, 'z-index': '10'
+    if (node.type === 'Literal') {
+      if (checkPropertySpecifiesInvalidZIndex(propertyName, node.value)) {
+        didReport = true;
+        context.report({
+          ...messageToReport,
+          loc: node.loc
+        });
+      }
+    }
+    // Handle Identifier values: zIndex: someVar
+    else if (node.type === 'Identifier') {
+      const identifierName = node.name;
+      const identifierDeclaration = context.sourceCode.getScope(node).variables.find(variable => variable.name === identifierName);
+      const identifierDeclarationInit = identifierDeclaration?.defs[0]?.node.type === 'VariableDeclarator' ? identifierDeclaration.defs[0].node.init : undefined;
+      if (identifierDeclarationInit?.type === 'Literal' && checkPropertySpecifiesInvalidZIndex(propertyName, identifierDeclarationInit.value)) {
+        didReport = true;
+        context.report({
+          loc: node.loc,
+          messageId: 'noStaticZIndexSpecificDeclaredVariable',
+          data: {
+            property: propertyName,
+            line: String(node.loc.start.line),
+            variableName: node.name
+          }
+        });
+      }
+    } else if (node.type === 'ConditionalExpression') {
+      visitNode(node.consequent);
+      visitNode(node.alternate);
+    } else if (node.type === 'LogicalExpression') {
+      visitNode(node.left);
+      visitNode(node.right);
+    } else if (node.type === 'TSAsExpression') {
+      visitNode(node.expression);
+    } else if (node.type === 'UnaryExpression') {
+      if (node.operator === '-') {
+        if (node.argument.type === 'Literal' && typeof node.argument.value === 'number') {
+          if (checkPropertySpecifiesInvalidZIndex(propertyName, -node.argument.value)) {
+            didReport = true;
+            context.report({
+              ...messageToReport,
+              loc: node.loc
+            });
+          }
+        } else {
+          visitNode(node.argument);
+        }
+      }
+    }
+  };
+  if (propertyNode.value) {
+    visitNode(propertyNode.value);
+  }
+  return didReport;
+};
+const handleObjectProperties = (context, propertyParentNode, property, reportMessage) => {
+  if (property.type === 'Property') {
+    if (property.value.type === 'ObjectExpression') {
+      property.value.properties.forEach(nestedProperty => {
+        const nestedReportMessage = {
+          ...reportMessage,
+          loc: nestedProperty.loc
+        };
+        if (nestedReportMessage.data) {
+          const newData = {
+            ...nestedReportMessage.data,
+            property: (0, _get_property_name.getPropertyName)(nestedProperty) || 'unknown'
+          };
+          if ('line' in newData) {
+            newData.line = String(nestedProperty.loc.start.line);
+          }
+          nestedReportMessage.data = newData;
+        }
+        handleObjectProperties(context, propertyParentNode, nestedProperty, nestedReportMessage);
+      });
+    } else {
+      raiseReportIfPropertyHasInvalidZIndex(context, property, reportMessage);
+    }
+  } else if (property.type === 'SpreadElement') {
+    if (property.argument.type !== 'Identifier') {
+      return;
+    }
+    const spreadElementIdentifierName = property.argument.name;
+    let scopeNode = propertyParentNode;
+    if (propertyParentNode.type === 'JSXAttribute' && propertyParentNode.value?.type === 'JSXExpressionContainer') {
+      scopeNode = propertyParentNode.value.expression;
+    }
+    const spreadElementDeclaration = context.sourceCode.getScope(scopeNode).references.find(ref => ref.identifier.name === spreadElementIdentifierName)?.resolved;
+    if (!spreadElementDeclaration) {
+      return;
+    }
+    const propertyName = (0, _get_property_name.getPropertyName)(property) || 'spread';
+    reportMessage = {
+      loc: propertyParentNode.loc,
+      messageId: 'noStaticZIndexSpecificDeclaredVariable',
+      data: {
+        property: propertyName,
+        variableName: spreadElementIdentifierName,
+        line: String(property.loc.start.line)
+      }
+    };
+    const spreadElementDeclarationNode = spreadElementDeclaration.defs[0]?.node.type === 'VariableDeclarator' ? spreadElementDeclaration.defs[0].node.init : undefined;
+    if (spreadElementDeclarationNode?.type === 'ObjectExpression') {
+      spreadElementDeclarationNode.properties.forEach(spreadProperty => {
+        handleObjectProperties(context, propertyParentNode, spreadProperty, reportMessage);
+      });
+    }
+  }
+};
+const checkTemplateLiteralForZIndex = (context, node) => {
+  for (let i = 0; i < node.quasis.length; i++) {
+    const declarationTemplateNode = node.quasis[i];
+    const rawValue = declarationTemplateNode.value.raw;
+    // Strip comments
+    const valueWithoutComments = rawValue.replace(/\/\*[\s\S]*?\*\//g, '');
+    let match;
+    // reset regex state
+    cssZIndexRegex.lastIndex = 0;
+    while ((match = cssZIndexRegex.exec(valueWithoutComments)) !== null) {
+      const value = match[1].trim();
+      if (isInvalidZIndexValue(value)) {
+        context.report({
+          node: declarationTemplateNode,
+          messageId: 'noStaticZIndex'
+        });
+      }
+    }
+  }
+};
+const NoStaticZIndex = exports.NoStaticZIndex = _utils.ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    return {
+      TaggedTemplateExpression(node) {
+        if (node.tag.type !== 'Identifier' || node.tag.type === 'Identifier' && node.tag.name !== 'css') {
+          return;
+        }
+        checkTemplateLiteralForZIndex(context, node.quasi);
+      },
+      JSXAttribute(node) {
+        if (!(node.name.name === 'style' || node.name.name === 'css')) {
+          return;
+        }
+        if (!node.value || node.value.type !== 'JSXExpressionContainer') {
+          return;
+        }
+        const expression = node.value.expression;
+
+        // Handle identifier expression: style={someStyle}
+        if (expression.type === 'Identifier') {
+          const styleVariableName = expression.name;
+          const nodeScope = context.sourceCode.getScope(expression);
+          const variableDeclarationMatches = nodeScope.references.find(ref => ref.identifier.name === styleVariableName)?.resolved;
+          let variableInitializationNode;
+          if (variableDeclarationMatches?.defs[0]?.node.type === 'VariableDeclarator' && variableDeclarationMatches.defs[0].node.init) {
+            variableInitializationNode = variableDeclarationMatches.defs[0].node.init;
+            if (variableInitializationNode.type === 'ObjectExpression') {
+              variableInitializationNode.properties.forEach(property => {
+                handleObjectProperties(context, node, property, {
+                  loc: property.loc,
+                  messageId: 'noStaticZIndexSpecificDeclaredVariable',
+                  data: {
+                    property: (0, _get_property_name.getPropertyName)(property) || 'unknown',
+                    variableName: styleVariableName,
+                    line: String(property.loc.start.line)
+                  }
+                });
+              });
+            } else if (variableInitializationNode.type === 'CallExpression' && variableInitializationNode.callee.type === 'Identifier' && variableInitializationNode.callee.name === 'css') {
+              variableInitializationNode.arguments.forEach(argument => {
+                if (argument.type === 'ObjectExpression') {
+                  argument.properties.forEach(property => {
+                    handleObjectProperties(context, node, property, {
+                      loc: property.loc,
+                      messageId: 'noStaticZIndexSpecificDeclaredVariable',
+                      data: {
+                        property: (0, _get_property_name.getPropertyName)(property) || 'unknown',
+                        variableName: styleVariableName,
+                        line: String(property.loc.start.line)
+                      }
+                    });
+                  });
+                }
+              });
+            }
+          }
+          return;
+        }
+
+        // Handle inline object: style={{ zIndex: 10 }}
+        if (expression.type === 'ObjectExpression') {
+          const declarationPropertiesNode = expression.properties;
+          declarationPropertiesNode?.forEach(property => {
+            handleObjectProperties(context, node, property, {
+              loc: property.loc,
+              messageId: 'noStaticZIndexSpecific',
+              data: {
+                property: (0, _get_property_name.getPropertyName)(property) || 'unknown'
+              }
+            });
+          });
+          return;
+        }
+
+        // Handle inline CallExpression: css={css({ zIndex: 10 })}
+        if (expression.type === 'CallExpression' && expression.callee.type === 'Identifier' && expression.callee.name === 'css') {
+          expression.arguments.forEach(argument => {
+            if (argument.type === 'ObjectExpression') {
+              argument.properties.forEach(property => {
+                handleObjectProperties(context, node, property, {
+                  loc: node.loc,
+                  messageId: 'noStaticZIndexSpecific',
+                  data: {
+                    property: (0, _get_property_name.getPropertyName)(property) || 'unknown'
+                  }
+                });
+              });
+            }
+          });
+          return;
+        }
+
+        // Handle inline ArrayExpression: css={[...]}
+        if (expression.type === 'ArrayExpression') {
+          expression.elements.forEach(element => {
+            if (!element) return;
+            if (element.type === 'ObjectExpression') {
+              element.properties.forEach(property => {
+                handleObjectProperties(context, node, property, {
+                  loc: property.loc,
+                  messageId: 'noStaticZIndexSpecific',
+                  data: {
+                    property: (0, _get_property_name.getPropertyName)(property) || 'unknown'
+                  }
+                });
+              });
+            } else if (element.type === 'CallExpression' && element.callee.type === 'Identifier' && element.callee.name === 'css') {
+              element.arguments.forEach(argument => {
+                if (argument.type === 'ObjectExpression') {
+                  argument.properties.forEach(property => {
+                    handleObjectProperties(context, node, property, {
+                      loc: property.loc,
+                      messageId: 'noStaticZIndexSpecific',
+                      data: {
+                        property: (0, _get_property_name.getPropertyName)(property) || 'unknown'
+                      }
+                    });
+                  });
+                }
+              });
+            }
+          });
+        }
+
+        // Handle css prop with template literal or function
+        if (node.name.name === 'css') {
+          // css={`...`}
+          if (expression.type === 'TemplateLiteral') {
+            checkTemplateLiteralForZIndex(context, expression);
+            return;
+          }
+
+          // css={() => ({ ... })} or css={function() { return { ... } }}
+          if (expression.type === 'FunctionExpression' || expression.type === 'ArrowFunctionExpression') {
+            let declarationPropertiesNode = [];
+            if (expression.body.type === 'ObjectExpression') {
+              declarationPropertiesNode = expression.body.properties;
+            }
+            if (expression.body.type === 'BlockStatement') {
+              const functionReturnStatementNode = expression.body.body?.find(_node => {
+                return _node.type === 'ReturnStatement';
+              });
+              if (functionReturnStatementNode?.type === 'ReturnStatement' && functionReturnStatementNode.argument?.type === 'ObjectExpression') {
+                declarationPropertiesNode = functionReturnStatementNode.argument.properties.filter(property => property.type === 'Property');
+              }
+            }
+            if (!declarationPropertiesNode.length) {
+              return;
+            }
+            declarationPropertiesNode.forEach(property => {
+              handleObjectProperties(context, node, property, {
+                loc: property.loc,
+                messageId: 'noStaticZIndexSpecific',
+                data: {
+                  property: (0, _get_property_name.getPropertyName)(property) || 'unknown'
+                }
+              });
+            });
+            return;
+          }
+        }
+      }
+    };
+  },
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Use `z-index` definitions from `euiTheme` as opposed to static values'
+    },
+    messages: {
+      noStaticZIndexSpecificDeclaredVariable: 'Avoid using a literal z-index value for "{{property}}", use an EUI theme z-index level instead in declared variable {{variableName}} on line {{line}}',
+      noStaticZIndexSpecific: 'Avoid using a literal z-index value for "{{property}}", use an EUI theme z-index level instead',
+      noStaticZIndex: 'Avoid using a literal z-index value, use an EUI theme z-index level instead'
+    },
+    schema: []
+  },
+  defaultOptions: []
+});

package/lib/cjs/utils/get_property_name.d.ts

@@ -0,0 +1,3 @@
+import { TSESTree } from '@typescript-eslint/utils';
+export declare const getPropertyName: (propertyNode: TSESTree.Property | TSESTree.SpreadElement) => string | null;
+//# sourceMappingURL=get_property_name.d.ts.map

package/lib/cjs/utils/get_property_name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get_property_name.d.ts","sourceRoot":"","sources":["../../../src/utils/get_property_name.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,eAAO,MAAM,eAAe,GAC1B,cAAc,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,KACvD,MAAM,GAAG,IAeX,CAAC"}

package/lib/cjs/utils/get_property_name.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPropertyName = void 0;
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+const getPropertyName = propertyNode => {
+  if (propertyNode.type === 'Property') {
+    if (propertyNode.key.type === 'Identifier') {
+      return propertyNode.key.name;
+    }
+    if (propertyNode.key.type === 'Literal') {
+      return String(propertyNode.key.value);
+    }
+  } else if (propertyNode.type === 'SpreadElement' && propertyNode.argument.type === 'Identifier') {
+    return propertyNode.argument.name;
+  }
+  return null;
+};
+exports.getPropertyName = getPropertyName;

package/lib/cjs/utils/remove_attr.d.ts

@@ -0,0 +1,26 @@
+import { type TSESTree, type TSESLint } from '@typescript-eslint/utils';
+/**
+ * Computes the removal range for a JSX attribute, including a preceding space
+ * when present, to keep formatting intact after autofix.
+ *
+ * This helper is useful in ESLint rule fixers when calling `fixer.removeRange(...)`,
+ * ensuring that the attribute and its leading space are removed cleanly.
+ *
+ * @typeParam TContext - An ESLint rule context type extending `TSESLint.RuleContext`.
+ * @param context - The current ESLint rule context providing access to `SourceCode`.
+ * @param attr - The JSX attribute node to remove.
+ * @returns A readonly tuple `[start, end]` representing the inclusive start and exclusive end indexes for removal.
+ *
+ * @example
+ * ```ts
+ * context.report({
+ *   node: openingElement,
+ *   messageId: 'removeAttr',
+ *   fix: fixer => {
+ *     const [start, end] = removeAttribute(context, ariaHiddenAttr);
+ *     return fixer.removeRange([start, end]);
+ *   },
+ * });
+ **/
+export declare function removeAttribute<TContext extends TSESLint.RuleContext<string, unknown[]>>(context: TContext, attr: TSESTree.JSXAttribute): readonly [number, number];
+//# sourceMappingURL=remove_attr.d.ts.map

package/lib/cjs/utils/remove_attr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove_attr.d.ts","sourceRoot":"","sources":["../../../src/utils/remove_attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;IAsBI;AAEJ,wBAAgB,eAAe,CAC7B,QAAQ,SAAS,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,EAExD,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,QAAQ,CAAC,YAAY,6BAO5B"}

package/lib/cjs/utils/remove_attr.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeAttribute = removeAttribute;
+/**
+ * Computes the removal range for a JSX attribute, including a preceding space
+ * when present, to keep formatting intact after autofix.
+ *
+ * This helper is useful in ESLint rule fixers when calling `fixer.removeRange(...)`,
+ * ensuring that the attribute and its leading space are removed cleanly.
+ *
+ * @typeParam TContext - An ESLint rule context type extending `TSESLint.RuleContext`.
+ * @param context - The current ESLint rule context providing access to `SourceCode`.
+ * @param attr - The JSX attribute node to remove.
+ * @returns A readonly tuple `[start, end]` representing the inclusive start and exclusive end indexes for removal.
+ *
+ * @example
+ * ```ts
+ * context.report({
+ *   node: openingElement,
+ *   messageId: 'removeAttr',
+ *   fix: fixer => {
+ *     const [start, end] = removeAttribute(context, ariaHiddenAttr);
+ *     return fixer.removeRange([start, end]);
+ *   },
+ * });
+ **/
+
+function removeAttribute(context, attr) {
+  const {
+    sourceCode
+  } = context;
+  const start = attr.range[0];
+  const before = sourceCode.text[start - 1];
+  const rangeStart = before === ' ' ? start - 1 : start;
+  return [rangeStart, attr.range[1]];
+}

package/lib/esm/index.js

@@ -7,52 +7,61 @@
  * Side Public License, v 1.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+const accessible_interactive_element_1 = require("./rules/a11y/accessible_interactive_element");
+const callout_announce_on_mount_1 = require("./rules/a11y/callout_announce_on_mount");
+const consistent_is_invalid_props_1 = require("./rules/a11y/consistent_is_invalid_props");
 const href_or_on_click_1 = require("./rules/href_or_on_click");
-const no_restricted_eui_imports_1 = require("./rules/no_restricted_eui_imports");
 const no_css_color_1 = require("./rules/no_css_color");
+const no_restricted_eui_imports_1 = require("./rules/no_restricted_eui_imports");
+const no_static_z_index_1 = require("./rules/no_static_z_index");
+const no_unnamed_interactive_element_1 = require("./rules/a11y/no_unnamed_interactive_element");
+const no_unnamed_radio_group_1 = require("./rules/a11y/no_unnamed_radio_group");
+const prefer_eui_icon_tip_1 = require("./rules/a11y/prefer_eui_icon_tip");
 const require_aria_label_for_modals_1 = require("./rules/a11y/require_aria_label_for_modals");
-const consistent_is_invalid_props_1 = require("./rules/a11y/consistent_is_invalid_props");
+const require_table_caption_1 = require("./rules/a11y/require_table_caption");
 const sr_output_disabled_tooltip_1 = require("./rules/a11y/sr_output_disabled_tooltip");
-const prefer_eui_icon_tip_1 = require("./rules/a11y/prefer_eui_icon_tip");
-const no_unnamed_radio_group_1 = require("./rules/a11y/no_unnamed_radio_group");
-const no_unnamed_interactive_element_1 = require("./rules/a11y/no_unnamed_interactive_element");
 const tooltip_focusable_anchor_1 = require("./rules/a11y/tooltip_focusable_anchor");
-const callout_announce_on_mount_1 = require("./rules/a11y/callout_announce_on_mount");
-const accessible_interactive_element_1 = require("./rules/a11y/accessible_interactive_element");
-const require_table_caption_1 = require("./rules/a11y/require_table_caption");
+const badge_accessibility_rules_1 = require("./rules/a11y/badge_accessibility_rules");
+const icon_accessibility_rules_1 = require("./rules/a11y/icon_accessibility_rules");
 const config = {
     rules: {
+        'accessible-interactive-element': accessible_interactive_element_1.AccessibleInteractiveElements,
+        'callout-announce-on-mount': callout_announce_on_mount_1.CallOutAnnounceOnMount,
+        'consistent-is-invalid-props': consistent_is_invalid_props_1.ConsistentIsInvalidProps,
         'href-or-on-click': href_or_on_click_1.HrefOnClick,
-        'no-restricted-eui-imports': no_restricted_eui_imports_1.NoRestrictedEuiImports,
         'no-css-color': no_css_color_1.NoCssColor,
+        'no-restricted-eui-imports': no_restricted_eui_imports_1.NoRestrictedEuiImports,
+        'no-static-z-index': no_static_z_index_1.NoStaticZIndex,
+        'no-unnamed-interactive-element': no_unnamed_interactive_element_1.NoUnnamedInteractiveElement,
+        'no-unnamed-radio-group': no_unnamed_radio_group_1.NoUnnamedRadioGroup,
+        'prefer-eui-icon-tip': prefer_eui_icon_tip_1.PreferEuiIconTip,
         'require-aria-label-for-modals': require_aria_label_for_modals_1.RequireAriaLabelForModals,
-        'consistent-is-invalid-props': consistent_is_invalid_props_1.ConsistentIsInvalidProps,
+        'require-table-caption': require_table_caption_1.RequireTableCaption,
         'sr-output-disabled-tooltip': sr_output_disabled_tooltip_1.ScreenReaderOutputDisabledTooltip,
-        'prefer-eui-icon-tip': prefer_eui_icon_tip_1.PreferEuiIconTip,
-        'no-unnamed-radio-group': no_unnamed_radio_group_1.NoUnnamedRadioGroup,
-        'callout-announce-on-mount': callout_announce_on_mount_1.CallOutAnnounceOnMount,
-        'no-unnamed-interactive-element': no_unnamed_interactive_element_1.NoUnnamedInteractiveElement,
         'tooltip-focusable-anchor': tooltip_focusable_anchor_1.TooltipFocusableAnchor,
-        'accessible-interactive-element': accessible_interactive_element_1.AccessibleInteractiveElements,
-        'require-table-caption': require_table_caption_1.RequireTableCaption,
+        'badge-accessibility-rules': badge_accessibility_rules_1.EuiBadgeAccessibilityRules,
+        'icon-accessibility-rules': icon_accessibility_rules_1.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/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAGH,+DAAuD;AACvD,iFAA2E;AAC3E,uDAAkD;AAElD,8FAAuF;AACvF,0FAAoF;AACpF,wFAA4F;AAC5F,0EAAoE;AACpE,gFAA0E;AAC1E,gGAA0F;AAC1F,oFAA+E;AAC/E,sFAAgF;AAChF,gGAA4F;AAC5F,8EAAyE;AAEzE,MAAM,MAAM,GAAG;IACb,KAAK,EAAE;QACL,kBAAkB,EAAE,8BAAW;QAC/B,2BAA2B,EAAE,kDAAsB;QACnD,cAAc,EAAE,yBAAU;QAC1B,+BAA+B,EAAE,yDAAyB;QAC1D,6BAA6B,EAAE,sDAAwB;QACvD,4BAA4B,EAAE,8DAAiC;QAC/D,qBAAqB,EAAE,sCAAgB;QACvC,wBAAwB,EAAG,4CAAmB;QAC9C,2BAA2B,EAAE,kDAAsB;QACnD,gCAAgC,EAAE,4DAA2B;QAC7D,0BAA0B,EAAE,iDAAsB;QAClD,gCAAgC,EAAE,8DAA6B;QAC/D,uBAAuB,EAAE,2CAAmB;KAC7C;IACD,OAAO,EAAE;QACP,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,4BAA4B,CAAC;YACvC,KAAK,EAAE;gBACL,+BAA+B,EAAE,MAAM;gBACvC,wCAAwC,EAAE,MAAM;gBAChD,2BAA2B,EAAE,MAAM;gBACnC,4CAA4C,EAAE,MAAM;gBACpD,0CAA0C,EAAE,MAAM;gBAClD,yCAAyC,EAAE,MAAM;gBACjD,kCAAkC,EAAE,MAAM;gBAC1C,qCAAqC,EAAE,MAAM;gBAC7C,wCAAwC,EAAE,MAAM;gBAChD,6CAA6C,EAAE,MAAM;gBACrD,uCAAuC,EAAE,MAAM;gBAC/C,6CAA6C,EAAE,MAAM;gBACrD,oCAAoC,EAAE,MAAM;aAC7C;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;AAGH,gGAA4F;AAC5F,sFAAgF;AAChF,0FAAoF;AACpF,+DAAuD;AACvD,uDAAkD;AAClD,iFAA2E;AAC3E,iEAA2D;AAC3D,gGAA0F;AAC1F,gFAA0E;AAC1E,0EAAoE;AACpE,8FAAuF;AACvF,8EAAyE;AACzE,wFAA4F;AAC5F,oFAA+E;AAC/E,sFAAoF;AACpF,oFAAkF;AAElF,MAAM,MAAM,GAAG;IACb,KAAK,EAAE;QACL,gCAAgC,EAAE,8DAA6B;QAC/D,2BAA2B,EAAE,kDAAsB;QACnD,6BAA6B,EAAE,sDAAwB;QACvD,kBAAkB,EAAE,8BAAW;QAC/B,cAAc,EAAE,yBAAU;QAC1B,2BAA2B,EAAE,kDAAsB;QACnD,mBAAmB,EAAE,kCAAc;QACnC,gCAAgC,EAAE,4DAA2B;QAC7D,wBAAwB,EAAG,4CAAmB;QAC9C,qBAAqB,EAAE,sCAAgB;QACvC,+BAA+B,EAAE,yDAAyB;QAC1D,uBAAuB,EAAE,2CAAmB;QAC5C,4BAA4B,EAAE,8DAAiC;QAC/D,0BAA0B,EAAE,iDAAsB;QAClD,2BAA2B,EAAE,sDAA0B;QACvD,0BAA0B,EAAE,oDAAyB;KACtD;IACD,OAAO,EAAE;QACP,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,4BAA4B,CAAC;YACvC,KAAK,EAAE;gBACL,6CAA6C,EAAE,MAAM;gBACrD,wCAAwC,EAAE,MAAM;gBAChD,0CAA0C,EAAE,MAAM;gBAClD,+BAA+B,EAAE,MAAM;gBACvC,2BAA2B,EAAE,MAAM;gBACnC,wCAAwC,EAAE,MAAM;gBAChD,gCAAgC,EAAE,MAAM;gBACxC,6CAA6C,EAAE,MAAM;gBACrD,qCAAqC,EAAE,MAAM;gBAC7C,kCAAkC,EAAE,MAAM;gBAC1C,4CAA4C,EAAE,MAAM;gBACpD,oCAAoC,EAAE,MAAM;gBAC5C,yCAAyC,EAAE,MAAM;gBACjD,uCAAuC,EAAE,MAAM;gBAC/C,wCAAwC,EAAE,MAAM;gBAChD,uCAAuC,EAAE,MAAM;aAChD;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC"}

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

@@ -0,0 +1,2 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const EuiBadgeAccessibilityRules: ESLintUtils.RuleModule<"sameCallback" | "iconOnClickAriaLabelWithoutIconOnClick" | "onClickAriaLabelWithoutOnClick", [], unknown, ESLintUtils.RuleListener>;

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

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EuiBadgeAccessibilityRules = void 0;
+const utils_1 = require("@typescript-eslint/utils");
+const BADGE_COMPONENT = 'EuiBadge';
+exports.EuiBadgeAccessibilityRules = utils_1.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: [],
+});
+//# sourceMappingURL=badge_accessibility_rules.js.map