Our component's job is to display an enhanced <input> element that will, when focused, react to what the user types by rendering a dropdown-style list of available options that the user can then select from.
As a primitive outline, we can imagine the component as containing <div>, <input> into which the user can type, and <ol> to display the suggestions:
const PlantSelectionInput = () => { return ( <div className="PlantSelectionInput"> <input autoComplete="off" aria-autocomplete="inline" role="combobox" /> <ol> <li>A plant name...</li> <li>A plant name...</li> <li>A plant name...</li> </ol> </div> );};
The role and aria-autocomplete attributes on <input> are used to instruct the browser (and any screen readers) that ...
