Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V8: Login form accessibility improvements and form input tabbed focus styles #5304

Merged

Conversation

MMasey
Copy link
Contributor

@MMasey MMasey commented Apr 20, 2019

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.

image

image

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

@poornimanayar
Copy link
Contributor

Hi @MMasey ,

Thanks for this PR, I am sure there are more to come. We will review it and get back to you if we need anything more.

Regards,
Poornima

@warrenbuckley
Copy link
Contributor

Great work @MMasey 💪 🎉
All merged in :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants