@elastic/eslint-plugin-eui 2.7.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

@@ -14,6 +14,8 @@ var _require_aria_label_for_modals = require("./rules/a11y/require_aria_label_fo
 var _require_table_caption = require("./rules/a11y/require_table_caption");
 var _sr_output_disabled_tooltip = require("./rules/a11y/sr_output_disabled_tooltip");
 var _tooltip_focusable_anchor = require("./rules/a11y/tooltip_focusable_anchor");
+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
@@ -37,7 +39,9 @@ const config = {
     'require-aria-label-for-modals': _require_aria_label_for_modals.RequireAriaLabelForModals,
     'require-table-caption': _require_table_caption.RequireTableCaption,
     'sr-output-disabled-tooltip': _sr_output_disabled_tooltip.ScreenReaderOutputDisabledTooltip,
-    'tooltip-focusable-anchor': _tooltip_focusable_anchor.TooltipFocusableAnchor
+    'tooltip-focusable-anchor': _tooltip_focusable_anchor.TooltipFocusableAnchor,
+    'badge-accessibility-rules': _badge_accessibility_rules.EuiBadgeAccessibilityRules,
+    'icon-accessibility-rules': _icon_accessibility_rules.EuiIconAccessibilityRules
   },
   configs: {
     recommended: {
@@ -56,7 +60,9 @@ const config = {
         '@elastic/eui/require-aria-label-for-modals': 'warn',
         '@elastic/eui/require-table-caption': 'warn',
         '@elastic/eui/sr-output-disabled-tooltip': 'warn',
-        '@elastic/eui/tooltip-focusable-anchor': 'warn'
+        '@elastic/eui/tooltip-focusable-anchor': '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/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

@@ -21,6 +21,8 @@ const require_aria_label_for_modals_1 = require("./rules/a11y/require_aria_label
 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 tooltip_focusable_anchor_1 = require("./rules/a11y/tooltip_focusable_anchor");
+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,
@@ -37,6 +39,8 @@ const config = {
         'require-table-caption': require_table_caption_1.RequireTableCaption,
         'sr-output-disabled-tooltip': sr_output_disabled_tooltip_1.ScreenReaderOutputDisabledTooltip,
         'tooltip-focusable-anchor': tooltip_focusable_anchor_1.TooltipFocusableAnchor,
+        'badge-accessibility-rules': badge_accessibility_rules_1.EuiBadgeAccessibilityRules,
+        'icon-accessibility-rules': icon_accessibility_rules_1.EuiIconAccessibilityRules
     },
     configs: {
         recommended: {
@@ -56,6 +60,8 @@ const config = {
                 '@elastic/eui/require-table-caption': 'warn',
                 '@elastic/eui/sr-output-disabled-tooltip': 'warn',
                 '@elastic/eui/tooltip-focusable-anchor': '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,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;AAE/E,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;KACnD;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;aAChD;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

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge_accessibility_rules.js","sourceRoot":"","sources":["../../../../src/rules/a11y/badge_accessibility_rules.ts"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EuiIconAccessibilityRules = void 0;
+const utils_1 = require("@typescript-eslint/utils");
+const remove_attr_1 = require("../../utils/remove_attr");
+const COMPONENT = 'EuiIcon';
+exports.EuiIconAccessibilityRules = utils_1.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_1.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: []
+});
+//# sourceMappingURL=icon_accessibility_rules.js.map

package/lib/esm/rules/a11y/icon_accessibility_rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon_accessibility_rules.js","sourceRoot":"","sources":["../../../../src/rules/a11y/icon_accessibility_rules.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+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];

package/lib/esm/utils/remove_attr.js

@@ -0,0 +1,34 @@
+"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]];
+}
+//# sourceMappingURL=remove_attr.js.map

package/lib/esm/utils/remove_attr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove_attr.js","sourceRoot":"","sources":["../../../src/utils/remove_attr.ts"],"names":[],"mappings":";;AA0BA,0CAWC;AAnCD;;;;;;;;;;;;;;;;;;;;;;IAsBI;AAEJ,SAAgB,eAAe,CAG7B,OAAiB,EACjB,IAA2B;IAC3B,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEtD,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAU,CAAC;AAC9C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eslint-plugin-eui",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",