[WIP] Service Header component #4950
Conversation
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
|
Overall I'm not seeing any glaring issues that concern me. I do wonder if the blue text is something to change based on the working group feedback. Additionally, personally I don't like the layout of the service header with large navigation, it feels too unorganised and I would struggle to find what I'm looking for. I am aware that this may be a complete personal thing, so please don't get caught up on it |
That's entirely fair. This is one of those review app examples which is intended to test the extremes of the component. No one should actually be using that many navigation items in practice, I hope! 🤞 |
querkmachine
force-pushed
the
service-header-component
branch
from
7f2352d
to
5e17d9c
Compare
querkmachine
force-pushed
the
service-header-component
branch
from
5e17d9c
to
996e8d0
Compare
querkmachine
force-pushed
the
service-header-component
branch
from
996e8d0
to
3089be8
Compare
querkmachine
force-pushed
the
service-header-component
branch
from
c2bbbce
to
d749c56
Compare
querkmachine
force-pushed
the
service-header-component
branch
from
d749c56
to
a27aa51
Compare
querkmachine
force-pushed
the
service-header-component
branch
from
a27aa51
to
c124457
Compare
|
I've pushed up a fix for all of the links appearing selected in High Contrast Mode. The other things I haven't actioned yet could affect the overall design of the component and probably needs to do the rounds within the squad first |
Update existing full-page examples that have a service name or navigation to use the Service Header component instead. Also update header and phase banner styles to work with service header: - Makes header border full-width in all circumstances - Adds content width container to phase banner
- Change a Notification Banner test that created a second banner role, as this created an accessibility failure with the header always being present in the template
Remove the 'with no options set' example from being tested as part of the standard accessibility tests. This is because the accessibility test tries to initialise the component's JS, but there is no HTML being rendered to initialise it against, returning an ElementError that Jest considers to be a test failure.
@selfthinker noted that having the entire `<nav>` element toggled means that the navigation landmark is inaccessible when the menu is closed. Not having the toggle within the landmark also means that assistive technology users wouldn't be able to jump to it easily. This commit moves the toggle button to within the `<nav>` element and tweaks the JS so that the `<ul>` has its visibility toggled instead.
The method by which component JS is loaded and initialised changed in Frontend 5.4.0. This commit updates some of the references that didn't get caught while rebasing.
querkmachine
force-pushed
the
service-header-component
branch
from
f19cba1
to
209dfa2
Compare
querkmachine
force-pushed
the
service-header-component
branch
from
5175c59
to
0ce9849
Compare
querkmachine
force-pushed
the
service-header-component
branch
from
0ce9849
to
ab91d61
Compare
Takes the 'Service Header' concept from #4915 and implements it as a standalone component, with the toolbox/dropdown concept removed (at least for now).
For alphagov/govuk-design-system#3748.
Links
Todo
Creating a Service Header component
<strong>for active links is done a bit haphazardly and needs more consideration as to when it's used and how it's styled.Changes to other components
<header>tag out of the Header component and into the template.