Improve Accessibility

Feedback from @RichCaloggero:

General

• Add live region which will receive messages about number of matches
  • add div containing aria-live=“{count} matches” somewhere on the page
  • move it off-screen to hide it from sighted users
  • Update on every character, but only if a minimum amount of time has elapsed since previous update (about 0.33 seconds to 0.5 seconds seems like a reasonable minimum interval)

Single-select

• Hide hint input with aria-hidden since it shows up as a second input field which is confusing. It isn’t in the tab order, but screen reader users can still see it.

Multi-select

• Allow arrowing into the list as with the single select case
• Clicking a list item removes it from the list and places it before the input control
  • should either place it’s string value in the input field or use aria-describedby or aria-labelledby to link the chosen results with the input field

Tokens

• Make delete button focusable so token can be deleted via keyboard
• Better label (“delete” instead of “times”)

[ericgio]

@bamab: You can use inputProps to do that:

<Typeahead
  inputProps={{'aria-label': 'my-label'}}
  options={options}
/>

[ericgio]

@bamab: No, not possible. That input has aria-hidden="true" though; is that not enough?