[a11y] Fix missing aria-label on EuiButtonIcon in developer examples

[Copilot]

EuiButtonIcon in developer_examples/public/app.tsx lacked an accessible label, violating @elastic/eui/no-unnamed-interactive-element. Icon-only buttons are invisible to screen readers without an explicit label.

Changes

• examples/developer_examples/public/app.tsx: Added aria-label="Open in new tab" to the EuiButtonIcon and removed the orphaned children text (unused by icon-only buttons); converted to self-closing tag.

- <EuiButtonIcon
-   iconType="popout"
-   onClick={...}
- >
-   Open in new tab
- </EuiButtonIcon>
+ <EuiButtonIcon
+   iconType="popout"
+   aria-label="Open in new tab"
+   onClick={...}
+ />

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[eslint-issue-reporter] @elastic_appex-sharedux — fix @elastic_eui_no-unnamed-interactive-element</issue_title>
<issue_description>> [!NOTE]

Reserved for AI coding agents—please don’t take it manually.

Summary

This issue groups 1 ESLint violation for rule @elastic/eui/no-unnamed-interactive-element across 1 file for team @elastic/appex-sharedux. Latest monitoring snapshot: index kibana-eslint-20260318-014121, versions: 9.4.0 (Mar 18).

Why this issue exists

This is a grouped ESLint backlog item generated from the latest monitoring snapshot. One issue per (team, rule) keeps the backlog stable and actionable.

What to fix

Implement fixes in full alignment with Constitution and Skill below. Expand those blocks and treat every paragraph as normative—scope, change boundaries, WCAG, i18n, and rule-specific guidance override any approach that would clear ESLint but contradict them.

Rule: @elastic/eui/no-unnamed-interactive-element

EuiButtonIcon must include an accessible label. Use one of: aria-label, aria-labelledby 

Places to fix

Requirement: Fix every location in the checklist below—do not merge or close this issue until all listed places are addressed (the list may be capped by the reporter; still treat each listed item as mandatory).

• examples/developer_examples/public/app.tsx — line 92

Pull request

When you open a PR for this work, apply the label a11y:agent-pr (required).

Constitution

Constitution for Skills

Scope and precedence

• This constitution applies to every skill and every skill-driven fix in this repo.
• When a SKILL adds narrower rules, follow both documents.
• If there is a conflict, use this precedence order:
  1. task-specific user or system instruction
  2. this constitution
  3. the individual SKILL
• Skill-specific guidance may narrow the allowed change set, but it must not weaken this constitution.

Core principles

Standards compliance

• All changes must meet WCAG 2.2 AA at minimum.
• Prefer semantic HTML over ARIA where possible.
• Use WAI-ARIA only when native semantics are insufficient.

Minimal changes

• Apply the smallest change that fully resolves the accessibility issue.
• Avoid unnecessary refactoring.
• Preserve existing behavior, layout, and intent unless the accessibility fix requires a change.

Deterministic behavior

• Apply deterministic fixes: the same code pattern should produce the same result.
• Avoid subjective or stylistic changes unless they are directly tied to accessibility.

Accessibility rules

• Prefer existing visible text for accessible names whenever possible.
• Reuse nearby labels, headings, button text, or other visible copy before introducing hidden text such as aria-label.
• Do not remove existing accessibility attributes such as title, alt, aria-label, or aria-labelledby unless they are being replaced with a stronger or more correct alternative.
• Prefer relationships to visible content, such as aria-labelledby, when that produces a clearer and more maintainable result.

i18n rules

• Any new or replacement user-facing string, or any new or replacement string exposed to assistive technology as an accessible name, must use i18n.translate('message.id', { defaultMessage: 'English fallback' }).
• Do not introduce that copy as a raw string literal.
• If the file already uses a shared i18n object such as i18nTexts.modalTitle, keep that pattern for new strings in that file.
• Do not localize programmatic identifiers that are not user-visible, such as radio group name values.
• Add an i18n import only when you introduce a new i18n.translate(...) call.
• Place new imports at the top of the file and merge them with existing imports from the same package.
• Reuse existing translation IDs when the same message already exists in the file.
• Follow the local translation ID naming convention when one exists.
• If no local naming convention exists, use <fileOrComponent>.<attributeName>, for example myTable.tableCaption or myButton.ariaLabel.
• Keep defaultMessage short, user-facing, and consistent with the surrounding UI.
• Do not create duplicate translation IDs with different defaultMessage values in the same file.

Example

<EuiButtonIcon
  aria-label={i18n.translate('myButton.ariaLabel', {
    defaultMessage: 'Refresh results',
  })}
/>

Change boundaries

• Do not change unrelated components, logic, behavior, or layout.
• Do not broaden the scope of a fix beyond the rule, component, or pattern described by the skill.
• Do not remove or modify license headers.
• Do not add comments to updated lines.
• Do not delete existing comments unless the skill explicitly requires it.

Output constraints

• Return...

• Fixes [eslint-issue-reporter] @elastic_appex-sharedux — fix @elastic_eui_no-unnamed-interactive-element #258366

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[elasticmachine]

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

• Click to trigger kibana-pull-request for this PR!
• Click to trigger kibana-deploy-project-from-pr for this PR!
• Click to trigger kibana-deploy-cloud-from-pr for this PR!
• Click to trigger kibana-entity-store-performance-from-pr for this PR!
• Click to trigger kibana-storybooks-from-pr for this PR!

[alexwizp]

@elasticmachine run docs-build

[alexwizp]

/ci

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 3dfda86

Metrics [docs]

✅ unchanged

cc @alexwizp @copilot