@elastic/eslint-plugin-eui 3.0.0 → 3.1.0

package/README.md

@@ -549,6 +549,69 @@ The rule only fires when `variant="selection"` is set as a static string. Dynami
 </EuiButtonGroup>
 ```
 
+### `@elastic/eui/no-nested-interactive-element`
+
+Disallow interactive elements nested inside other interactive elements.
+
+Nesting a control inside another control produces invalid HTML (`<button>` inside `<button>`, `<a>` inside `<a>`) and leaves the inner control unreachable or ambiguous for keyboard and screen-reader users.
+
+The rule checks three groups of outer elements:
+
+- **Native leaf controls** — `button` and `a` with `href`.
+- **Leaf controls** — components that render their content inside a single focusable element: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuiContextMenuItem`, `EuiFacetButton`, `EuiFilterButton`, `EuiHeaderLink`, `EuiHeaderSectionItemButton`, `EuiKeyPadMenuItem`, `EuiLink`, `EuiListGroupItem`, `EuiStepHorizontal`, and `EuiTab`. Some of these only render a control when given the right props — `EuiListGroupItem` is an `<li>` without `onClick`/`href`, `EuiContextMenuItem` a `<div>` without `onClick`/`href`/`toolTipContent` — and are checked accordingly. Composite components whose purpose is to host controls (`EuiBasicTable`, `EuiSelectable`, `EuiSideNav`, `EuiButtonGroup`, …) are intentionally not checked.
+- **Clickable `EuiCard`** — a card with `onClick` or `href` forwards clicks anywhere in the card to its title link, so a control in `title`, `description`, `footer`, `image`, or the card's children fires both its own action and the card's. Statically disabled cards (`isDisabled`) attach no handler and are skipped, as are `selectable` cards: pairing the select button with a footer action is a pattern EUI itself ships.
+
+Beyond children, the rule also checks props whose value renders inside the focusable element: `label` and `icon` on `EuiListGroupItem`, `label` on `EuiKeyPadMenuItem`, `title` on `EuiStepHorizontal`, `prepend`/`append` on `EuiTab`, `icon` on `EuiFacetButton` and `EuiContextMenuItem`, and `notification` on `EuiHeaderSectionItemButton`. Props that render a **sibling** control (`EuiListGroupItem`'s `extraAction`) or render into a portal (`EuiContextMenuItem`'s `toolTipContent`) are not reported.
+
+What counts as nested content:
+
+- Non-interactive wrappers (`EuiFlexGroup`, `EuiText`, `EuiToolTip`, …) are traversed, so a control behind them is still found.
+- Controls referenced through a local variable or a local arrow-function component are resolved and checked.
+- Conditionally-interactive elements only count as interactive content when the relevant prop is present:
+  - `EuiBadge`: `onClick`, `href`, or `iconOnClick`
+  - `EuiBetaBadge`: `onClick`, `href`, or `tooltipContent`
+  - `EuiCard`: `onClick`, `href`, or `selectable`
+  - `EuiContextMenuItem`: `onClick`, `href`, or `toolTipContent`
+  - `EuiListGroupItem`: `onClick` or `href` (`extraAction` is checked separately as a sibling `EuiButtonIcon`)
+  - Native `<a>` and `EuiHeaderLogo`: `href` (including `href=""`)
+- Note the exact prop casing: `EuiBetaBadge` uses `tooltipContent`, while `EuiContextMenuItem` uses `toolTipContent`.
+- Dynamic content (e.g. `{renderLabel()}`) cannot be statically analyzed and is skipped.
+
+#### Examples
+
+```tsx
+// ✗ Bad - link inside a button
+<EuiButton onClick={onClick}>
+  Read the <EuiLink href="/docs">docs</EuiLink>
+</EuiButton>
+
+// ✓ Render the controls as siblings
+<EuiFlexGroup>
+  <EuiButton onClick={onClick}>Save</EuiButton>
+  <EuiLink href="/docs">Read the docs</EuiLink>
+</EuiFlexGroup>
+```
+
+```tsx
+// ✗ Bad - the footer button also triggers the card's `onClick`
+<EuiCard
+  title="Dashboard"
+  description="View metrics"
+  onClick={onClick}
+  footer={<EuiButton>Open</EuiButton>}
+/>
+
+// ✓ One action per card - either a clickable card…
+<EuiCard title="Dashboard" description="View metrics" onClick={onClick} />
+
+// ✓ …or a footer action
+<EuiCard
+  title="Dashboard"
+  description="View metrics"
+  footer={<EuiButton>Open</EuiButton>}
+/>
+```
+
 ## Testing
 
 ### Running unit tests
@@ -570,7 +633,7 @@ To test the local changes to the plugin, you must:
 3. Build the package: `yarn build`
 4. Run `yalc publish` in the plugin's directory to publish it locally.
 5. In your project's directory, run `yalc add @elastic/eslint-plugin-eui` to link the locally published package.
-6. Install dependencies: `yarn` (if you're a Kibana contributor, run `yarn kbn bootstrap --no-validate`).
+6. Install dependencies using your package manager.
 7. After making further changes to the plugin, repeat the steps from 3.
 
 ## Publishing

package/lib/cjs/index.js

@@ -8,6 +8,7 @@ var _href_or_on_click = require("./rules/href_or_on_click");
 var _require_href_for_link = require("./rules/require_href_for_link");
 var _no_css_color = require("./rules/no_css_color");
 var _no_nested_copy_tooltip = require("./rules/a11y/no_nested_copy_tooltip");
+var _no_nested_interactive_element = require("./rules/a11y/no_nested_interactive_element");
 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");
@@ -43,6 +44,7 @@ const config = {
     'no-css-color': _no_css_color.NoCssColor,
     'no-deprecated-icon-aliases': _no_deprecated_icon_aliases.NoDeprecatedIconAliases,
     'no-nested-copy-tooltip': _no_nested_copy_tooltip.NoNestedCopyTooltip,
+    'no-nested-interactive-element': _no_nested_interactive_element.NoNestedInteractiveElement,
     '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,
@@ -75,6 +77,7 @@ const config = {
         '@elastic/eui/no-css-color': 'warn',
         '@elastic/eui/no-deprecated-icon-aliases': 'warn',
         '@elastic/eui/no-nested-copy-tooltip': 'warn',
+        '@elastic/eui/no-nested-interactive-element': 'warn',
         '@elastic/eui/no-restricted-eui-imports': 'warn',
         '@elastic/eui/no-static-z-index': 'warn',
         '@elastic/eui/no-unnamed-interactive-element': 'warn',

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"no_nested_interactive_element.d.ts","sourceRoot":"","sources":["../../../../src/rules/a11y/no_nested_interactive_element.ts"],"names":[],"mappings":"AAQA,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAqNtE,eAAO,MAAM,0BAA0B,6GAgErC,CAAC"}

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

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoNestedInteractiveElement = void 0;
+var _utils = require("@typescript-eslint/utils");
+var _constants = require("../../utils/constants");
+var _get_element_name = require("../../utils/get_element_name");
+var _has_meaningful_attr = require("../../utils/has_meaningful_attr");
+var _is_interactive_element = require("../../utils/is_interactive_element");
+var _walk_jsx_children = require("../../utils/walk_jsx_children");
+/*
+ * 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.
+ */
+
+/** Describes why, and where, an element must not contain other controls. */
+
+const CARD = 'EuiCard';
+const LIST_GROUP_ITEM = 'EuiListGroupItem';
+const LIST_GROUP_ITEM_EXTRA_ACTION = 'EuiButtonIcon';
+
+/**
+ * Leaf-control props whose value renders *inside* the focusable element, in
+ * addition to children. Props that render a **sibling** control (e.g.
+ * `EuiListGroupItem` `extraAction`) are intentionally absent, as are props
+ * rendered into a portal (e.g. `EuiContextMenuItem` `toolTipContent`).
+ */
+const LEAF_CONTENT_PROPS = {
+  EuiContextMenuItem: ['icon'],
+  EuiFacetButton: ['icon'],
+  EuiHeaderSectionItemButton: ['notification'],
+  EuiKeyPadMenuItem: ['label'],
+  EuiListGroupItem: ['icon', 'label'],
+  EuiStepHorizontal: ['title'],
+  EuiTab: ['append', 'prepend']
+};
+
+/**
+ * `EuiCard` props rendered inside the card wrapper, which is what carries the
+ * forwarding click handler. `betaBadgeProps` can also produce a control, but it
+ * is configured through an object rather than JSX and is not analysed here.
+ */
+const CARD_CONTENT_PROPS = ['description', 'footer', 'image', 'title'];
+const LEAF_COMPONENTS = new Set(_constants.LEAF_INTERACTIVE_EUI_COMPONENTS);
+const LEAF_HTML_ELEMENTS = new Set(['a', 'button']);
+const COMPONENTS_WITH_CHILDREN_PROP = new Set(['a', CARD, 'button', 'EuiBadge', 'EuiBetaBadge', 'EuiButton', 'EuiButtonEmpty', 'EuiContextMenuItem', 'EuiFacetButton', 'EuiFilterButton', 'EuiHeaderLink', 'EuiHeaderSectionItemButton', 'EuiKeyPadMenuItem', 'EuiLink', 'EuiTab']);
+
+/**
+ * Whether a boolean prop is set to a statically-known `true` (`<El prop />` or
+ * `<El prop={true} />`). Dynamic values are treated as *not* set, so that a
+ * card gated on e.g. `isDisabled={isLoading}` is still checked.
+ */
+function isStaticallyTrue(openingElement, propName) {
+  const attr = openingElement.attributes.find(a => a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier' && a.name.name === propName);
+  if (!attr) return false;
+  if (attr.value == null) return true;
+  return attr.value.type === 'JSXExpressionContainer' && attr.value.expression.type === 'Literal' && attr.value.expression.value === true;
+}
+function getTarget(componentName, node) {
+  const {
+    openingElement
+  } = node;
+  if (componentName === CARD) {
+    // A card with `onClick`/`href` attaches a wrapper click handler that
+    // forwards to the title link, so a control anywhere in its content fires
+    // both its own action and the card's. A disabled card attaches no handler.
+    //
+    // `selectable` cards are deliberately not a target: pairing the select
+    // button with a footer action is a pattern EUI itself ships. It is only
+    // safe when the footer control stops propagation, which this rule cannot
+    // verify statically — see the PR discussion.
+    if ((0, _has_meaningful_attr.hasMeaningfulAttr)(openingElement, 'selectable')) {
+      return null;
+    }
+    return (0, _is_interactive_element.hasInteractivityProp)(openingElement) && !isStaticallyTrue(openingElement, 'isDisabled') ? {
+      messageId: 'clickableCardContent',
+      contentProps: getComponentContentProps(componentName)
+    } : null;
+  }
+  if (LEAF_HTML_ELEMENTS.has(componentName) && (0, _is_interactive_element.isInteractiveElement)(node)) {
+    return {
+      messageId: 'nestedInteractive',
+      contentProps: []
+    };
+  }
+
+  // Several leaf components only render a control when given the right props
+  // (`EuiListGroupItem` is an `<li>` without an action, `EuiContextMenuItem` a
+  // `<div>`), so the name alone is not enough to make it a target.
+  if (LEAF_COMPONENTS.has(componentName) && (0, _is_interactive_element.isInteractiveElement)(node)) {
+    return {
+      messageId: 'nestedInteractive',
+      contentProps: getComponentContentProps(componentName)
+    };
+  }
+  return null;
+}
+
+/** The element's children plus the expression value of each content prop. */
+function getContentRoots(node, componentName, contentProps) {
+  const roots = [...node.children];
+  for (const attr of node.openingElement.attributes) {
+    if (attr.type !== 'JSXAttribute' || attr.name.type !== 'JSXIdentifier') {
+      continue;
+    }
+    const isChildrenProp = attr.name.name === 'children' && componentName != null && COMPONENTS_WITH_CHILDREN_PROP.has(componentName);
+    if (!isChildrenProp && !contentProps.includes(attr.name.name)) continue;
+    // Only `prop={<JSX />}` can hold an element; a string literal cannot.
+    if (attr.value?.type !== 'JSXExpressionContainer') continue;
+    if (attr.value.expression.type === 'JSXEmptyExpression') continue;
+    roots.push(attr.value.expression);
+  }
+  return roots;
+}
+function getComponentContentProps(componentName) {
+  if (componentName === CARD) {
+    return CARD_CONTENT_PROPS;
+  }
+  return LEAF_CONTENT_PROPS[componentName ?? ''] ?? [];
+}
+function getSyntheticInteractiveElementName(element) {
+  const componentName = (0, _get_element_name.getElementName)(element.openingElement);
+  if (componentName === LIST_GROUP_ITEM && (0, _has_meaningful_attr.hasMeaningfulAttr)(element.openingElement, 'extraAction')) {
+    return LIST_GROUP_ITEM_EXTRA_ACTION;
+  }
+  return null;
+}
+function getDescendantRoots(node) {
+  const componentName = (0, _get_element_name.getElementName)(node.openingElement);
+
+  // `getContentRoots` also adds supported `children={...}` content based on
+  // the component name, so descendants are traversed the same way as targets.
+  return getContentRoots(node, componentName, getComponentContentProps(componentName));
+}
+function shouldSkipNestedScanElement(element) {
+  const elementName = (0, _get_element_name.getElementName)(element.openingElement);
+  if (!elementName) return true;
+  if (getSyntheticInteractiveElementName(element)) return false;
+
+  // Custom components stay traversable here; local ones are resolved by
+  // `walkJsxChildren` before this guard runs, and unresolved ones remain opaque.
+  if (/^[A-Z]/.test(elementName) && !elementName.startsWith('Eui')) {
+    return true;
+  }
+  return !(0, _is_interactive_element.isInteractiveElement)(element);
+}
+const NoNestedInteractiveElement = exports.NoNestedInteractiveElement = _utils.ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    return {
+      JSXElement(node) {
+        const componentName = (0, _get_element_name.getElementName)(node.openingElement);
+        if (!componentName) return;
+        const target = getTarget(componentName, node);
+        if (!target) return;
+
+        // Non-interactive elements (layout wrappers, `EuiToolTip`, text, …) are
+        // walked through; interactive ones are reported and not descended into,
+        // so this scan flags only the outermost control of a subtree. Anything
+        // deeper is reported against its own nearest target, when that target
+        // is itself scanned.
+        const reported = new Set();
+        for (const root of getContentRoots(node, componentName, target.contentProps)) {
+          (0, _walk_jsx_children.walkJsxChildren)(root, leaf => {
+            if (leaf.type !== 'JSXElement' || reported.has(leaf)) return;
+            const elementName = getSyntheticInteractiveElementName(leaf) ?? (0, _get_element_name.getElementName)(leaf.openingElement);
+            if (!elementName) return;
+            reported.add(leaf);
+            context.report({
+              node: leaf.openingElement,
+              messageId: target.messageId,
+              data: {
+                componentName,
+                elementName
+              }
+            });
+          }, {
+            sourceCode: context.sourceCode,
+            shouldSkip: shouldSkipNestedScanElement,
+            getChildren: getDescendantRoots
+          });
+        }
+      }
+    };
+  },
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow interactive elements inside other interactive elements'
+    },
+    schema: [],
+    messages: {
+      nestedInteractive: '{{ elementName }} is nested inside {{ componentName }}, which renders a single focusable element. Nested controls are invalid HTML and not reliably reachable by keyboard or screen reader. Render {{ elementName }} as a sibling instead.',
+      clickableCardContent: '{{ elementName }} inside a clickable {{ componentName }} also triggers the card `onClick`/`href` when activated. Use one action per card: remove the card `onClick`/`href`, or move {{ elementName }} outside the card.'
+    }
+  },
+  defaultOptions: []
+});

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip_no_interactive_content.d.ts","sourceRoot":"","sources":["../../../../src/rules/a11y/tooltip_no_interactive_content.ts"],"names":[],"mappings":"AAQA,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AA4BtE,eAAO,MAAM,2BAA2B,uFAgFtC,CAAC"}
+{"version":3,"file":"tooltip_no_interactive_content.d.ts","sourceRoot":"","sources":["../../../../src/rules/a11y/tooltip_no_interactive_content.ts"],"names":[],"mappings":"AAQA,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAyCtE,eAAO,MAAM,2BAA2B,uFA8EtC,CAAC"}

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

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TooltipNoInteractiveContent = void 0;
 var _utils = require("@typescript-eslint/utils");
-var _constants = require("../../utils/constants");
 var _walk_jsx_children = require("../../utils/walk_jsx_children");
 var _get_element_name = require("../../utils/get_element_name");
+var _has_meaningful_attr = require("../../utils/has_meaningful_attr");
+var _is_interactive_element = require("../../utils/is_interactive_element");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,9 +19,27 @@ var _get_element_name = require("../../utils/get_element_name");
 
 const TOOLTIP_COMPONENTS = ['EuiToolTip', 'EuiIconTip'];
 const TOOLTIP_CONTENT_PROPS = ['content', 'title'];
-const INTERACTIVE_HTML_ELEMENTS = ['a', 'button', 'input', 'select', 'textarea'];
-const CONDITIONALLY_INTERACTIVE_SET = new Set(_constants.CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS);
-const INTERACTIVE_ELEMENTS = new Set([...INTERACTIVE_HTML_ELEMENTS, ..._constants.INTERACTIVE_EUI_COMPONENTS.filter(c => !CONDITIONALLY_INTERACTIVE_SET.has(c))]);
+const LIST_GROUP_ITEM = 'EuiListGroupItem';
+const LIST_GROUP_ITEM_EXTRA_ACTION = 'EuiButtonIcon';
+function getSyntheticInteractiveElementName(element) {
+  const componentName = (0, _get_element_name.getElementName)(element.openingElement);
+  if (componentName === LIST_GROUP_ITEM && (0, _has_meaningful_attr.hasMeaningfulAttr)(element.openingElement, 'extraAction')) {
+    return LIST_GROUP_ITEM_EXTRA_ACTION;
+  }
+  return null;
+}
+function shouldSkipTooltipContentElement(element) {
+  const elementName = (0, _get_element_name.getElementName)(element.openingElement);
+  if (!elementName) return true;
+  if (getSyntheticInteractiveElementName(element)) return false;
+
+  // Custom components stay traversable here; local ones are resolved by
+  // `walkJsxChildren` before this guard runs, and unresolved ones remain opaque.
+  if (/^[A-Z]/.test(elementName) && !elementName.startsWith('Eui')) {
+    return true;
+  }
+  return !(0, _is_interactive_element.isInteractiveElement)(element);
+}
 const TooltipNoInteractiveContent = exports.TooltipNoInteractiveContent = _utils.ESLintUtils.RuleCreator.withoutDocs({
   create(context) {
     return {
@@ -48,24 +67,24 @@ const TooltipNoInteractiveContent = exports.TooltipNoInteractiveContent = _utils
           let found = false;
           (0, _walk_jsx_children.walkJsxChildren)(expression, leaf => {
             if (found || leaf.type !== 'JSXElement') return;
-            const el = leaf;
-            const name = (0, _get_element_name.getElementName)(el.openingElement);
-            if (!name || !INTERACTIVE_ELEMENTS.has(name)) return;
+            const syntheticElementName = getSyntheticInteractiveElementName(leaf);
+            const elementName = syntheticElementName ?? (0, _get_element_name.getElementName)(leaf.openingElement);
+            if (!elementName || !syntheticElementName && !(0, _is_interactive_element.isInteractiveElement)(leaf)) {
+              return;
+            }
             context.report({
-              node: el.openingElement,
+              node: leaf.openingElement,
               messageId: 'noInteractiveContent',
               data: {
                 propName: attr.name.name,
                 componentName,
-                elementName: name
+                elementName
               }
             });
             found = true;
           }, {
-            shouldSkip: el => {
-              const name = (0, _get_element_name.getElementName)(el.openingElement);
-              return !name || !INTERACTIVE_ELEMENTS.has(name);
-            }
+            sourceCode: context.sourceCode,
+            shouldSkip: shouldSkipTooltipContentElement
           });
         }
       }

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

@@ -25,15 +25,39 @@ export declare const NON_INTERACTIVE_HTML_TAGS: string[];
  */
 export declare const INTERACTIVE_EUI_COMPONENTS: string[];
 /**
- * EUI components that are only interactive when `onClick` or `href` is provided.
- * Without those props they render as a plain non-focusable element (span/div),
- * so rules that need to distinguish unconditionally-interactive components should
- * exclude these.
+ * EUI components that render a focusable element only when given one of the
+ * listed props. Without them they render plain, non-focusable markup — a
+ * `<span>`, `<div>`, or `<li>` — so rules that need an unconditionally
+ * interactive element must check the props rather than the name alone.
+ *
+ * - `EuiBadge` / `EuiBetaBadge` render a `<span>` unless clickable.
+ * - `EuiCard` renders a plain panel; `selectable` also makes it clickable by
+ *   rendering an `EuiCardSelect` button.
+ * - `EuiContextMenuItem` renders a `<div>` unless it has an action, and is a
+ *   `<button>` when given `toolTipContent`.
+ * - `EuiHeaderLogo` renders an `<a>` without an `href` attribute, which is not
+ *   focusable.
+ * - `EuiListGroupItem` renders an `<li>` unless it has an action.
+ */
+export declare const CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS: Record<string, string[]>;
+/**
+ * Native HTML elements that are focusable only when given one of the listed
+ * attributes. An `<a>` without `href` is not a link and is not focusable.
+ */
+export declare const CONDITIONALLY_INTERACTIVE_HTML_ELEMENTS: Record<string, string[]>;
+/**
+ * Conditional interactive props whose presence alone is enough to make the
+ * rendered element focusable, even when the statically-known value is `""`.
+ *
+ * Native anchors and `EuiHeaderLogo` both forward `href=""` to the DOM, which
+ * still creates a focusable same-document link.
  */
-export declare const CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS: string[];
+export declare const PRESENCE_INTERACTIVE_PROPS: Record<string, string[]>;
 export declare const HTML_TEXT_ELEMENTS: Set<string>;
 export declare const EUI_TEXT_COMPONENTS: Set<string>;
 export declare const HTML_ACTION_ELEMENTS: Set<string>;
+/** Native HTML elements that are focusable and respond to user input. */
+export declare const INTERACTIVE_HTML_ELEMENTS: string[];
 /**
  * Transparent layout wrappers inside `EuiCallOut` children that the rule should
  * traverse rather than treat as opaque custom components.
@@ -45,4 +69,17 @@ export declare const CALLOUT_LAYOUT_CONTAINERS: Set<string>;
  * Rules treat these the same as `HTML_TEXT_ELEMENTS` / `EUI_TEXT_COMPONENTS`.
  */
 export declare const I18N_TEXT_COMPONENTS: Set<string>;
+/**
+ * EUI components that render their content **inside** a single focusable
+ * `<button>` or `<a>`.
+ *
+ * Nesting another interactive element in their content produces invalid HTML
+ * (e.g. `<button>` inside `<button>`) and leaves the inner control unreachable
+ * or ambiguous for keyboard and screen-reader users.
+ *
+ * This is deliberately narrower than `INTERACTIVE_EUI_COMPONENTS`, which also
+ * contains composite components (`EuiBasicTable`, `EuiSelectable`, `EuiSideNav`,
+ * …) whose entire purpose is to host controls.
+ */
+export declare const LEAF_INTERACTIVE_EUI_COMPONENTS: string[];
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,yBAAyB,UAyCrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,0BAA0B,UA8CtC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,wCAAwC,UAIpD,CAAC;AAEF,eAAO,MAAM,kBAAkB,aAS7B,CAAC;AAEH,eAAO,MAAM,mBAAmB,aAO9B,CAAC;AAEH,eAAO,MAAM,oBAAoB,aAA2B,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,yBAAyB,aAMpC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,aAAgC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,yBAAyB,UAyCrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,0BAA0B,UA8CtC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,wCAAwC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAQ3E,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,uCAAuC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAG1E,CAAC;AAEJ;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAG/D,CAAC;AAEF,eAAO,MAAM,kBAAkB,aAS7B,CAAC;AAEH,eAAO,MAAM,mBAAmB,aAO9B,CAAC;AAEH,eAAO,MAAM,oBAAoB,aAA2B,CAAC;AAE7D,yEAAyE;AACzE,eAAO,MAAM,yBAAyB,UAMrC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,aAMpC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,aAAgC,CAAC;AAElE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,+BAA+B,UAc3C,CAAC"}

package/lib/cjs/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NON_INTERACTIVE_HTML_TAGS = exports.INTERACTIVE_EUI_COMPONENTS = exports.I18N_TEXT_COMPONENTS = exports.HTML_TEXT_ELEMENTS = exports.HTML_ACTION_ELEMENTS = exports.EUI_TEXT_COMPONENTS = exports.CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS = exports.CALLOUT_LAYOUT_CONTAINERS = void 0;
+exports.PRESENCE_INTERACTIVE_PROPS = exports.NON_INTERACTIVE_HTML_TAGS = exports.LEAF_INTERACTIVE_EUI_COMPONENTS = exports.INTERACTIVE_HTML_ELEMENTS = exports.INTERACTIVE_EUI_COMPONENTS = exports.I18N_TEXT_COMPONENTS = exports.HTML_TEXT_ELEMENTS = exports.HTML_ACTION_ELEMENTS = exports.EUI_TEXT_COMPONENTS = exports.CONDITIONALLY_INTERACTIVE_HTML_ELEMENTS = exports.CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS = exports.CALLOUT_LAYOUT_CONTAINERS = 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
@@ -41,16 +41,55 @@ const NON_INTERACTIVE_HTML_TAGS = exports.NON_INTERACTIVE_HTML_TAGS = ['div', 's
 const INTERACTIVE_EUI_COMPONENTS = exports.INTERACTIVE_EUI_COMPONENTS = ['EuiBadge', 'EuiBasicTable', 'EuiBetaBadge', 'EuiBreadcrumbs', 'EuiButton', 'EuiButtonEmpty', 'EuiButtonGroup', 'EuiButtonIcon', 'EuiCard', 'EuiCheckableCard', 'EuiCheckbox', 'EuiColorPicker', 'EuiComboBox', 'EuiContextMenuItem', 'EuiDatePicker', 'EuiDualRange', 'EuiFacetButton', 'EuiFieldNumber', 'EuiFieldPassword', 'EuiFieldSearch', 'EuiFieldText', 'EuiFilterButton', 'EuiFilterSelectItem', 'EuiFilterSelectable', 'EuiHeaderLink', 'EuiHeaderLogo', 'EuiHeaderSectionItemButton', 'EuiInMemoryTable', 'EuiKeyPadMenuItem', 'EuiLink', 'EuiListGroupItem', 'EuiPagination', 'EuiPinnableListGroup', 'EuiRadio', 'EuiRange', 'EuiSelect', 'EuiSelectable', 'EuiSideNav', 'EuiStepHorizontal', 'EuiSuperDatePicker', 'EuiSuperSelect', 'EuiSwitch', 'EuiTab', 'EuiTextArea', 'EuiTreeView'];
 
 /**
- * EUI components that are only interactive when `onClick` or `href` is provided.
- * Without those props they render as a plain non-focusable element (span/div),
- * so rules that need to distinguish unconditionally-interactive components should
- * exclude these.
+ * EUI components that render a focusable element only when given one of the
+ * listed props. Without them they render plain, non-focusable markup — a
+ * `<span>`, `<div>`, or `<li>` — so rules that need an unconditionally
+ * interactive element must check the props rather than the name alone.
+ *
+ * - `EuiBadge` / `EuiBetaBadge` render a `<span>` unless clickable.
+ * - `EuiCard` renders a plain panel; `selectable` also makes it clickable by
+ *   rendering an `EuiCardSelect` button.
+ * - `EuiContextMenuItem` renders a `<div>` unless it has an action, and is a
+ *   `<button>` when given `toolTipContent`.
+ * - `EuiHeaderLogo` renders an `<a>` without an `href` attribute, which is not
+ *   focusable.
+ * - `EuiListGroupItem` renders an `<li>` unless it has an action.
+ */
+const CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS = exports.CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS = {
+  EuiBadge: ['iconOnClick', 'onClick', 'href'],
+  EuiBetaBadge: ['tooltipContent', 'onClick', 'href'],
+  EuiCard: ['onClick', 'href', 'selectable'],
+  EuiContextMenuItem: ['onClick', 'href', 'toolTipContent'],
+  EuiHeaderLogo: ['href'],
+  EuiListGroupItem: ['onClick', 'href']
+};
+
+/**
+ * Native HTML elements that are focusable only when given one of the listed
+ * attributes. An `<a>` without `href` is not a link and is not focusable.
+ */
+const CONDITIONALLY_INTERACTIVE_HTML_ELEMENTS = exports.CONDITIONALLY_INTERACTIVE_HTML_ELEMENTS = {
+  a: ['href']
+};
+
+/**
+ * Conditional interactive props whose presence alone is enough to make the
+ * rendered element focusable, even when the statically-known value is `""`.
+ *
+ * Native anchors and `EuiHeaderLogo` both forward `href=""` to the DOM, which
+ * still creates a focusable same-document link.
  */
-const CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS = exports.CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS = ['EuiBadge', 'EuiBetaBadge', 'EuiCard'];
+const PRESENCE_INTERACTIVE_PROPS = exports.PRESENCE_INTERACTIVE_PROPS = {
+  a: ['href'],
+  EuiHeaderLogo: ['href']
+};
 const HTML_TEXT_ELEMENTS = exports.HTML_TEXT_ELEMENTS = new Set(['p', 'span', 'strong', 'em', 'b', 'i', 'small', 'code']);
 const EUI_TEXT_COMPONENTS = exports.EUI_TEXT_COMPONENTS = new Set(['EuiText', 'EuiTextColor', 'EuiTextAlign', 'EuiCode', 'EuiMark', 'EuiHighlight']);
 const HTML_ACTION_ELEMENTS = exports.HTML_ACTION_ELEMENTS = new Set(['button', 'a']);
 
+/** Native HTML elements that are focusable and respond to user input. */
+const INTERACTIVE_HTML_ELEMENTS = exports.INTERACTIVE_HTML_ELEMENTS = ['a', 'button', 'input', 'select', 'textarea'];
+
 /**
  * Transparent layout wrappers inside `EuiCallOut` children that the rule should
  * traverse rather than treat as opaque custom components.
@@ -62,4 +101,18 @@ const CALLOUT_LAYOUT_CONTAINERS = exports.CALLOUT_LAYOUT_CONTAINERS = new Set(['
  * (e.g. `FormattedMessage` from react-intl used extensively in Kibana).
  * Rules treat these the same as `HTML_TEXT_ELEMENTS` / `EUI_TEXT_COMPONENTS`.
  */
-const I18N_TEXT_COMPONENTS = exports.I18N_TEXT_COMPONENTS = new Set(['FormattedMessage']);
+const I18N_TEXT_COMPONENTS = exports.I18N_TEXT_COMPONENTS = new Set(['FormattedMessage']);
+
+/**
+ * EUI components that render their content **inside** a single focusable
+ * `<button>` or `<a>`.
+ *
+ * Nesting another interactive element in their content produces invalid HTML
+ * (e.g. `<button>` inside `<button>`) and leaves the inner control unreachable
+ * or ambiguous for keyboard and screen-reader users.
+ *
+ * This is deliberately narrower than `INTERACTIVE_EUI_COMPONENTS`, which also
+ * contains composite components (`EuiBasicTable`, `EuiSelectable`, `EuiSideNav`,
+ * …) whose entire purpose is to host controls.
+ */
+const LEAF_INTERACTIVE_EUI_COMPONENTS = exports.LEAF_INTERACTIVE_EUI_COMPONENTS = ['EuiButton', 'EuiButtonEmpty', 'EuiButtonIcon', 'EuiContextMenuItem', 'EuiFacetButton', 'EuiFilterButton', 'EuiHeaderLink', 'EuiHeaderSectionItemButton', 'EuiKeyPadMenuItem', 'EuiLink', 'EuiListGroupItem', 'EuiStepHorizontal', 'EuiTab'];

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

@@ -0,0 +1,23 @@
+import type { TSESTree } from '@typescript-eslint/utils';
+/**
+ * Whether any of `propNames` is present on the element with a statically
+ * non-empty value. Dynamic values (`prop={maybe}`) count as present, since
+ * their runtime value is unknown.
+ */
+export declare function hasAnyProp(openingElement: TSESTree.JSXOpeningElement, propNames: string[], presenceOnlyProps?: Set<string>): boolean;
+/**
+ * Whether an element has a prop that makes it respond to user input
+ * (`onClick` or `href`).
+ */
+export declare function hasInteractivityProp(openingElement: TSESTree.JSXOpeningElement): boolean;
+/**
+ * Whether a JSX element renders a focusable control.
+ *
+ * Native interactive HTML elements and unconditionally interactive EUI
+ * components always qualify. Everything in
+ * `CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS` and
+ * `CONDITIONALLY_INTERACTIVE_HTML_ELEMENTS` — `EuiBadge`, `EuiListGroupItem`,
+ * a bare `<a>`, … — qualifies only when given a prop that makes it focusable.
+ */
+export declare function isInteractiveElement(element: TSESTree.JSXElement): boolean;
+//# sourceMappingURL=is_interactive_element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"is_interactive_element.d.ts","sourceRoot":"","sources":["../../../src/utils/is_interactive_element.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AA2BzD;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,cAAc,EAAE,QAAQ,CAAC,iBAAiB,EAC1C,SAAS,EAAE,MAAM,EAAE,EACnB,iBAAiB,cAAoB,GACpC,OAAO,CAmBT;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,cAAc,EAAE,QAAQ,CAAC,iBAAiB,GACzC,OAAO,CAET;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,QAAQ,CAAC,UAAU,GAAG,OAAO,CAgB1E"}