Auto-focus the notification banner, add tests #1994
Merged
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-review-pr-1994
hannalaakso
commented
Oct 22, 2020
hannalaakso
force-pushed
the
add-notifications-auto-focus
branch
from
2abb78c to
b84d8c2
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1994
hannalaakso
force-pushed
the
add-notifications-auto-focus
branch
from
b84d8c2 to
ac4831d
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1994
src/govuk/components/notification-banner/notification-banner.js
Outdated
Show resolved
Hide resolved
src/govuk/components/notification-banner/notification-banner.js
Outdated
Show resolved
Hide resolved
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1994
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1994
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1994
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1994
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1994
36degrees
reviewed
Oct 29, 2020
src/govuk/components/notification-banner/notification-banner.test.js
Outdated
Show resolved
Hide resolved
src/govuk/components/notification-banner/notification-banner.js
Outdated
Show resolved
Hide resolved
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1994
If a notification banner has `role="alert”`, add tabindex=“-1” to it so it can be focused and move keyboard focus to it with JavaScript for increased visibility to assistive technologies. Don’t focus the banner if it has the data-disable-auto-focus attribute.
Test if the element has the correct tabindex and can be focused. Test that element is not focused if it has the data-disable-auto-focus attribute or it doesn’t have role=alert.
hannalaakso
force-pushed
the
add-notifications-auto-focus
branch
from
ac6187d to
d9cc60a
Compare
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.
This PR:
role="alert"and addstabindex="1"so it can be fosused.role=alert, it should receivetabindex="1"so it can be focused with JavaScript and the keyboard focus should move to it on page loaddata-disable-auto-focusattribute, or it doesn't haverole="alert"it should not have a tabindex or be focusedTested in:
✅ Chrome 86 (Mac)
✅ Firefox 81 (Mac)
✅ Safari 14 (Mac)
✅ Galaxy S20 (Android 10)
✅ Galaxy Note 10 (Android 9)
✅ iPhone XS 12
✅ IE11
✅ IE10
✅ IE9
✅ IE8
Addresses part of #1935