Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Header focus style #684

Merged
merged 9 commits into from Jan 19, 2021
Merged

Header focus style #684

merged 9 commits into from Jan 19, 2021

Conversation

davidhunter08
Copy link
Contributor

@davidhunter08 davidhunter08 commented Jan 18, 2021 •
edited

Description

Header focus style update

Update the header focus styles to fix accessibility issue (#679).

The yellow focus is now outside the search box with an additional black border. A black border now also appears on the logo and buttons.

Desktop header:

header-focus-desktop

Mobile header:

header-focus-mobile

Service and transactional name size

Update the size of the service name header on mobile to match the transactional header.

See nhsuk/nhsuk-service-manual-community-backlog#16 (comment)

Service header (current):

Screenshot 2021-01-19 at 10 40 27

Service header (updated):

Screenshot 2021-01-19 at 10 40 20

Transactional header:

Screenshot 2021-01-19 at 10 40 45

Other changes

  • Removed blue hover state on main nav to keep it consistent with the white nav
  • Added 'Header with a service name, search and navigation' to the component examples page
  • Right aligned the close button icon
  • Updated main nav border colours for consistency

Related issues

Checklist

@davidhunter08 davidhunter08 added accessibility Accessibility related header labels Jan 19, 2021
@davidhunter08 davidhunter08 self-assigned this Jan 19, 2021
@davidhunter08 davidhunter08 added this to the 4.1.0 milestone Jan 19, 2021
@davidhunter08 davidhunter08 mentioned this pull request Jan 19, 2021
Closed
@davidhunter08 davidhunter08 linked an issue Jan 19, 2021 that may be closed by this pull request
Search input: focus state style (mobile) #675
Closed
@davidhunter08 davidhunter08 marked this pull request as ready for review January 19, 2021 11:08
@davidhunter08 davidhunter08 linked an issue Jan 19, 2021 that may be closed by this pull request
Search input: focus state style (Desktop) #679
Closed
mcheung-nhs
mcheung-nhs approved these changes Jan 19, 2021
View reviewed changes
Copy link
Collaborator

@mcheung-nhs mcheung-nhs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done some browser testing on Firefox, Chrome, Safari on Windows/MacOS/iOS/Android and all seem fine!

@mcheung-nhs mcheung-nhs merged commit 3b37a5e into master Jan 19, 2021
@mcheung-nhs mcheung-nhs deleted the header-focus-style branch January 19, 2021 13:30
@davidhunter08 davidhunter08 moved this from Needs review to Ready to release in Service Manual Sprint Board Jan 19, 2021
@davidhunter08 davidhunter08 moved this from Ready to release to Sprint 7 - Done in Service Manual Sprint Board Jan 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mcheung-nhs mcheung-nhs mcheung-nhs approved these changes

@chrimesdev chrimesdev Awaiting requested review from chrimesdev

Assignees

@davidhunter08 davidhunter08

Labels
accessibility Accessibility related header
Projects
None yet
Milestone
4.1.0
Development

Successfully merging this pull request may close these issues.

Search input: focus state style (Desktop) Search input: focus state style (mobile)
2 participants
@davidhunter08 @mcheung-nhs