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

Focus error summary on window load #671

Merged
merged 5 commits into from
May 2, 2018

Conversation

NickColley
Copy link
Contributor

@NickColley NickColley commented Apr 25, 2018

This adds functionality to focus the error summary component when the page loads.

This helps users of assistive technologies recognise and get out of situations when they've encountered an error in their submission.

This re-implements functionality in GOV.UK Elements, but avoids re-implementing the logic to set event.preventDefault() on links clicked.

It's not clear why this was done, my assumption is that it's done to avoid cluttering the URL with anchor hashes but I'm not including this as we're not sure.

Testing

Browser testing

Testing with browsers (✅)

This table is based on https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in

Operating system Browser Result
Windows Internet Explorer 8-10
Internet Explorer 11
Edge (latest versions)
Google Chrome (latest versions)
Mozilla Firefox (latest versions)
macOS Safari 9+
Google Chrome (latest versions )
Mozilla Firefox (latest versions)
iOS Safari 9.3+
Google Chrome (latest versions
Android Mozilla Firefox (latest versions)
Google Chrome (latest versions)
Windows Phone Internet Explorer (latest versions)

Accessibility

Testing with colours overriden (N/A)

This is based on https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/

N/A

Testing with assistive technologies (✅)

This table is based on https://www.gov.uk/service-manual/technology/testing-with-assistive-technologies

Software Version Browser Result
JAWS 15 or later Internet Explorer 11 ✅ Reads out alert heading
ZoomText 10.11 or later Internet Explorer 11 N/A
Dragon NaturallySpeaking 11 or later Internet Explorer 11 N/A
NVDA 2016 or later Mozilla Firefox (latest versions) ✅ Reads out entire alert, and announces the component as a landmark
VoiceOver Mac OSX N/A Safari 10 (or higher) on Mac OS X 10.10 ✅"You are currently on an alert" Same behaviour as GOV.UK Elements
VoiceOver iOS N/A iOS 10.3 (or higher)

https://trello.com/c/UzvIbXmM/775-2-automatically-focus-the-error-summary

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-671 April 25, 2018 14:22 Inactive
@NickColley NickColley force-pushed the focus-error-summary-on-window-load branch from 42e5154 to 9d2a0ec Compare April 26, 2018 16:32
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-671 April 26, 2018 16:32 Inactive
Ensures users of assistive technologies see errors on a page first
Makes sure addEventListener works in older browsers such as IE8.
@NickColley NickColley force-pushed the focus-error-summary-on-window-load branch from 9d2a0ec to 72f0d3e Compare April 30, 2018 13:37
@NickColley NickColley changed the title [Do not merge] Focus error summary on window load Focus error summary on window load May 1, 2018
Copy link
Contributor

@alex-ju alex-ju left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 Look good!

We should settle on a testing template and standardize it for contribution. This PR message seems like a good starting point.

@NickColley NickColley merged commit 53d2ccc into master May 2, 2018
@NickColley NickColley deleted the focus-error-summary-on-window-load branch May 2, 2018 11:44
@kr8n3r kr8n3r mentioned this pull request May 18, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants