elastic / elastic/eui

[EuiInputPopover] id and aria-* props are applied to the anchor div instead of the input, breaking EuiFormRow accessibility

Open
#9,914 0 comments 0 reactions 0 assignees View on GitHub
⚠️ needs validation accessibility
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

_Originally posted by @alexwizp in https://github.com/elastic/kibana/issues/272800#issuecomment-5280111147_

`EuiInputPopover` does not forward id and ARIA attributes to the element passed via its input prop. Instead, these attributes are applied to the popovers anchor `div`.

This breaks accessibility when `EuiInputPopover` is used as a form control inside an `EuiFormRow`. `EuiFormRow` handles accessibility by cloning its single child and injecting attributes such as id, disabled, and aria-describedby. When the child is an `EuiInputPopover`, those attributes are destructured only at the EuiInputPopover level and the remaining props are spread onto EuiPopover, causing them to end up on the anchor `div` rather than the actual input element.

As a result, the form control does not receive the id or associated ARIA attributes it needs. This can prevent error and description messages from being correctly associated with the input.

This violates **_WCAG 3.3.1 (Error Identification)_** and **_WCAG 4.1.2 (Name, Role, Value)_**.

Contributor guide

Open the contributing guide

Research direction

Start by tracing EuiInputPopover and how EuiFormRow clones its child and passes id, disabled, and aria-* attributes; inspect the input prop and EuiPopover anchor handling. Reproduce the form-control case, then add or update coverage so those attributes reach the actual input rather than the anchor div and remain associated with form messages.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.