adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.04k stars 1.13k forks source link

Keyboard shortcut to deselect all items in a selectable collection #4476

Open tgelu opened 1 year ago

tgelu commented 1 year ago

πŸ™‹ Feature Request

In @react-aria/selection ctrl+a or cmd+a selects all items in a selectable collection. It would be useful if the same key combination would deselect all items if all items are already selected. This is the pattern recommended in the listbox aria patterns:

Control + A (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.

πŸ€” Expected Behavior

ctrl+a and cmd+a do not deselect all items if all items are already selected.

😯 Current Behavior

ctrl+a and cmd+a deselect all options if all options are already selected.

πŸ’ Possible Solution

Seems like a simple change in this file if I am not wrong.

πŸ”¦ Context

I built a custom select which allows for multiple selection in the listbox in the dropdown. There, esc is already mapped to closing the dropdown so there is no easy way to deselect all items. This is inconvenient both for keyboard or mouse users.

πŸ’» Examples

N/A

🧒 Your Company/Team

N/A

🎁 Tracking Ticket (optional)

N/A

reidbarber commented 1 year ago

We discussed this recently in the context of table (https://github.com/adobe/react-spectrum/pull/4415#discussion_r1172749144) and decided against it due to the ARIA grid pattern listing ctr+a as 'select all' (https://www.w3.org/WAI/ARIA/apg/patterns/grid/). But it does look like this is different in listbox, so we may want to consider this.

devongovett commented 1 year ago

Doesn't Escape deselect all?

tgelu commented 1 year ago

I built a custom select which allows for multiple selection in the listbox in the dropdown. There, esc is already mapped to closing the dropdown so there is no easy way to deselect all items. This is inconvenient both for keyboard or mouse users.

But the larger point is that The listbox ARIA pattern suggest ctrl+a for this.

devongovett commented 1 year ago

I've never seen a UI where ctrl+a deselected anything. Whether it's text selection or in a native app like finder it always only selects all, not deselects all. Have you seen any real world examples of this?

tgelu commented 1 year ago

not sure - but I believe that anyone building a multiselect in a popover would face this issue - esc is not usable, and there's just no other way to clear a selection of all items :) thought the optional suggestion from ARIA on listboxes makes sense in at least a couple of scenarios, including this one.

devongovett commented 1 year ago

Ideally escape would only clear the selection, and then a second press would close the popover. I believe it works this way for a combobox within a dialog or other overlay already. Basically it should stop propagation when escape is pressed if there is a selection, and otherwise allow propagation to the overlay.