elastic / elastic/eui

[EuiSelectable] Support `isInvalid` prop

Open
#8,991 2 comments 0 reactions 0 assignees View on GitHub
accessibility low hanging fruit
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Problem Statement**

It's not possible to correctly add `aria-invalid` to the elements of `EuiSelectable`, the search and the list. For the search field it's possible to use the `searchProps` object to pass it down; for the list is not possible to add it to the `

    ` elemenet.

    This is necessary to properly support announcing errors with screen readers.

    Will also help resolve https://github.com/elastic/kibana/issues/219379

    **Proposed Solution**

    Add a top-level `isInvalid` prop to `EuiSelectable` that will add the `aria-invalid` attribute to the corresponding elements.

    **Use Case**

    Announcing errors with screen readers correctly, without workarounds (e.g. https://github.com/elastic/kibana/issues/219379)

    **Value / Impact**

    It's needed for accessibility.

    **Do alternatives or workarounds exist?**

    Yes (see https://github.com/elastic/kibana/issues/219379), but they're cumbersome, and the fix is a very small effort.

    **Additional context (Optional)**

    It was requested in Slack.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.