[Remove Vuetify from Studio] Create accessible skeleton for autocomplete multi-select component

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Sub-issue of #5060.

Complexity: High

Summary

Create a skeleton for a future autocomplete multi-select component. In this first version, public interface, styling and details won't be included. The main goal is implementing important user interactions in an accessible manner:

• Semantic markup for dropdown, pills, and multi-selectabe list
• Autocomplete search
• Selecting
• Deselecting via (1) clicking list item, (2) pill 'x' button, and (3) clear all button
• Keyboard interactions
• Screen reader support

This component will combine:

• (1) Combobox Pattern
  • See examples with autocomplete
• (2) Listbox Pattern
  • See examples with multi-select

As for (2), Kolibri already has a multi-selectable list with autocomplete and robust a11y implemented, so much of the heavy lifting is done! This logic now needs to be taken and adapted to work as a dropdown (combobox). At this point we won't yet create design system component to be shared between Kolibri and Studio, but it's desired to re-use as much existing code from Kolibri as possible since it's already tested.

Background

This is foundational work before we can replace Studio's Vuetify multi-selects (with or without autocomplete) with our own component that will eventually most likely become a new KDS component. Here are few of many examples of Vuetify multi-selects we plan to replace:

with autocomplete	without autocomplete (Settings > Storage > 'Request more space' form)

Guidance

• Even though this won't yet be a design system component, for ease of development and collaboration with our QA team, use Kolibri Design System repository and playground.
• Since some multi-selects will have autocomplete, and some won't, even in this beginning stage it is important to make clear distinction between these two modes (may be toggled with autocomplete prop).
• Since this is a pattern used in many places in Studio, each dropdown pill should be clearable, such as here:

[MisRob]

Hi @BabyElias, as we chatted, this will be ready for your exploration any time and if you'd like :) Thank you!

[MisRob]

FYI possibly reserved for @GarvitSinghal47 - if you decide to work on this, Garvit, message us here and we will assign

[GarvitSinghal47]

@MisRob Yes, I’d like to take this up. Please go ahead and assign it to me.