Header focus style

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
 

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'
+        }
+      ]
     })
   }}
 

app/pages/examples.njk

@@ -62,6 +62,7 @@
     <li><a href="../components/header/header-navigation.html">Header with navigation</a></li>
     <li><a href="../components/header/header-search.html">Header with search</a></li>
     <li><a href="../components/header/header-logo.html">Header with logo only</a></li>
+    <li><a href="../components/header/header-service-name.html">Header with a service name, search and navigation</a></li>
     <li><a href="../components/header/header-transactional.html">Header transactional</a></li>
     <li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
     <li><a href="../components/header/header-transactional-long-service-name.html">Header transactional with a long service name</a></li>

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 {