Add NestedFilterableMultiselect to Multiselect

shczhen commented 4 years ago

Summary

Add NestedFilterableMultiselect to Multiselect, from carbon-design-system/carbon-addons-cloud-react/src/components/MultiSelect

Latest code is ready here for review: https://github.com/shczhen/carbon/tree/addNestedFilterableMultiselect

Justification

For some context, the NestedFilterMultiselect was a component defined about a year ago for a major IBM Cloud project. Due to time constraints as well as some confusion the component ended up in Carbon Add-ons Cloud instead of Carbon core. As some of the Carbon Add-ons Cloud components are being replaced in Cloud PAL the backlog item to contribute the NestedFilterMultiselect has been resurfaced.

Desired UX and success metrics

https://github.com/carbon-design-system/carbon/pull/4482#issuecomment-547900155
See images below
The user will be able to distinguish between different types of choices within the dropdown.
If an option has suboptions, they will be able to expand it.
The user will be able to see the first option they selected even after closing the dropdown.

"Must have" functionality

Dropdown options can be grouped into categories
Options can be expanded if there are sub-options
Because some options have a caret and are expandable, clicking on the row should not automatically select that row - user should have to click directly on checkbox
First selection a user makes is displayed within a pill
If any additional selections are displayed, switch to showing the number selected (current behavior)
User can key through list of options. Hitting return opens an expandable option if one is available. If not it checks the checkbox.

Specific timeline issues / requests

ASAP

Available extra resources

dakahn commented 4 years ago

Have you put thought into how a user might interact with this via a keyboard/screen reader? What does that interaction look like? Can you talk a little about whatever prototyping/user testing led your team to this feature?

We need to demonstrate a real user need for this to be a core feature and not simply an add-on.

shczhen commented 4 years ago

Have you put thought into how a user might interact with this via a keyboard/screen reader? What does that interaction look like? Can you talk a little about whatever prototyping/user testing led your team to this feature?

Hi @dakahn , I do put thought into a11y. User can use TAB to select filter bar, and use Arrow Key to select items which wrapped by Checkbox and aria-label. This component is used as REX filter component in IBM Cloud. And here is @loganmccaul 's words.

There are two reasons why we want to make sure this component goes back upstream to Carbon.

After talking with Carbon they have expressed interest in this functionality being added on or an additional component to the already existing Multiselect.

With the addition of this component in Carbon Addons Cloud we had to duplicate a few different utilities and components from Carbon with slight modifications in order for them to work for our use case. We don't want to have to maintain underlying utilities or components in Carbon Addons Cloud, especially as Carbon is growing evolving forking and altering many of these components will result in a fragmented experience on our Cloud platform.

The last discussion with Carbon over this component lead to some design requests.

dakahn commented 4 years ago

@shczhen Sorry if it seemed like I was implying you don't think about those sorts of things. Clumsy wording. It's just that since that's my primary concern and it wasn't mentioned in the original issue I wanted you to talk about your research/findings/whatever else so I know where we're starting. ✌️

Our current protocol for how add-ons become core components/functionality is a little hazy and so nothing I'm about to say should be taken as a blocker necessarily, but if/when this conversation moves forward I want it here nonetheless.

It would be fantastic if you could point us to a live version of this for us to kick the tires on from an a11y perspective (you may have done this in another thread, sorry if that's the case)

That said I have concerns about the accessibility and usability of this component. That keyboard interaction model seems iffy. When I arrow down and select an option with nested options do the nested options reveal themselves? Left and right arrow to move into and out of nested lists of options?

I'm also wondering -- as a sighted user say there is a selectable option with three nested options and only one selected. We check one nested option (but leave two unchecked). Is the top most option checked or unchecked -- are there any visual indications that this unselected options has selected children?

as for screen reader operability -- making a selection/deselecting potentially multiple layers of nested selection is an interesting problem. Wondering how we'd expect that to speak and what requirements there'd be from IBMa for this feature? @snidersd

snidersd commented 4 years ago

@dakahn @shczhen Is it possible to get access to the working example? It's important for a screen reader user to know where they are within the multi-select list as well as the options within each nested list as they navigate. The state of the list section (collapsed or expanded) and the state of each option within each nested section (checked, unchecked or mixed) needs to be conveyed in a meaningful way so the user understands where they are when selections are being made. I can take a look if an example is available.

shczhen commented 4 years ago

nested-filterable-multiselect example: https://5e0ab97146e9961b2ea17aaf--zealous-boyd-a5f8c6.netlify.com/?path=/story/multiselect--nested-filterable-multiselect

Hi @dakahn , thanks for your suggestions.

That said I have concerns about the accessibility and usability of this component. That keyboard interaction model seems iffy. When I arrow down and select an option with nested options do the nested options reveal themselves? Left and right arrow to move into and out of nested lists of options?

The nested options can reveal themselves, and left/right arrow cannot move into/out of options. The former version which used in cloud-addons repo uses down arrow to iterate through each option when the filter input focused, option with nested sub-options will auto expand if selected. Otherwise the up arrow will collapse them.

I'm also wondering -- as a sighted user say there is a selectable option with three nested options and only one selected. We check one nested option (but leave two unchecked). Is the top most option checked or unchecked -- are there any visual indications that this unselected options has selected children?

The top option will be checked(indeterminate).

Please let me know if any comments 😊. For design, @vsnichols we need your help.

And @snidersd , here is the example.

snidersd commented 4 years ago

@shczhen @dakahn I ran a quick screen reader test with VO and found accessibility violations. The component failed the following checkpoints: 1.3.2 Meaningful Sequence - https://www.ibm.com/able/guidelines/ci162/meaningful_sequence.html 2.4.6 Headings and Labels - https://www.ibm.com/able/guidelines/ci162/headings_and_labels.html 4.1.2 Name, Role, Value - https://www.ibm.com/able/guidelines/ci162/name_role_value.html Note: Full accessibility verification testing is needed to find all issues.

A few of the issues found with VO are as follows: -Tab to the list box, 6x and clear button are not announced when the listbox receives focus requiring the user to tab at this point is an unexpected behavior.

In addition, the number displayed has no context. It's not clear what the number represents.
Read across to the collapse image. It is announced as "close", but it clears the selection when activated.
Arrow up or down to read each item in the list. (Note: The clear button and filter are skipped) and each item # is announced but the state (checked, mixed, collapsed, expanded, etc.) are not announced.
List items with focus can not be expanded using only the keyboard with VO.
Keyboard behavior is inconsistent. If I tab through to the filter and then use the arrow keys each of the items open upon focus, but the labels and states are not announced.

emyarod commented 4 years ago

we're envisioning usability issues with the nested filterable multiselect pattern, but a searchable Treeview may help cover this use case in the near future

carbon-design-system / carbon