diff --git a/CHANGELOG.md b/CHANGELOG.md index 10fa0977a..ecbdcf05d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ - Android search suggestions bug - when selecting an option from the suggestions in Chrome the form didn't populate and submit, this is now fixed. - Expander - Set width and height on expander SVG images to avoid squashed display in IE10 ([PR 668](https://github.com/nhsuk/nhsuk-frontend/pull/668)) - Vendor in Sass-MQ (PR [#601](https://github.com/nhsuk/nhsuk-frontend/pull/601)) +- Update header focus styles to fix accessibility issue (PR [#684](https://github.com/nhsuk/nhsuk-frontend/pull/684)) ## 4.0.0 - 26 October 2020 diff --git a/app/components/header/header-service-name.njk b/app/components/header/header-service-name.njk index 0fcbd6a4f..243c766ff 100644 --- a/app/components/header/header-service-name.njk +++ b/app/components/header/header-service-name.njk @@ -9,8 +9,30 @@ "service": { "name": "Digital service manual" }, - "showNav": "false", - "showSearch": "true" + "showNav": "true", + "showSearch": "true", + "primaryLinks": [ + { + "url" : "#", + "label" : "NHS service standard" + }, + { + 'url' : '#', + 'label' : 'Design system' + }, + { + 'url' : '#', + 'label' : 'Content style guide' + }, + { + 'url' : '#', + 'label' : 'Accessibility' + }, + { + 'url' : '#', + 'label' : 'Community' + } + ] }) }} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 8273705ee..caf69912b 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -62,6 +62,7 @@
  • Header with navigation
  • Header with search
  • Header with logo only
    • +
  • Header with a service name, search and navigation
  • Header transactional
  • Header transactional with service name
  • Header transactional with a long service name
    • diff --git a/packages/components/header/_autocomplete.scss b/packages/components/header/_autocomplete.scss index d9993e6cc..120356f11 100644 --- a/packages/components/header/_autocomplete.scss +++ b/packages/components/header/_autocomplete.scss @@ -11,10 +11,13 @@ * 6. Drop shadow on search suggestions dopdown box, custom spread and blur * 7. Z-index to bring the dropdown to the front * 8. No current spacing at 12px so using this value + * 9. Z-index to being search box to the front for focus state style + * 10. Custom padding to stop text jumping on focus */ .autocomplete-container { display: inline-block; + z-index: 1; /* [9] */ @include mq($until: tablet) { display: inline; @@ -44,10 +47,11 @@ width: 100%; /* [3] */ &:focus { - border: $nhsuk-focus-width solid $nhsuk-focus-color; - box-shadow: inset 0 0 0 $nhsuk-focus-width $nhsuk-focus-text-color; + border: $nhsuk-focus-width solid $nhsuk-focus-text-color; + box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; outline: $nhsuk-focus-width solid transparent; outline-offset: $nhsuk-focus-width; + padding: 0 13px; /* [10] */ } } } @@ -68,10 +72,11 @@ width: 200px; /* [3] */ &:focus { - border: 1px solid $nhsuk-focus-color; - box-shadow: inset 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; + border: 2px solid $nhsuk-focus-text-color; + box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; outline: $nhsuk-focus-width solid transparent; outline-offset: $nhsuk-focus-width; + padding: 0 11px; /* [10] */ } &::placeholder { diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index 658188eae..157d3e5af 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -38,6 +38,8 @@ * 16. Use non variable colour to follow NHS England guidelines on logo colour * 17. On print stylesheets remove the header link * 18. Remove random top margin in Safari + * 19. Align close icon with nav item arrow icons + * 20. Add nhsuk-spacing(9) to align right and left main nav with header */ @import 'autocomplete'; @@ -106,13 +108,10 @@ } &:focus { + box-shadow: none; + .nhsuk-logo { - box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; - } - &:hover { - .nhsuk-logo { - box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; - } + box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color, 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color; } } @@ -136,7 +135,7 @@ position: relative; &.js-show { - border-bottom: 4px solid $color_nhsuk-grey-5; /* [12] */ + border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5; /* [12] */ } @include mq($from: tablet) { @@ -179,7 +178,7 @@ &:focus { @include nhsuk-focused-button(); - box-shadow: none; + box-shadow: 0 0 0 2px $nhsuk-focus-color, 0 $nhsuk-focus-width 0 2px $nhsuk-focus-text-color; } } @@ -281,8 +280,7 @@ &:focus { background-color: $nhsuk-focus-color; - border-bottom: $nhsuk-focus-width solid $nhsuk-focus-text-color; - box-shadow: inset 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; + box-shadow: 0 -4px $nhsuk-focus-color, 0 $nhsuk-focus-width $nhsuk-focus-text-color; outline: $nhsuk-focus-width solid transparent; outline-offset: $nhsuk-focus-width; @@ -299,20 +297,13 @@ } } - &:active { - background-color: $nhsuk-button-active-color; - - .nhsuk-icon { - fill: $color_nhsuk-white; - } - } - } .nhsuk-search__close { @include close-button(); - margin-left: nhsuk-spacing(3); + margin-left: nhsuk-spacing(2); + margin-right: - nhsuk-spacing(2); /* [19] */ margin-top: nhsuk-spacing(2); &:focus { @@ -370,8 +361,6 @@ height: nhsuk-spacing(6); /* [2] */ line-height: inherit; outline: none; - padding-left: 9px; /* [7] */ - padding-top: 2px; /* [7] */ width: 44px; /* [2] */ .nhsuk-icon__search { @@ -385,6 +374,7 @@ &:hover { background-color: $color_shade_nhsuk-blue-35; + border: 1px solid $color_nhsuk-white; cursor: pointer; .nhsuk-icon__search { @@ -394,8 +384,7 @@ &:focus { @include nhsuk-focused-button(); - - box-shadow: none; + box-shadow: 0 -2px $nhsuk-focus-color, 0 $nhsuk-focus-width $nhsuk-focus-text-color; } &:active { @@ -471,7 +460,7 @@ &:focus { @include nhsuk-focused-button; - box-shadow: none; + box-shadow: 0 0 0 2px $nhsuk-focus-color, 0 $nhsuk-focus-width 0 2px $nhsuk-focus-text-color; } } @@ -500,8 +489,8 @@ display: block; @include mq($until: large-desktop) { - border-bottom: 4px solid $color_nhsuk-grey-5; /* [12] */ - border-top: 4px solid $color_nhsuk-grey-5; /* [12] */ + border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5; /* [12] */ + border-top: nhsuk-spacing(1) solid $color_nhsuk-grey-5; /* [12] */ .nhsuk-width-container { margin: 0 nhsuk-spacing(3); @@ -528,7 +517,7 @@ @include close-button(); overflow: hidden; position: absolute; - right: nhsuk-spacing(3); + right: nhsuk-spacing(2); top: nhsuk-spacing(2); white-space: nowrap; @@ -553,8 +542,8 @@ .nhsuk-header__navigation-link { @include nhsuk-font(16); - border-bottom: 4px solid transparent; - border-top: 4px solid transparent; + border-bottom: nhsuk-spacing(1) solid transparent; + border-top: nhsuk-spacing(1) solid transparent; color: $color_nhsuk-blue; display: block; padding: 12px nhsuk-spacing(3); @@ -568,17 +557,22 @@ } &:visited { + color: $color_nhsuk-blue; + @include mq($from: large-desktop) { color: $color_nhsuk-white; } } &:hover { - background-color: $color_shade_nhsuk-blue-35; box-shadow: none; - color: $color_nhsuk-white; + color: $color_nhsuk-blue; text-decoration: underline; + @include mq($from: large-desktop) { + color: $color_nhsuk-white; + } + .nhsuk-icon__chevron-right { fill: $color_nhsuk-blue; } @@ -598,6 +592,10 @@ &:hover { background-color: $nhsuk-focus-color; color: $nhsuk-focus-text-color; + + .nhsuk-icon__chevron-right { + fill: $nhsuk-focus-text-color; + } } &:visited { @@ -630,7 +628,7 @@ background-color: $color_nhsuk-blue; display: block; margin: 0 auto; - max-width: $nhsuk-page-width; + max-width: $nhsuk-page-width + nhsuk-spacing(9); } .nhsuk-header__navigation-list { @@ -659,18 +657,6 @@ .nhsuk-header__navigation-link { color: $color_nhsuk-white; line-height: normal; - - &:active { - background-color: $color_shade_nhsuk-blue-50; - color: $color_nhsuk-grey-5; - } - - &:hover, - &:active, - &.is-active { - background-color: $color_shade_nhsuk-blue-20; - } - } } @@ -848,13 +834,17 @@ &:focus { background: $nhsuk-focus-color; - box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; + box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color, 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color; .nhsuk-header__service-name { color: $nhsuk-focus-text-color; text-decoration: none; } + .nhsuk-logo { + box-shadow: none; + } + } } @@ -871,14 +861,6 @@ padding-left: nhsuk-spacing(3); } - @include mq($until: desktop) { - font-size: 16px; - } - - @media (max-width: 450px) { - font-size: 14px; - } - } .nhsuk-header__logo--only { @@ -891,6 +873,7 @@ align-items: center; display: flex; margin-bottom: 0; + max-width: 270px; width: auto; } @@ -912,7 +895,8 @@ width: auto; &:hover { - box-shadow: 0 1px 0 0 $color_nhsuk-white; + color: $color_nhsuk-white; + text-decoration: underline; .nhsuk-logo { box-shadow: none; @@ -921,7 +905,7 @@ &:focus { background: $nhsuk-focus-color; - box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color; + box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color, 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color; .nhsuk-organisation-name, .nhsuk-organisation-descriptor { @@ -932,6 +916,9 @@ box-shadow: none; } + &:hover { + text-decoration: none; + } } } @@ -1029,19 +1016,6 @@ .nhsuk-header--white { background-color: $color_nhsuk-white; - .nhsuk-header__link { - &:hover { - .nhsuk-logo { - box-shadow: none; - } - } - &:focus { - .nhsuk-logo { - box-shadow: $nhsuk-focus-width 0 0 0 $nhsuk-focus-color, - $nhsuk-focus-width 0 0 0 $nhsuk-focus-color, 0 - $nhsuk-focus-width 0 0 $nhsuk-focus-color, 0 0 0 $nhsuk-focus-width $nhsuk-focus-color, 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color; - } - } - } - .nhsuk-logo { .nhsuk-logo__background { fill: $color_nhsuk-blue; @@ -1052,6 +1026,19 @@ } } + .nhsuk-header__link { + + &:hover { + color: $nhsuk-text-color; + text-decoration: underline; + + .nhsuk-organisation-descriptor { + color: $nhsuk-text-color; + } + } + + } + .nhsuk-search__submit { background-color: $color_nhsuk-blue; @@ -1061,15 +1048,12 @@ &:hover { background-color: $color_shade_nhsuk-blue-20; + border-color: $color_shade_nhsuk-blue-20; } &:focus { background-color: $nhsuk-focus-color; - @include mq($from: tablet) { - border: 1px solid $nhsuk-focus-text-color; - } - .nhsuk-icon__search { fill: $nhsuk-focus-text-color; } @@ -1079,13 +1063,12 @@ .autocomplete__input, .nhsuk-search__input { border: 1px solid $color_nhsuk-grey-3; - border-right: 0; &:focus { - border: 1px solid $nhsuk-focus-text-color; + border: 2px solid $nhsuk-focus-text-color; @include mq($until: tablet) { - border: $nhsuk-focus-width solid $nhsuk-focus-color; + border: $nhsuk-focus-width solid $nhsuk-focus-text-color; } } } @@ -1101,9 +1084,7 @@ &.is-active, &:hover { - background-color: $color_nhsuk-blue; - border-color: $color_nhsuk-blue; - box-shadow: none; + border-color: $color_shade_nhsuk-blue-20; color: $color_nhsuk-white; .nhsuk-icon { @@ -1112,10 +1093,11 @@ } &:focus { - @include nhsuk-focused-button(); + color: $nhsuk-focus-text-color; - border: 1px solid $nhsuk-focus-text-color !important; // sass-lint:disable-line no-important - box-shadow: none; + .nhsuk-icon { + fill: $nhsuk-focus-text-color; + } } } @@ -1147,23 +1129,6 @@ } -.nhsuk-header--organisation.nhsuk-header--white { - .nhsuk-header__link { - - &:hover { - box-shadow: 0 1px 0 0 $color_nhsuk-blue; - } - - &:focus { - box-shadow: 0 $nhsuk-focus-width 0 0 $nhsuk-focus-text-color; - - .nhsuk-logo { - box-shadow: none; - } - } - } -} - // Navigation (white) .nhsuk-header--white-nav { @@ -1171,7 +1136,7 @@ background-color: $color_nhsuk-white; .nhsuk-header__navigation-list { - border-top: 1px solid $color_nhsuk-grey-4; + border-top: 1px solid $color_nhsuk-grey-5; } .nhsuk-header__navigation-link { @@ -1181,12 +1146,6 @@ color: $color_nhsuk-blue; } - &:hover, - &:active, - &.is-active { - background-color: transparent; - } - &:focus { color: $nhsuk-focus-text-color; diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_0_document_2_iPad.png index c2b04646c..0679e137b 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_0_document_3_Surface_iPad_Pro.png index ea9782a80..b6ce431bf 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_2_iPad.png index a3b5944ac..54ccde032 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_3_Surface_iPad_Pro.png index e7eda36ee..1d840e1a0 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png index 26abbed73..07fc58556 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png index 666ba4707..a6adf7dbd 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png index 26abbed73..07fc58556 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png index 679d918cb..23a98310c 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_0_iPhone_5_SE.png index 47154c52e..8a8d06901 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_0_iPhone_5_SE.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_1_iPhone_6-8.png index cfd59c21a..401190f71 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_1_iPhone_6-8.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_2_iPad.png index e86066dd3..0ccd1f72e 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_2_iPad.png index 7d231a352..48498bd27 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_3_Surface_iPad_Pro.png index 6cf5a7ef0..7bb1f5e9f 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_open_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_open_0_document_0_iPhone_5_SE.png index 66ce05372..d7887b605 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_open_0_document_0_iPhone_5_SE.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_open_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_open_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_open_0_document_1_iPhone_6-8.png index 99a0ba22d..6d4417914 100644 Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_open_0_document_1_iPhone_6-8.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_open_0_document_1_iPhone_6-8.png differ