[EuiPopover] Accessibility – add a11y-friendly aria-expanded and aria-controls attributes by alexwizp · Pull Request #9381 · elastic/eui

alexwizp · 2026-02-13T11:55:31Z

Summary

Improves EuiPopover accessibility by adding a more complete, screen reader–friendly ARIA relationship between the popover trigger and the popover content. In particular, the trigger now exposes:

aria-expanded to reflect whether the popover is currently open
aria-controls to reference the popover panel element when it is rendered
These attributes help assistive technologies understand that the trigger controls a popup, and whether that popup is open or closed.

Why are we making this change?

Without aria-expanded and aria-controls, many screen readers have less context about:

whether activating the trigger opened anything, and
what element is being controlled by the trigger.

This change aligns EuiPopover with common WAI-ARIA authoring practices for popover/disclosure-style interactions.

Screenshots

Impact to users

There are no breaking changes in this PR. DOM snapshots of updated components may change.

QA

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS ~~and Windows~~ high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, ~~Edge, and Firefox~~
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

…-controls attributes

alexwizp · 2026-02-13T13:57:50Z

packages/eui/src/components/popover/popover.tsx

+    if (this.button && prevProps.isOpen !== this.props.isOpen) {
+      const toggleButton = this.getFocusableToggleButton();
+      if (toggleButton) {
+        const isButtonLike = () => {


Initially, I wanted to add this for all triggers, but encountered issues with EuiRange(where trigger is Input) and EuiInputPopover. These attributes are not valid in those cases.

acstll

Thank you @alexwizp for putting this one up!

I have a question regarding the implementation, I would expect the attributes, especially aria-expanded, to be present on the initial render but they're only added after the open state changes — is this intentional?

While testing (NDVA and VoiceOver) aria-controls didn't make a noticeable difference. However in the WAI patterns I've checked, it's present (example). So I don't think it hurts to have it, but I wanted to ask you: would you consider only adding it when the popover is open/visible? According to MDN, that would still be correct:

The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.

Also, since the button is not strictly part of the component (the consumer provides it), do you think a case exists where the consumer would need to set/control these attributes themselves?

Finally, if you agree to adding the attributes to the button on initial render is correct, I would suggest the following structure for the tests:

describe: aria attributes on trigger button
- test: aria-expanded=false is set on initial render
- test: aria-expanded is toggled according the open state
- test: aria-controls is set when the popover is open

packages/eui/changelogs/upcoming/9381.md

packages/eui/src/components/popover/popover.test.tsx

packages/eui/src/components/popover/popover.tsx

packages/eui/src/components/popover/popover.test.tsx

Co-authored-by: Arturo Castillo Delgado <arturo@arturu.com>

alexwizp · 2026-02-17T12:44:21Z

@acstll Thank you for your review — I appreciate the thoughtful feedback and agree with your comments.

Regarding your question:

Also, since the button is not strictly part of the component (the consumer provides it), do you think a case exists where the consumer would need to set/control these attributes themselves?

At this point, I’m not convinced that we need to complicate the API. I’m struggling to identify a realistic use case where exposing that level of control would provide meaningful value to the consumer.

# Conflicts: # packages/eui/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap # packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap

packages/eui/src/components/popover/popover.tsx

packages/eui/src/components/popover/popover.test.tsx

acstll · 2026-02-17T15:46:32Z

@acstll Thank you for your review — I appreciate the thoughtful feedback and agree with your comments.

my pleasure

Regarding your question:

Also, since the button is not strictly part of the component (the consumer provides it), do you think a case exists where the consumer would need to set/control these attributes themselves?

At this point, I’m not convinced that we need to complicate the API. I’m struggling to identify a realistic use case where exposing that level of control would provide meaningful value to the consumer.

completely agree 👍

I left a comment regarding a unit test failing… and 2 more nits with wording.

Co-authored-by: Arturo Castillo Delgado <arturo@arturu.com>

elasticmachine · 2026-02-17T17:33:13Z

💚 Build Succeeded

History

💔 Build #2734 failed 90a5380
💔 Build #2733 failed c6321cf
💚 Build #2728 succeeded 8f4cb85
💚 Build #2726 succeeded 2741a21
💚 Build #2710 succeeded facf11a
💚 Build #2679 succeeded 9d99fb1

elasticmachine · 2026-02-17T17:50:38Z

💚 Build Succeeded

Buildkite Build
Commit: 1741eb7

History

💔 Build #5838 failed 8f4cb85
💔 Build #5836 failed 2741a21
💚 Build #5820 succeeded facf11a
💚 Build #5792 succeeded 9d99fb1
💔 Build #5791 failed ab776f4
💔 Build #5783 failed c4811ba

acstll

🟢 Thanks again for the contribution, and for addressing the feedback.

aria-expanded="false" from EuiPopover related to elastic/eui#9381

see elastic/eui#9381

## Dependency updates - `@elastic/eui` - v113.0.0 ⏩ v113.1.0 - `@elastic/eui-theme-borealis` - v6.0.0 ⏩ v6.1.0 --- ## Changes | Commit | Change | Teams (Code Owner) | | :--- | :--- | :--- | | 18ef117 | Update snapshots, new Assistance color tokens ([#9383](elastic/eui#9383)) | @elastic/kibana-security | | 3fad87f | Update snapshots, new `aria-expanded` attribute added to button triggers of `EuiPopover` ([#9381](elastic/eui#9381)) | @elastic/appex-sharedux, @elastic/kibana-visualizations, @elastic/kibana-data-discovery | | cc9e096 | Update snapshots, remove `aria-controls` now handled by `EuiPopover` directly ([#9381](elastic/eui#9381)) | @elastic/kibana-security | ## Package updates ### `@elastic/eui` [v113.1.0](https://github.com/elastic/eui/releases/tag/v113.1.0) - Added `data-test-subj` attributes to `EuiFlyoutMenu` elements: back button, history dropdown, and history items. ([#9400](elastic/eui#9400)) - Added new assistance tokens: ([#9383](elastic/eui#9383)) - `euiTheme.colors.backgroundFilledAssistance` - `euiTheme.colors.backgroundLightAssistance` - `euiTheme.colors.backgroundBaseAssistance` - `euiTheme.components.buttons.backgroundAssistanceHover`, - `euiTheme.components.buttons.backgroundFilledAssistanceHover` - `euiTheme.colors.backgroundBaseInteractiveHoverAssistance` - `euiTheme.colors.borderStrongAssistance` - `euiTheme.colors.borderBaseAssistance` - `euiTheme.colors.textAssistance` - `euiTheme.colors.vis.euiColorVisAssistance` - `euiTheme.colors.severity.assistance` - `euiTheme.colors.vis.euiColorVis10` - `euiTheme.colors.vis.euiColorVis11` - `euiTheme.colors.vis.euiColorVisText10` - `euiTheme.colors.vis.euiColorVisText11` - Updated purple color palette shades 30-60 to slightly lighter values ([#9383](elastic/eui#9383)) **Accessibility** - Adds `aria-expanded` and `aria-controls` to the `EuiPopover` trigger button to improve screen reader context ([#9381](elastic/eui#9381)) ### `@elastic/eui-theme-borealis` v6.1.0 - Added new assistance tokens: ([#9383](elastic/eui#9383)) - `euiTheme.colors.backgroundFilledAssistance` - `euiTheme.colors.backgroundLightAssistance` - `euiTheme.colors.backgroundBaseAssistance` - `euiTheme.components.buttons.backgroundAssistanceHover`, - `euiTheme.components.buttons.backgroundFilledAssistanceHover` - `euiTheme.colors.backgroundBaseInteractiveHoverAssistance` - `euiTheme.colors.borderStrongAssistance` - `euiTheme.colors.borderBaseAssistance` - `euiTheme.colors.textAssistance` - `euiTheme.colors.vis.euiColorVisAssistance` - `euiTheme.colors.severity.assistance` - `euiTheme.colors.vis.euiColorVis10` - `euiTheme.colors.vis.euiColorVis11` - `euiTheme.colors.vis.euiColorVisText10` - `euiTheme.colors.vis.euiColorVisText11` - Updated purple color palette shades 30-60 to slightly lighter values ([#9383](elastic/eui#9383))

## Dependency updates - `@elastic/eui` - v113.0.0 ⏩ v113.1.0 - `@elastic/eui-theme-borealis` - v6.0.0 ⏩ v6.1.0 --- ## Changes | Commit | Change | Teams (Code Owner) | | :--- | :--- | :--- | | 18ef117 | Update snapshots, new Assistance color tokens ([elastic#9383](elastic/eui#9383)) | @elastic/kibana-security | | 3fad87f | Update snapshots, new `aria-expanded` attribute added to button triggers of `EuiPopover` ([elastic#9381](elastic/eui#9381)) | @elastic/appex-sharedux, @elastic/kibana-visualizations, @elastic/kibana-data-discovery | | cc9e096 | Update snapshots, remove `aria-controls` now handled by `EuiPopover` directly ([elastic#9381](elastic/eui#9381)) | @elastic/kibana-security | ## Package updates ### `@elastic/eui` [v113.1.0](https://github.com/elastic/eui/releases/tag/v113.1.0) - Added `data-test-subj` attributes to `EuiFlyoutMenu` elements: back button, history dropdown, and history items. ([elastic#9400](elastic/eui#9400)) - Added new assistance tokens: ([elastic#9383](elastic/eui#9383)) - `euiTheme.colors.backgroundFilledAssistance` - `euiTheme.colors.backgroundLightAssistance` - `euiTheme.colors.backgroundBaseAssistance` - `euiTheme.components.buttons.backgroundAssistanceHover`, - `euiTheme.components.buttons.backgroundFilledAssistanceHover` - `euiTheme.colors.backgroundBaseInteractiveHoverAssistance` - `euiTheme.colors.borderStrongAssistance` - `euiTheme.colors.borderBaseAssistance` - `euiTheme.colors.textAssistance` - `euiTheme.colors.vis.euiColorVisAssistance` - `euiTheme.colors.severity.assistance` - `euiTheme.colors.vis.euiColorVis10` - `euiTheme.colors.vis.euiColorVis11` - `euiTheme.colors.vis.euiColorVisText10` - `euiTheme.colors.vis.euiColorVisText11` - Updated purple color palette shades 30-60 to slightly lighter values ([elastic#9383](elastic/eui#9383)) **Accessibility** - Adds `aria-expanded` and `aria-controls` to the `EuiPopover` trigger button to improve screen reader context ([elastic#9381](elastic/eui#9381)) ### `@elastic/eui-theme-borealis` v6.1.0 - Added new assistance tokens: ([elastic#9383](elastic/eui#9383)) - `euiTheme.colors.backgroundFilledAssistance` - `euiTheme.colors.backgroundLightAssistance` - `euiTheme.colors.backgroundBaseAssistance` - `euiTheme.components.buttons.backgroundAssistanceHover`, - `euiTheme.components.buttons.backgroundFilledAssistanceHover` - `euiTheme.colors.backgroundBaseInteractiveHoverAssistance` - `euiTheme.colors.borderStrongAssistance` - `euiTheme.colors.borderBaseAssistance` - `euiTheme.colors.textAssistance` - `euiTheme.colors.vis.euiColorVisAssistance` - `euiTheme.colors.severity.assistance` - `euiTheme.colors.vis.euiColorVis10` - `euiTheme.colors.vis.euiColorVis11` - `euiTheme.colors.vis.euiColorVisText10` - `euiTheme.colors.vis.euiColorVisText11` - Updated purple color palette shades 30-60 to slightly lighter values ([elastic#9383](elastic/eui#9383))

[EuiPopover] Accessibility – add a11y-friendly aria-expanded and aria…

41c01cc

…-controls attributes

alexwizp added the accessibility label Feb 13, 2026

alexwizp added 2 commits February 13, 2026 14:05

[EuiPopover] Accessibility – add a11y-friendly aria-expanded and aria…

03c05e2

…-controls attributes

add attrs only for button

f8823db

alexwizp commented Feb 13, 2026

View reviewed changes

fix JEST

5ba62e3

alexwizp marked this pull request as ready for review February 13, 2026 16:02

alexwizp requested a review from a team as a code owner February 13, 2026 16:02

Merge branch 'main' into feb-13

c4811ba

elastic deleted a comment from elasticmachine Feb 13, 2026

acstll self-requested a review February 16, 2026 09:15

alexwizp added 3 commits February 16, 2026 12:17

Merge remote-tracking branch 'origin/main' into feb-13

c1e0249

fix JEST

ab776f4

fix JEST

9d99fb1

acstll requested changes Feb 17, 2026

View reviewed changes

alexwizp and others added 2 commits February 17, 2026 12:50

Apply suggestions from code review

facf11a

Co-authored-by: Arturo Castillo Delgado <arturo@arturu.com>

fix some pr comments

2741a21

alexwizp added 2 commits February 17, 2026 15:18

fix JEST

8b91d8a

acstll reviewed Feb 17, 2026

View reviewed changes

packages/eui/src/components/popover/popover.tsx Show resolved Hide resolved

acstll reviewed Feb 17, 2026

View reviewed changes

packages/eui/src/components/popover/popover.test.tsx Outdated Show resolved Hide resolved

acstll reviewed Feb 17, 2026

View reviewed changes

packages/eui/src/components/popover/popover.test.tsx Outdated Show resolved Hide resolved

alexwizp and others added 5 commits February 17, 2026 18:18

Update packages/eui/src/components/popover/popover.test.tsx

dda9ed7

Co-authored-by: Arturo Castillo Delgado <arturo@arturu.com>

Update packages/eui/src/components/popover/popover.test.tsx

13e71c6

Co-authored-by: Arturo Castillo Delgado <arturo@arturu.com>

fix JEST

c6321cf

fix jest

90a5380

fix linter

1741eb7

acstll approved these changes Feb 18, 2026

View reviewed changes

alexwizp merged commit 40f52e4 into elastic:main Feb 18, 2026
5 checks passed

weronikaolejniczak mentioned this pull request Feb 20, 2026

Update VRT refs and fix flakes #9402

Closed

1 task

acstll mentioned this pull request Feb 24, 2026

Upgrade EUI to v113.1.0 elastic/kibana#254649

Merged

acstll added a commit to acstll/kibana that referenced this pull request Feb 24, 2026

Update snapshots

3fad87f

aria-expanded="false" from EuiPopover related to elastic/eui#9381

acstll added a commit to acstll/kibana that referenced this pull request Feb 24, 2026

Update snapshots, aria-controls now handled by EuiPopover directly

cc9e096

see elastic/eui#9381

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiPopover] Accessibility – add a11y-friendly aria-expanded and aria-controls attributes#9381

[EuiPopover] Accessibility – add a11y-friendly aria-expanded and aria-controls attributes#9381
alexwizp merged 17 commits intoelastic:mainfrom
alexwizp:feb-13

alexwizp commented Feb 13, 2026 •

edited

Loading

Uh oh!

alexwizp Feb 13, 2026

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexwizp commented Feb 17, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll commented Feb 17, 2026

Uh oh!

elasticmachine commented Feb 17, 2026

Uh oh!

elasticmachine commented Feb 17, 2026

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

alexwizp commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

alexwizp Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexwizp commented Feb 17, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll commented Feb 17, 2026

Uh oh!

elasticmachine commented Feb 17, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Feb 17, 2026

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexwizp commented Feb 13, 2026 •

edited

Loading