[WIP] Service Header component #4950
Draft
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
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.
10 tasks
|
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
domoscargin
force-pushed
the
service-header-component
branch
from
70f4aa6
to
8e67b18
Compare
Partially reverts the changes from 2c67ecc These changes unfortunately broke some other use cases for the Service Header. After some discussion, we’ve decided that the phase banner will remain in its existing position, rather than trying to include it within the new section, to avoid the complications it introduces. The separation of the width container and service header container has been retained along with the moved start and end slots.
This reverts commit 8e67b18.
This fixes a few issues identified during testing, all caused by the `inline-block` approach to inlining these items. - Removes the extra whitespace from between each list item that screwed with the spacing between links and screen readers would pointlessly announce. - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read all of the links as a run-on sentence.
Adds some margin-right to the service name on tablet breakpoint so that the service name and navigation links no longer touch in certain circumstances. This could happen if the navigation and service name were collectively wide enough to fill the entire horizontal space at the present viewport size.
IE11 is tripping over the use of flex-wrap and is instead presenting all links as a single, horizontally scrolling row. This commit reverts the use of flexbox on IE11 (and IE10) specifically, falling back to the previous inline-block behaviour. This means that the previous accessibility issues are now present in IE11 again, but having the navigation wrap seems like a higher priority usability issue to address.
querkmachine
force-pushed
the
service-header-component
branch
from
65a41cf
to
23bd8d9
Compare
This comment was marked as outdated.
This comment was marked as outdated.
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.
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
Move theChange no longer being pursued.<header>tag out of the Header component and into the template.Adapt the Phase banner to be usable between the Header and Service Header components.Change no longer being pursued.