Make use of hidden in header navigation functionality
#2727
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
owenatgov
changed the title
hidden in header navigation functionality.hidden in header navigation functionality
owenatgov
force-pushed
the
hidden-attribute-on-header-menu-nav
branch
from
d3ad78c
to
7c534d0
Compare
owenatgov
commented
Jul 25, 2022
querkmachine
approved these changes
Jul 26, 2022
36degrees
reviewed
Jul 26, 2022
owenatgov
force-pushed
the
hidden-attribute-on-header-menu-nav
branch
from
ad6918e
to
9f74c78
Compare
owenatgov
force-pushed
the
hidden-attribute-on-header-menu-nav
branch
from
9f74c78
to
41fbf07
Compare
owenatgov
force-pushed
the
hidden-attribute-on-header-menu-nav
branch
from
41fbf07
to
bdd65f0
Compare
36degrees
reviewed
Jul 29, 2022
owenatgov
force-pushed
the
hidden-attribute-on-header-menu-nav
branch
from
bdd65f0
to
9e757bb
Compare
36degrees
reviewed
Aug 1, 2022
owenatgov
force-pushed
the
hidden-attribute-on-header-menu-nav
branch
from
9e757bb
to
5f9eda5
Compare
Sets the `hidden` attribute on the menu button by default so that the menu button doesn't appear on no js. Additionally sets `&hidden` to be `display: none` in CSS to get around old versions of IE which don't support `hidden`.
|
I've made an issue to handle the inconsistent |
owenatgov
force-pushed
the
hidden-attribute-on-header-menu-nav
branch
from
5f9eda5
to
7da4c63
Compare
36degrees
reviewed
Aug 4, 2022
owenatgov
force-pushed
the
hidden-attribute-on-header-menu-nav
branch
from
7da4c63
to
af64c4b
Compare
We use the native `hidden` attribute here instead of classes as it reliably hides elements for screen readers and when CSS doesn't load, saving us the need to rely on CSS to manage the menu. This change also introduces a variable to save the menu opened/closed state and a `matchMedia` for the desktop view as a way to save mobile menu opened/closed state if the user moves from small screen to large then back to small. If `matchMedia` isn't available then we don't bind any events and the user will get the "no JS" view of the header menu. As there are very few users using IE9 or below and it's very unlikely that any of them will be on a screen small enough to require the mobile menu, and they can still use the navigation, this is an acceptable change.
owenatgov
force-pushed
the
hidden-attribute-on-header-menu-nav
branch
from
af64c4b
to
c59f0d2
Compare
36degrees
approved these changes
Aug 4, 2022
Merged
peteryates
added a commit
to x-govuk/govuk-components
that referenced
this pull request
Aug 11, 2022
This follows on from the corresponding upstream change[0][1], released in 4.3.0 Co-authored-by: Frankie Roberto <frankie@frankieroberto.com> [0] alphagov/govuk-frontend#2727 [1] https://github.com/alphagov/govuk-frontend/pull/2727/files#diff-dcc9d461905ec3f2d5c9a73c4c7bc09499b0c8265fe7e32c097b0e6649e1106fL64
peteryates
added a commit
to x-govuk/govuk-components
that referenced
this pull request
Aug 11, 2022
This follows on from the corresponding upstream change[0][1], released in 4.3.0 [0] alphagov/govuk-frontend#2727 [1] https://github.com/alphagov/govuk-frontend/pull/2727/files#diff-dcc9d461905ec3f2d5c9a73c4c7bc09499b0c8265fe7e32c097b0e6649e1106fL64 Co-authored-by: Frankie Roberto <frankie@frankieroberto.com>
peteryates
added a commit
to x-govuk/govuk-components
that referenced
this pull request
Aug 21, 2022
This follows on from the corresponding upstream change[0][1], released in 4.3.0 [0] alphagov/govuk-frontend#2727 [1] https://github.com/alphagov/govuk-frontend/pull/2727/files#diff-dcc9d461905ec3f2d5c9a73c4c7bc09499b0c8265fe7e32c097b0e6649e1106fL64 Co-authored-by: Frankie Roberto <frankie@frankieroberto.com>
peteryates
added a commit
to x-govuk/govuk-components
that referenced
this pull request
Aug 22, 2022
This follows on from the corresponding upstream change[0][1], released in 4.3.0 [0] alphagov/govuk-frontend#2727 [1] https://github.com/alphagov/govuk-frontend/pull/2727/files#diff-dcc9d461905ec3f2d5c9a73c4c7bc09499b0c8265fe7e32c097b0e6649e1106fL64 Co-authored-by: Frankie Roberto <frankie@frankieroberto.com>
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.
Fixes #775
What
Replaces the header menu's default CSS based show/hide functionality with a reliance on the
hiddenattribute. Lifted from a similar change to the design system website navigation.Additionally does not load the mobile menu UI if
matchMediais not present and instead presents the "no JS" view to those browsers (IE9 and below).Why
To stop an unusable menu button appearing if CSS fails to load.
The choice to make
matchMediaa required function comes from us needing a way to movehiddenattributes around between screen sizes without having to rely on CSS overrides, which kicks the problem down the road for users without CSS. As our IE9 and below users are low, it's unlikely that they'll be on screens that would require the mobile menu and they can still use the menu regardless, this is a low risk change.Upgrade notes
This change introduces a
hiddenattribute to the menu button on the header markup, meaning that teams that use the header but don't use our macros will need to update their markup. However the component still operates without the hidden attribute thanks to fallbacks in the CSS, this just means that teams won't get the benefit ofhiddenon no CSS and no JS views. In this respect we aren't introducing a regression so I recommend this go into the next release non-breaking release.