Selectable currently supports exclusions by clicking on each option multiple times: clicking once sets it to "included", clicking again sets it to "excluded", and clicking again resets it to nothing.
There isn't a great way to expose this to assistive tech (currently being done with aria-labels reading out instructions) but also this doesn't seem very discoverable to many people without specific instructions being given on the page.
I'd like to propose an alternative design that shows the "exclusion" action on hover/focus on each option. (This could be further extended to show both an "exclusion" and "inclusion" actions if there's concern that people would then stop clicking on the option itself for "inclusion" - the default action.)
Quick prototype showing just the "exclusion" action on hover:
Selectable currently supports exclusions by clicking on each option multiple times: clicking once sets it to "included", clicking again sets it to "excluded", and clicking again resets it to nothing.
There isn't a great way to expose this to assistive tech (currently being done with
aria-labels reading out instructions) but also this doesn't seem very discoverable to many people without specific instructions being given on the page.I'd like to propose an alternative design that shows the "exclusion" action on hover/focus on each option. (This could be further extended to show both an "exclusion" and "inclusion" actions if there's concern that people would then stop clicking on the option itself for "inclusion" - the default action.)
Quick prototype showing just the "exclusion" action on hover:
