Create accessible Combobox component

[diondiondion]

To make the Share dialog's user selector accessible, we need to create a multi-select-capable combobox component.

This can be based on the existing search autocomplete dropdown menu, but needs to support multi-selection and must be customisable to work with different input components.

Useful resources:

• https://sarahmhigley.com/writing/select-your-poison/
• https://www.w3.org/TR/wai-aria-practices-1.2/#combobox

[rob-mackenzie]

I tried sharing an asset but it's not working, it says that I must have at least one user or team selected even though I do.

[diondiondion]

I tried sharing an asset but it's not working, it says that I must have at least one user or team selected even though I do.

That's fixed now, thanks for checking it. 👍

[diondiondion]

QA note:
This change affects the following places:

• Hub main search auto-complete dropdown menu
• "Share with" field in the hub share popup (when sharing playlists or assets)
• "Share with" field in the Admin dashboard share popup (when sharing playlists)

The general functionality of the dropdown menu should be unchanged, however the "Share" menus should now be accessible, and navigating the dropdown menu by keyboard with a screenreader, the highlighted option should be read out by the screenreader.

[SanjanaKampati]

Retested the ticket against dev environment using url:https://zenq-dev.fiveapp.com and observed the following

[QA Passed]

1.Search results of related assets/playlists are displayed as dropdowns along with 'View all results' text when searched the assets/playlists from your hub main search.
2.User is able to share the playlist and assets to the users(single/multiple) from admin dashboard and your hub.
3.Playlist/asset is displayed in the email and your inbox of the shared user

[NVDA screen reader]
1.The highlighted user name is read out by the screen reader when navigating the dropdown users of share option through keyboard.
2.The highlighted playlist/asset name is read out by the screen reader when navigating the dropdown assets/playlists from search results through keyboard.

[Observation]
1.'Combo box collapse editable search for your learning hub users by their name and email address' is read out by the screen reader when cursor is placed in the 'Share' field through keyboard/mouse actions.

2.'Search view all results for search line bar, search combo box collapse editable blank' is read out by the screen reader when cursor is placed in the 'Search bar' field through keyboard/mouse actions.

[diondiondion]

Hi @SanjanaKampati , thank you for testing this.

1.'Combo box collapse editable search for your learning hub users by their name and email address' is read out by the screen reader when cursor is placed in the 'Share' field through keyboard/mouse actions.

2.'Search view all results for search line bar, search combo box collapse editable blank' is read out by the screen reader when cursor is placed in the 'Search bar' field through keyboard/mouse actions.

Both of these are working as expected.

[SanjanaKampati]

@diondiondion: Thanks for the confirmation. As the below observations are expected moving the ticket to QA Passed.

[SanjanaKampati]

Retested the ticket against staging environment using url:https://zenq-staging.fiveapp.com and observed the following

[QA Passed]

1.Search results of related assets/playlists are displayed as dropdowns along with 'View all results' text when searched the assets/playlists from your hub main search.
2.User is able to share the playlist and assets to the users(single/multiple) from admin dashboard and your hub.
3.Playlist/asset is displayed in the email and your inbox of the shared user.

[NVDA screen reader]

1.'Combo box collapse editable search for your learning hub users by their name and email address' is read out by the screen reader when cursor is placed in the 'Share' field through keyboard/mouse actions.
2.'Search view all results for search line bar, search combo box collapse editable blank' is read out by the screen reader when cursor is placed in the 'Search bar' field through keyboard/mouse actions.
3.The highlighted user name is read out by the screen reader when navigating the dropdown users of share option through keyboard.
4.The highlighted playlist/asset name is read out by the screen reader when navigating the dropdown assets/playlists from search results through keyboard.