Add support for multiple skip links in header #189
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
edwardhorsford
temporarily deployed
to
register-pro-multiple-s-kqbumi
edwardhorsford
temporarily deployed
to
register-pro-multiple-s-kqbumi
jesseyuen
reviewed
Feb 15, 2021
app/views/records.html
Outdated
| @@ -4,6 +4,24 @@ | |||
| {% set backLink = 'false' %} | |||
| {% set navActive = "records" %} | |||
|
|
|||
| {% block skipLink %} | |||
|
|
|||
| <div class="app-skip-link--container"> | |||
There was a problem hiding this comment.
Consider indenting app-skip-link--container
There was a problem hiding this comment.
Thanks! fixed.
jesseyuen
reviewed
Feb 15, 2021
app/views/records.html
Outdated
| <span class="app-skip-link--item"> | ||
| {{ govukSkipLink({ | ||
| href: '#records-list', | ||
| text: 'Skip to results' if selectedFilters else 'Skip to records' |
jesseyuen
reviewed
Feb 15, 2021
| @@ -0,0 +1,99 @@ | |||
| $important: true; | |||
|
|
|||
| // This is basically a copy of the Design System govuk-visually-hidden-focusable mixin | |||
There was a problem hiding this comment.
Not related to your code but I find a bunch of the design system css so hard to read. 🧐
jesseyuen
approved these changes
Feb 15, 2021
edwardhorsford
temporarily deployed
to
register-pro-multiple-s-kqbumi
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.
Our service has a number of filters you can apply to filter a group of records. We recently used the accessibility personas to review these pages - and felt it would be good to provide a way of skipping past the filters to the results.
In this pr I'm experimenting by adding a second skip link in to the header. This uses the newish
:focus-withinproperty to show the skip-link div if either of the children links are focussed. This should gracefully degrade in browsers that don't support the property to just show two skip links in turn.The css is mostly copied styles from the
govuk-skip-linkcomponent, but applied to the header instead. If the browser supports:focus-withinI then remove some of the default styles from the skip links themselves.Video:
Without support for the property: