#52 Arrow keys navigation and screen reader support for progress bar

[susyzan]

Hello!

I created this pull request as a suggestion on how to implement keyboard support.

Users should be able to tab into the progress bar and the first cell, and use arrow keys to select the cell. Pressing tabs moves the focus out of the bar to the description.

What this code does:

• Add aria attributes to make the bar and its cells behave like tabs;
• Set the first cell as focusable with the TAB key, then sets tabindex=-1 to all other cell so they can only be navigated using the arrow keys;
• Implements screen reader support by using aria attributes to set relationships and labels.

IMPORTANT! I haven't implemented the tab arrow key navigation as it looks like it's taken care by Boost in aria.js updateTabFocus.

This is far from perfect and I could only test it on Chrome, Firefox, Safari on a Mac. I also briefly tested it with VoiceOver.

Unfortunately, it may be a bit rushed due to time limitations.

I hope this helps somehow.

Thanks
Susie