[EuiInputPopover] id and aria-* props are applied to the anchor div instead of the input, breaking EuiFormRow 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
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