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.

Sign up for GitHub

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

Jump to bottom

Improve accessibility #1471

Merged
merged 1 commit into from
Aug 28, 2018
Merged

Improve accessibility #1471

merged 1 commit into from
Aug 28, 2018

Conversation

andrew-me
Copy link
Contributor

Includes:

  1. Adds lang attribute to container div. Ideally we'd set lang on the html tag. However lock can appear as a modal in an external sites html, so next best thing is to set lang on the container div
  2. Adjusts the markup and styling of the 'Login' / 'Signup' tabs to improve keyboard navigation. The tabs now have role 'navigation. If a tab is focused it has different styling. The current tab is no longer a link
  3. Some svgs have been give aria-hidden"true". They are decoration so hiding them from screen readers seems sensible
  4. The box Button component has been changed from a 'span' to a 'button' so that it can be navigated to with a keyboard. Also, it's been styled to look different when focused.
  5. The submit button has been given a label
  6. Empty alt tag on the logo img in the header (it's arguably decoration)
  7. Aria tags on form inputs
  8. Linking of form errors to their inputs via aria. Use of role='alert' on form errors for screenreaders.

@andrew-me
Improve accessibility
9825cb2 
Includes:

1) Adds lang attribute to container div. Ideally we'd set lang on the html tag. However lock can appear as a modal in an external sites html, so next best thing is to set lang on the container div
2) Adjusts the markup and styling of the 'Login' / 'Signup' tabs to improve keyboard navigation. The tabs now have role 'navigation. If a tab is focused it has different styling. The current tab is no longer a link
3) Some svgs have been give aria-hidden"true". They are decoration so hiding them from screen readers seems sensible
4) The box Button component has been changed from a 'span' to a 'button' so that it can be navigated to with a keyboard. Also, it's been styled to look different when focused.
5) The submit button has been given a label
6) Empty alt tag on the logo img in the header (it's arguably decoration)
7) Aria tags on form inputs
8) Linking of form errors to their inputs via aria. Use of role='alert' on form errors for screenreaders.
@andrew-me andrew-me mentioned this pull request Aug 22, 2018
Closed
@luisrudge
Copy link
Contributor

Damn! Thanks! I'll try to review your PR this week, although I'm a bit full of work right now 😬 So, next week at the latest, I'll get this merged. Again, thank you so much!

@andrew-me
Copy link
Contributor Author

Thanks! There are definitely something things that could be added/improved (for example it's not obvious enough which items have keyboard focus) but hopefully it's a good start.

@luisrudge luisrudge merged commit 1c9bcc2 into auth0:master Aug 28, 2018
@luisrudge luisrudge added this to the v11.9.0 milestone Aug 28, 2018
@luisrudge
Copy link
Contributor

Hi @andrew-me. Is there anything in this PR that you think is causing this issue? #1477

@MaxMood96 MaxMood96 mentioned this pull request Jan 10, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@luisrudge luisrudge luisrudge approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v11.9.0
Development

Successfully merging this pull request may close these issues.
2 participants
@andrew-me @luisrudge