Add design polish to TextField, SearchField, and Select

[jordankoschei-okta]

One quirk with Select: I've added the delete icon on multi-select Chips, but note that it only works on controllable Select components. If the Select is uncontrolled, the delete icon won't be displayed.

[jordankoschei-okta]

Part of this code is non-obvious, so here's an explanation:

Nesting removable tags inside a <Select>

Problem

Under the WCAG guidelines, an interactive element can't have other interactive elements as children. It breaks the focus order and makes things weird for screen-readers and other assistive technologies.

In our <Select> component, when hasMultipleChoices is true, we display the selected values as chips within the Select input. The chips have a clickable "remove" icon. Hence the problem:

• We want users to be able to remove selected multi-select values from outside the menu
• Our a11y tests were failing when we had removable tags nested inside the <Select>

Goal

• Make the <Select> work as usual for everyone
• For users who are using a mouse, add the bonus functionality of being able to click a chip to remove it without needing to click into the Select menu.

Solution

We render a wrapping list of <Chip>s as the interior of a multi-Select's input box.

The chips are rendered twice:

1. Non-interactive, fully-transparent "placeholder" chips that are placed inside the <Select>. These don't do anything, but are necessary for ensuring the Select is the right size.
2. Interactive chips with the proper "remove" functionality, rendered outside the <Select> and positioned absolutely to sit on top of the placeholder.

This ensures that the multi-select meets these three criteria:

1. The input is the right size, and can grow to accommodate any number of selected items
2. Chips are removable via a click
3. The <Select> remains accessible because, in the DOM, the interactive chips aren't nested inside the interactive <Select>.

Future

Within the <Select> dropdown, we don't float selected items to the top, so for users who aren't able to use a mouse, navigating the list to deselect selected options can be painful when there are numerous items in the list. One possible solution would be to show the selected items under the Select and provide a secondary interface for removing them. Or, we could float selected items to the top of the list (IIRC, we've tried this solution previously and product designers found usability issues with it).

[KevinGhadyani-Okta]

Added some comments. Let's discuss this further in a meeting.

[jordankoschei-okta]

Reintroduce shouldForwardProps

[jordankoschei-okta]

Bonkers merge issue, replacing with #2142