diff --git a/.agents/skills/accessibility/references/components/index.md b/.agents/skills/accessibility/references/components/index.md index d8c36d93d4308..b72711c758722 100644 --- a/.agents/skills/accessibility/references/components/index.md +++ b/.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` | diff --git a/.agents/skills/accessibility/references/components/tooltip_content.md b/.agents/skills/accessibility/references/components/tooltip_content.md new file mode 100644 index 0000000000000..08dae3752a643 --- /dev/null +++ b/.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, ``, `

`, `EuiText`, `EuiIcon`, and the display-only badges/cards (`EuiBadge`, `EuiBetaBadge`, `EuiCard`) used **without** `onClick` / `href`. +- They must **not** contain anything focusable: + - Native ``, `