issue/53 - My Widgets page accessiblility

[weining-li]

Added tabindex and ng-keypress attributes to elements on My Widgets page that weren't reachable by tabbing.

ucfopen/Materia-Server-Client-Assets#53

[FrenjaminBanklin]

This is a start, but there's more that needs doing here. The main two issues that still remain are:

1. When tabbing to any element that opens a modal dialog, then activating it, the focus remains on the element that activated the dialog instead of switching to the dialog itself. You can use an Angular directive to automatically apply focus to an element, and we've used such directives in a few widgets to date. See this example in Enigma, and how you'd use it.

2. There's no easy way to escape the list of widgets. Tab will move between widgets in the list and any keypress (see below about whether we should be strictly checking for the Enter key instead) will select that widget - but then the user is still stuck in the list of widgets. They'd have to keep tabbing through the list to get to the rest of the page. There are a few ways we could deal with this - either by overriding the Tab key and using arrow keys or some other means of navigating the widget list, automatically moving focus out of the widget list when a widget is selected and moving back to that same position in the list when the list receives focus, using some other key combination to enter or exit the widget list, etc.

Also, it might be preferable to use our ng-enter directive instead of ng-keypress wherever something is meant to be activated based on keyboard input. We might need to discuss whether that's necessary or if any key input will suffice.

[FrenjaminBanklin]

This is closer, looks like all of the access settings are still only reacting to clicks, though.