Accessibility improvements in fork

[alexlouden]

Hey there, I forked this library and I've made a bunch of changes including some accessibility improvements. Thought I'd share so you could pull some changes back upstream if you liked! 🙂

https://github.com/Bonobolabs/time-picker

Here I'm using arrow keys to navigate:

(There are quite a lot of changes you won't want to include, but I tried to make changes as separate commits so you may be able to cherry pick)

Full list of the accessibility changes:

• keyboard navigation
  • press space/enter to open or select options
  • press escape to close panel
  • change time and navigate between lists with arrow keys
• focus trap
  • focus stays within open time picker panel and doesn't get lost to background content
  • when the panel is expanded the input is focused, and focus is returned when collapsed
• uses ul/li elements with radiogroup/radio roles - so when you select hour 3 screenreader will read "3, radio, 1 of 12, Select hour, radio group".
  • This also allows for navigating between radio groups (from "Select hour" to "Select minute") in Group mode.
  • aria-checked is used to indicate the currently selected element
• screen-reader friendly aria-labels with no leading zeros (so screenreader says "one" instead of "zero one"), and labels on radio groups (e.g. "Select AM or PM").
• aria-invalid is used to indicate incorrectly formatted time (when entering time manually)

[0w3w]

Hey, I'd benefit for this changes to be incorporated into this project.

I'd recommend creating a pull request for this.

[alexlouden]

@0w3w I made some pretty major, quite opinionated changes so I'm not going to do a PR back to this repo, but you're welcome to use https://github.com/Bonobolabs/time-picker