ARIA 1.0 combo box

This modifies the combo box to use the ARIA 1.0 pattern. In this pattern the listbox is connected to the textbox via aria-owns instead of aria-controls.

The ARIA 1.0 pattern creates a confusing accessibility tree as the listbox became a child of the textbox.

This pattern has been deprecated.

import { useState } from 'react';
import { ComboBox, useTokenSearch } from '@citizensadvice/react-combo-boxes';

const options = ['Apple', 'Banana', 'Cherry', 'Mango', 'Ugli fruit'];

function renderInput({ 'aria-controls': ariaOwns, ...props }) {
  return (
    <input
      {...props}
      aria-owns={ariaOwns}
    />
  );
}

export function Example() {
  const [value, setValue] = useState(null);
  const [search, setSearch] = useState(null);
  const filteredOptions = useTokenSearch(search, { options });

  return (
    <>
      <label
        id="select-label"
        htmlFor="select"
      >
        Select
      </label>
      <ComboBox
        id="select"
        aria-labelledby="select-label"
        value={value}
        onValue={setValue}
        onSearch={setSearch}
        options={filteredOptions}
        renderInput={renderInput}
      />

      <label htmlFor="output">Current value</label>
      <output
        htmlFor="select"
        id="output"
      >
        {JSON.stringify(value, undefined, ' ')}
      </output>
    </>
  );
}