eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiSelectable] Use `space` icon in non-searchable instnces

Open thompsongl opened this issue 3 years ago • 1 comments

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 https://github.com/elastic/eui/pull/5581#discussion_r797870317

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.

thompsongl avatar Feb 03 '22 20:02 thompsongl

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

github-actions[bot] avatar Aug 03 '22 00:08 github-actions[bot]