Merge branch 'main' into fix/workflows-actions-menu-eui116

Author: Kiryous

.agents/skills/accessibility/references/components/index.md

@@ -12,4 +12,5 @@ Open the guide that matches the component(s) you are writing or refactoring. Rea
 | `interactive_components.md` | Names for interactive controls | `EuiBetaBadge`, `EuiButtonIcon`, `EuiComboBox`, `EuiSelect`, `EuiSuperSelect`, `EuiPagination`, `EuiTreeView`, `EuiBreadcrumbs` |
 | `overlays.md` | Modals, flyouts, popovers | `EuiModal`, `EuiFlyout`, `EuiFlyoutResizable`, `EuiConfirmModal`, `EuiPopover` |
 | `radio_groups.md` | Radio groups (`name` grouping) | `EuiRadio`, `EuiRadioGroup` |
-| `tooltip_icon.md` | Tooltip on icon button (no duplicate SR text) | `EuiToolTip`, `EuiButtonIcon` |
+| `tooltip_content.md` | No interactive elements in tooltip `content` / `title` | `EuiToolTip`, `EuiIconTip` |
+| `tooltip_icon.md` | Tooltip on icon button (wrap + no duplicate SR text, no native `title`) | `EuiToolTip`, `EuiButtonIcon` |

.agents/skills/accessibility/references/components/tooltip_content.md

@@ -0,0 +1,95 @@
+# EUI tooltip content: no interactive elements
+
+**Applies to:** `EuiToolTip`, `EuiIconTip` — the `content` and `title` props
+
+Tooltip `content` and `title` render inside a portal with `role="tooltip"`. The overlay only appears while the trigger is hovered or focused and is dismissed on blur, so any focusable element placed inside it is unreachable by keyboard and assistive-technology users. Use **`EuiPopover`** when the content needs to be interactive.
+
+**Related guides:** **`overlays.md`** (`EuiPopover` for interactive content) · **`tooltip_icon.md`** (wrapping `EuiButtonIcon` with `EuiToolTip`) · **`icons_and_tooltips.md`** (`EuiIconTip` vs `EuiToolTip` + `EuiIcon`).
+
+## Canonical usage
+
+- `EuiToolTip` / `EuiIconTip` `content` and `title` may contain:
+  - **Plain strings** (preferred — easy to localize and read).
+  - **Non-interactive JSX** — text nodes, `<span>`, `<p>`, `EuiText`, `EuiIcon`, and the display-only badges/cards (`EuiBadge`, `EuiBetaBadge`, `EuiCard`) used **without** `onClick` / `href`.
+- They must **not** contain anything focusable:
+  - Native `<a>`, `<button>`, `<input>`, `<select>`, `<textarea>`.
+  - Interactive EUI components — `EuiLink`, `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuiFieldText`, `EuiFieldNumber`, `EuiFieldSearch`, `EuiFieldPassword`, `EuiTextArea`, `EuiSelect`, `EuiSuperSelect`, `EuiComboBox`, `EuiSelectable`, `EuiSwitch`, `EuiCheckbox`, `EuiRadio`, `EuiRange`, `EuiDualRange`, `EuiColorPicker`, `EuiDatePicker`, `EuiSuperDatePicker`, `EuiFilterButton`, `EuiPagination`, `EuiTab`, `EuiTreeView`, `EuiContextMenuItem`, `EuiKeyPadMenuItem`, `EuiListGroupItem`, `EuiBreadcrumbs`, `EuiBasicTable`, `EuiInMemoryTable`, `EuiCheckableCard`, …
+- The rule searches recursively — interactive elements nested inside fragments, conditional renders (`cond && …`, `cond ? … : …`), or wrapper elements are reported too.
+- When users need to interact with the content (click a link, fill a field), switch the wrapper to **`EuiPopover`** triggered by an explicit click — never by hover.
+
+### Manual-review cases (rule is silent)
+
+- **Variable content** — `content={tooltipContent}` / `title={titleNode}` is intentionally skipped because it cannot be statically analyzed. Trace the variable and verify it never holds focusable JSX.
+- **Conditionally-interactive components** — `EuiBadge`, `EuiBetaBadge`, `EuiCard` are excluded from the rule because they render as a plain element without `onClick` / `href`. As soon as you add `onClick` or `href`, they become focusable and the same restriction applies — move the interaction out of the tooltip.
+
+## Examples
+
+```tsx
+<EuiToolTip content="Just text">
+  <EuiButton>Hover me</EuiButton>
+</EuiToolTip>
+
+<EuiToolTip content={<EuiText><p>Description</p></EuiText>}>
+  <EuiButton>Hover me</EuiButton>
+</EuiToolTip>
+
+<EuiIconTip content="Informational text" type="info" />
+
+// Display-only badge is fine
+<EuiToolTip content={<EuiBadge>v2.0</EuiBadge>}>
+  <EuiButton>Hover me</EuiButton>
+</EuiToolTip>
+```
+
+## Common mistakes
+
+```tsx
+// WRONG — link inside tooltip is not keyboard-reachable
+<EuiToolTip content={<EuiLink href="/docs">Learn more</EuiLink>}>
+  <EuiButton>Hover me</EuiButton>
+</EuiToolTip>
+
+// RIGHT — switch to EuiPopover so the link participates in the focus order
+const [isOpen, setIsOpen] = useState(false);
+const togglePopover = () => setIsOpen((open) => !open);
+const closePopover = () => setIsOpen(false);
+
+<EuiPopover
+  button={<EuiButton onClick={togglePopover}>More info</EuiButton>}
+  isOpen={isOpen}
+  closePopover={closePopover}
+>
+  <EuiLink href="/docs">Learn more</EuiLink>
+</EuiPopover>
+
+// WRONG — button inside `EuiIconTip` content
+<EuiIconTip content={<EuiButton>Click</EuiButton>} type="info" />
+
+// RIGHT — keep the icon tip purely informational
+<EuiIconTip content="Informational text" type="info" />
+
+// WRONG — interactive element inside `title` is also reported
+<EuiToolTip title={<EuiLink href="#">Learn more</EuiLink>} content="Info">
+  <EuiButton>Hover</EuiButton>
+</EuiToolTip>
+
+// WRONG — interactive child wrapped in a fragment is reported recursively
+<EuiToolTip content={<><span>Text</span><EuiLink href="#">Link</EuiLink></>}>
+  <EuiButton>Hover</EuiButton>
+</EuiToolTip>
+
+// WRONG — interactive child behind `cond && …` is reported
+<EuiToolTip content={<span>{cond && <EuiLink href="#">Link</EuiLink>}</span>}>
+  <EuiButton>Hover</EuiButton>
+</EuiToolTip>
+
+// WRONG — interactive child inside a ternary is reported
+<EuiToolTip content={cond ? <EuiLink href="#">Link</EuiLink> : null}>
+  <EuiButton>Hover</EuiButton>
+</EuiToolTip>
+
+// WRONG — conditionally-interactive badge with onClick becomes focusable
+<EuiToolTip content={<EuiBadge onClick={onClick}>Open</EuiBadge>}>
+  <EuiButton>Hover</EuiButton>
+</EuiToolTip>
+```

.agents/skills/accessibility/references/components/tooltip_icon.md

@@ -2,49 +2,58 @@
 
 **Applies to:** `EuiToolTip`, `EuiButtonIcon`
 
-When **`EuiToolTip`** wraps **`EuiButtonIcon`** and the tooltip **`content`** matches the button's **`aria-label`**, assistive technology can announce the same text twice. Use **`disableScreenReaderOutput`** so the tooltip stays available to sighted users while screen readers hear the name once.
+Every **`EuiButtonIcon`** needs two things:
 
-**Related guides:** **`focus_and_keyboard.md`** (tooltip anchors / `tabIndex`) · **`icons_and_tooltips.md`** (`EuiIconTip` vs `EuiToolTip` + `EuiIcon`).
+1. **A visible tooltip for sighted users** — wrap the button with **`EuiToolTip`**. Do **not** use the native **`title`** prop on `EuiButtonIcon`; browser tooltips are unstyled, have no delay control, and are not reliably announced by screen readers across browser / AT combinations.
+2. **An accessible name for assistive technology** — keep **`aria-label`** on the button.
 
-## Canonical usage
+When the tooltip **`content`** and the button's **`aria-label`** match (same string, same variable, or same `i18n` call), also set **`disableScreenReaderOutput`** on `EuiToolTip` so screen readers announce the name once instead of twice.
 
-- **`content`** equals **`aria-label`** (same string or same variable / same `i18n` call) → set **`disableScreenReaderOutput`** on **`EuiToolTip`**.
-- **`content`** differs from **`aria-label`** → no extra prop; both will be announced as intended.
-- Child is not **`EuiButtonIcon`** → this pattern doesn't apply; check the related guides above.
+**Related guides:** **`focus_and_keyboard.md`** (tooltip anchors / `tabIndex`) · **`icons_and_tooltips.md`** (`EuiIconTip` vs `EuiToolTip` + `EuiIcon`) · **`tooltip_content.md`** (no interactive elements inside tooltip `content` / `title`).
 
-Prefer a single **`i18n.translate`** call (same id + `defaultMessage`) for both **`content`** and **`aria-label`** so the strings can't drift apart.
+## Canonical usage
 
-For `{...tooltipProps}` spreads, merge **`disableScreenReaderOutput`** at the callsite or in the spread source.
+1. Wrap every `EuiButtonIcon` with `EuiToolTip`. Remove any `title` prop from the button.
+2. Pass the same localized string to `EuiToolTip` `content` and the button's `aria-label`. Prefer a single **`i18n.translate`** call (same id + `defaultMessage`) referenced from both places so the strings cannot drift apart.
+3. When `content` and `aria-label` match → add **`disableScreenReaderOutput`** on `EuiToolTip`.
+4. When `content` and `aria-label` intentionally differ (the tooltip elaborates beyond the name) → do **not** add `disableScreenReaderOutput`; both will be announced as intended.
 
 ## Examples
 
 ```tsx
-<EuiToolTip
-  content={i18n.translate('filter.add', { defaultMessage: 'Add filter' })}
-  disableScreenReaderOutput
->
+const editLabel = i18n.translate('myFeature.editItem', {
+  defaultMessage: 'Edit item',
+});
+
+<EuiToolTip content={editLabel} disableScreenReaderOutput>
   <EuiButtonIcon
-    iconType="plusInCircle"
-    aria-label={i18n.translate('filter.add', { defaultMessage: 'Add filter' })}
-    onClick={onAdd}
+    iconType="pencil"
+    aria-label={editLabel}
+    onClick={onEdit}
   />
 </EuiToolTip>
 ```
 
 ## Common mistakes
 
 ```tsx
-// WRONG — screen reader announces "Add filter" twice
-<EuiToolTip content={label}>
-  <EuiButtonIcon iconType="plusInCircle" aria-label={label} onClick={onAdd} />
+// WRONG — no visible tooltip for sighted users
+<EuiButtonIcon iconType="trash" aria-label="Delete" onClick={onDelete} />
+
+// WRONG — native `title` is not reliably announced by screen readers and has no consistent visual styling
+<EuiButtonIcon title="Delete" aria-label="Delete" iconType="trash" onClick={onDelete} />
+
+// WRONG — tooltip and `aria-label` without `disableScreenReaderOutput` will lead to SR announcement duplication
+<EuiToolTip content="Delete">
+  <EuiButtonIcon iconType="trash" aria-label="Delete" onClick={onDelete} />
 </EuiToolTip>
 
-// RIGHT
-<EuiToolTip content={label} disableScreenReaderOutput>
-  <EuiButtonIcon iconType="plusInCircle" aria-label={label} onClick={onAdd} />
+// RIGHT — wrap, keep `aria-label`, and add `disableScreenReaderOutput` when `content` matches
+<EuiToolTip content="Delete" disableScreenReaderOutput>
+  <EuiButtonIcon iconType="trash" aria-label="Delete" onClick={onDelete} />
 </EuiToolTip>
 
-// WRONG — different ids, strings may drift apart
+// WRONG — different i18n ids may drift apart
 content={i18n.translate('a.tooltip', { defaultMessage: 'Add' })}
 aria-label={i18n.translate('a.button', { defaultMessage: 'Add' })}
 

.agents/skills/accessibility/references/eslint.md

@@ -15,4 +15,6 @@ Secondary path: when starting from a rule id, jump to the canonical **component
 | `@elastic/eui/require-aria-label-for-modals` | [`components/overlays.md`](components/overlays.md) | `{...props}` hides wiring; no visible title without UX change — escalate. |
 | `@elastic/eui/require-table-caption` | [`components/data_tables.md`](components/data_tables.md) | `tableCaption` only via `{...tableProps}` — fix at source; no duplicate conflicting captions. |
 | `@elastic/eui/sr-output-disabled-tooltip` | [`components/tooltip_icon.md`](components/tooltip_icon.md) | `EuiToolTip` props from spread; child not `EuiButtonIcon`. |
+| `@elastic/eui/tooltip-button-icon-wrap` | [`components/tooltip_icon.md`](components/tooltip_icon.md) | `{...props}` without an explicit `title` is silently skipped — verify the spread does not omit a tooltip. No `aria-label` on the button → autofix can't run; supply both `aria-label` and `EuiToolTip` `content`. |
 | `@elastic/eui/tooltip-focusable-anchor` | [`components/focus_and_keyboard.md`](components/focus_and_keyboard.md) | `{...anchorProps}` or unknown custom anchor. |
+| `@elastic/eui/tooltip-no-interactive-content` | [`components/tooltip_content.md`](components/tooltip_content.md) | Variable content (`content={var}` / `title={var}`) is silently skipped — trace and verify. `EuiBadge` / `EuiBetaBadge` / `EuiCard` with `onClick` / `href` become focusable and need migration to `EuiPopover`. |