Create SelectNext component replacing Select

[acelaya]

Create a new SelectNext component, which is meant to replace existing Select one.

The benefits it presents include being able to customize the listbox UI, and supporting complex objects as values.

SelectNext is a controlled component designed to be used like this:

import { SelectNext } from '@hypothesis/frontend-shared';

const items = [
  { id: 1, name: 'All students' },
  { id: 2, name: 'Albert Banana' },
  { id: 3, name: 'Bernard California' },
  { id: 4, name: 'Cecelia Davenport' },
  { id: 5, name: 'Doris Evanescence' },
];

function App() {
  const [value, setValue] = useState<(typeof items)[number]>();

  return (
    <SelectNext
      selected={value}
      onChange={setValue}
      label={
        value ? (
          <>{value.name} ({value.id})</>
        ) : (
          <>Select one...</>
        )
      }
    >
      {items.map(item => (
        <SelectNext.Option value={item} key={item.id}>
          {({ disabled, isSelected }) => <>{item.name} ({item.id})</>}
        </SelectNext.Option>
      ))}
    </SelectNext>
  )
}

Existing Select is now marked as deprecated, and the plan is to remove it on next major release, while we also rename SelectNext to plain Select.

TODO

• Add test
• Fix a11y issues highlighted when testing Select

Follow up improvements

There are a couple of things we can improve, but it would be better to tackle separately to avoid a PR bigger than it already is:

• Handle too long content in options or select (overflow ellipsis?).
• Prevent looping back to top/bottom in arrow keys navigation when reaching the end of the list. See comment.
• Exclude the select toggle button from the arrow key navigation sequence. See comment.
• Close listbox when focus moves to some other component (make sure the toggle button is not focused in this case).

Nice to have:

• Support searching/filtering: See technical proposal Create enhanced select prototype page #1237 (comment)
• Support feedback="error" and feedback="warning" like the existing Select does.

A big chunk of this PR is the new pattern library documentation page that you can see by checking out this branch and going to http://localhost:4001/input-select-next

Closes #1223

[codecov]

Codecov Report

Merging #1247 (c0b16c7) into main (b9b950c) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main     #1247   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           59        61    +2     
  Lines          790       836   +46     
  Branches       318       327    +9     
=========================================
+ Hits           790       836   +46     

Files Changed	Coverage Δ
src/components/input/Select.tsx	100.00% <ø> (ø)
src/components/input/SelectContext.ts	100.00% <100.00%> (ø)
src/components/input/SelectNext.tsx	100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[robertknight]

Some accessibility things I noticed in testing with VoiceOver:

1. The toggle button is not identified as a control that shows a listbox, but just as an ordinary toggle button.
2. When pressing tab while the listbox is open, focus moves elsewhere in the document, but the popover remains visible

I think the general pattern that we want to follow here is the Select-Only combobox. In addition to the two items mentioned above, there are other details of keyboard handling etc. in that document.

In my testing, setting role=combobox on the toggle button was sufficient to resolve item (1).

This PR is quite large now so I suggest we resolve that, and then create a follow-up issue for the remaining items.

[robertknight]

This is generally looking in good shape. There are a few more things to address around keyboard input and accessibility. If we're agreed on following the "select-only combobox" pattern for this, then I think setting role="combobox" is enough to get this to a state where we can merge this version, and then a follow-up issue can be opened for the remaining items.

[robertknight]

Listbox popup button is now announced as expected, including collapsed / expanded state.