Add notification banner #2025
Merged
Add notification banner #2025
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
The header and links change colour based on if the notification banner is type: notification, success or error.
As part of the notification banner work, we introduced a new govuk-link-style-error mixin to automatically apply error colours to links (including visited and hover styles). We should apply these styles to the error summary component so things are consistent. The error summary doesn't currently have visited/hover styles for links, which isn't great, so this change adds those styles.
Style notification banner
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.
This is following some feedback from the GDS Accessibility clinic: #1999 (comment) There is no need for the component to be focusable after the page has loaded. Only remove the tabindex attribute if it was set by JavaScript.
Also test that if the tabindex wasn't added with JavaScript, it doesn't get removed by the script.
…index-on-blur Remove tabindex attribute from notification alert banner on blur
To be consistent with the options we use elsewhere, where we use text / html suffixes together, update the Nunjucks template for the notification banner to accept `titleText` rather than `title`.
Change ‘title’ to ‘titleText’ in notification banner
NOTE: this PR does not update the macro documentation - this will be done separately in #2001 We have decided to keep the aria-labelledby attribute on alert banners too, to make things consistent with the error summary. We were seeing some odd behaviour when testing with NVDA and Voiceover, but this change did not seem to have a negative impact and it also means that when we next revisit the component we're at least working from a place where everything is consistent to start with.
Add a version of an ‘error’ style notification banner to a new full page example based on ‘Upload a Photo’, where the photo upload always fails.
Add aria labelledby to alert notification banners
Co-authored-by: Eoin Shaughnessy <eoin.shaughnessy@digital.cabinet-office.gov.uk>
Add notification banner to a full page example
Update param descriptions for notification banner
hannalaakso
approved these changes
Nov 19, 2020
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 is a combination of several PRs which have already been reviewed and merged into the
feature/notification-bannerbranch:The notification banner work has been done using a 'feature branch' so that we can keep code reviews small whilst avoiding merging unreleasable work to the
masterbranch. This PR merges that feature branch intomasternow that the notification banner work is ready to release.This means that all of the individual changes have already been through one round of code review. To review this pull request, really all we want to check is that the changes are what we expect based on the above.