Prevent error summary from being refocused after it has been initially focused on page load #2491
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2491
Always adding tabindex="-1" to the error summary means that as well as being programatically focusable the summary will also take focus if a user clicks within it, which may be confusing as the focus indicator will appear. Instead, add the tabindex just before focusing the element, and then remove the tabindex attribute as soon as focus is lost, preventing the element from taking focus again afterwards. This also makes the approach consistent with the notification banner and skip link, which also remove tabindex on blur. It would make sense for users to remove the tabindex attribute from their own markup as we are now adding it using JavaScript, but the component should work fine either way so I don't believe this is a breaking change.
36degrees
force-pushed
the
error-summary-prevent-refocusing
branch
from
0177f37
to
e1b17e0
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2491
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2491
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2491
vanitabarrett
approved these changes
Jan 11, 2022
EoinShaughnessy
changed the title
Merged
andymantell
added a commit
to surevine/govuk-react-jsx
that referenced
this pull request
Mar 12, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Always adding
tabindex="-1"to the error summary means that as well as being programatically focusable the summary will also take focus if a user clicks within it, which may be confusing as the focus indicator will appear.Instead, add the tabindex just before focusing the element, and then remove the tabindex attribute as soon as focus is lost, preventing the element from taking focus again afterwards.
This also makes the approach consistent with the notification banner and skip link, which also remove tabindex on blur.
It would make sense for users to remove the tabindex attribute from their own markup as we are now adding it using JavaScript, but the component should work fine either way so I don't believe this is a breaking change.
This work is being done as part of #1068 – a future PR will make it possible to disable the autofocus functionality.