Skip to content

[EuiSelectable] Use space icon in non-searchable instnces #5598

@thompsongl

Description

@thompsongl

See further discussion in #5581, but there may be value in making more distinction between searchable and non-searchable EuiSelectable instances as they need to conform to different ARIA specs (listbox for non-searchable, and combobox for searchable).

The most prominent of these distinctions (when is comes to usability) is that space is preferred and expected selection toggling mechanism for listbox components, but that interaction is not allowed in combobox implementations. As such, we may want to conditionally change the badge icon indicating which key to use.

For the spacebar UX, I also suggested changing the "Return/Enter" icon on the right of the EuiSelectable item to the word "Space" for when the component is a listbox vs a combobox, to give keyboard sighted users a visual cue that the toggle button is different when the searchable prop is present.

Originally posted by @constancecchen in #5581 (comment)

Rather than "SPACE", I suggest creating and using a new icon for spaceKey. A separate issue can be created for tracking this new icon, if preferred.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions