Supporting key navigation and element focusing in vue

when the app loads, we need to select the first button

• here, we can make use of the created hook to know that the component is loaded, but it won't be ready to use just yet. The elements are added on screen via the mounted hook, which guarantees the HTML has been drawn on screen.
• The app should grab focus upon load, then take control of keyboard presses from there on

*Remember not to use arrow functions for hooks, as The VueJS people know what this is, and use it intentionally. If we need some async thing, we can use .bind(this)as needed.

Support for keyboard navigation

Approach one

Tabbing currently works on the elements, but the arrow keys have no specific behavior. We have access to a global event listener on keydown to detect keyboard presses, and a hook for incrementing and decrementing the item to focus on.

We need to modify start-button to handle focus based on an app index in such a way that tabbing and arrows do not get out of sync. We can capture all those key strokes in JS and allow the tab fallback.

• Tab / ArrowRight / ArrowDown will increment the position of the selected button and focus it
• Shift+Tab / ArrowLeft / ArrowUp will decrement the position of the selected button and focus it
• pressing any of the button keys mapped to each button should first focus, then activate the button
• Spacebar/Enter on any button should activate the currently selected button

We can use Vue directives potentially to handle this. if the app implements v-on:keypress, we can route all keyboard events for the buttons. More on v-on directives

We should also consider using modifiers to prevent default behavior.

Highlighting selected option

We can use v-bind:class to handle setting a focus state along with :focus and :active

from start.