V8: Login form accessibility improvements and form input tabbed focus styles #5304
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR does two main things, first off it adds a little bit of JavaScript that will add a
tabbing-active
class when a person hits the tab key. Using this, I have added a tab specific style for form inputs. This was initially going to be just for the login page, but add all the form inputs use the same styling it should improve some more form inputs throughout the backoffice.This styling only comes into effect if a person uses the tab key. Once it is hit the styling will remain. This addition was inspired via the following article. https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2. At Yoyo we often use https://github.com/ten1seven/what-input as it provided more control as to when you may want to add styles related to a persons input choice, but it also comes with some more complexity and another dependency so i figured i'd keep it simple.
The second part of the PR improved the toggle password button on the login form by focusing the person back to the password field when it is clicked.
Fixes issues listed in #5277