Focus management

[rianrietveld]

The form is in fact just one page with the content dynamically loaded. This can become an issue for keyboard or screen reader users. If you use that tab key to junp form focusable element to focusable element , the focus should stay logically and predictable. There are a few cases where there is loss of focus.

1: After an error message is generated: put the focus back on the input field that generated the error. Note I'm not familiar with Vue, but you probably can use vanilla JavaScript for this.

2: After a form step submit the focus is lost. Put the focus on the first element. That is now the back button, maybe not the best choice. We could give the <div id="app"> a tabindex=0, like <div id="app" tabindex="0">, then the focus always starts at the top of the page after a submit.