Accessibility Audit

[TheOtterlord]

Perform an accessibility audit of all existing components & pages. Contributions are welcome! If you spot an issue, add it to the thread below. If you are able, take an issue (or more) from below and create a PR referencing this issue.

• Screen reader support

• Can't jump to toast viewport using keyboard

• Searchable Select should keep focus when enter is pressed

• Arrow keys shouldn't move focus but instead select the radio element

• Icon Button announced the image and a label-less button

• Arrow keys don't work when select menu is focused but not open

• When select menu is open, pageup and pagedown don't work

• Tabs don't have focus styles, navigation via arrow keys

• Text Input needs a label (sr-only?)

• Textarea needs a label (sr-only?)

• Select menu can't be opened with space key

• Focus on Modal can escape

• Focus on modal is not on the first focusable element once opened

• Icon in searchable select is announced by screen reader

• Divider doesn't have a proper role

• Arrow Keys don't work on radio group, needs a roving tabindex

• User component's image doesn't have a proper alt text

• Toast doesn't get announced by screen reader

• Toast doesn't respect aria-live requirements

• Dropdowns need to be:

  • closeable via escape
  • navigable via arrow keys