Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi-selectable Components Should Say Selected Elements Without Needing to Expand the Element #3326

Open
frastlin opened this issue Jan 13, 2024 · 0 comments
Labels

Comments

@frastlin
Copy link

frastlin commented Jan 13, 2024

Motivation

Components such as Multi-selectable Combobox and Multi-Select don't give any indication of what items are selected. Multi-Select says the number of selected items, but not what those items are.
I would like a list (maybe up to 5 items) of the selected items show in the upper-level field (where the Multi-Select currently says the number of selected items).
The screen reader would say something like:
"Combo box opens list 3 food selected: candy, cake, apple"
I don't think the screen reader users will have a problem if all items are spoken, but visually, maybe limiting to 5 items with an ellipse may be useful:
"Combo box opens list 7 food selected: candy, cake, apple, bacon, banana, burger..."

Having these items spoken will keep the screen reader user from needing to arrow through every single item in the list to find what is selected. With this solution, they won't even need to open the element, the screen reader will just say what's selected as they arrow or tab over the element.

A less ideal solution would be to put the selected items at the top of the list, but this could lead to other problems e.g., if there's an intentional sort for the items.

Usage example

There shouldn't be any different code needed from the current implementation.

Requirements

The selected items in the label should match the list of currently selected items

Workaround

It's possible to create another element above the element with the currently selected items, and I'm sure one can modify the current label somehow, but most developers aren't going to think about this, and users would really like for the selected items to be listed by default.

Possible implementations

The location where Multi-Select is saying the number of selected items just needs to have the list of selected elements appended to the end of the string. For the other elements, maybe having the value of the input field set to the selected items would work, or just adding them to the aria label would work as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants