subnav markup and contrast fix. Amended unit tests to reflect

DEFRA · Aug 2, 2023 · f823ae0 · f823ae0
1 parent 6dff845
commit f823ae0
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 160 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/server/src/js/components/map/live.js b/server/src/js/components/map/live.js
@@ -697,7 +697,7 @@ maps.createLiveMap = (mapId, options = {}) => {
     button.setAttribute('data-module', 'govuk-button')
   }
   button.id = mapId + '-btn'
-  button.innerHTML = `<svg width="15" height="20" viewBox="0 0 15 20" focusable="false"><path d="M15,7.5c0.009,3.778 -4.229,9.665 -7.5,12.5c-3.271,-2.835 -7.509,-8.722 -7.5,-12.5c0,-4.142 3.358,-7.5 7.5,-7.5c4.142,0 7.5,3.358 7.5,7.5Zm-7.5,5.461c3.016,0 5.461,-2.445 5.461,-5.461c0,-3.016 -2.445,-5.461 -5.461,-5.461c-3.016,0 -5.461,2.445 -5.461,5.461c0,3.016 2.445,5.461 5.461,5.461Z" fill="currentColor"/></svg><span>${options.btnText || 'View map'}</span><span class="govuk-visually-hidden">(Visual only)</span>`
+  button.innerHTML = `<span class="defra-button-secondary__icon"><svg focusable="false" width="15" height="20" viewBox="0 0 15 20"><path d="M15,7.5c0.009,3.778 -4.229,9.665 -7.5,12.5c-3.271,-2.835 -7.509,-8.722 -7.5,-12.5c0,-4.142 3.358,-7.5 7.5,-7.5c4.142,0 7.5,3.358 7.5,7.5Zm-7.5,5.461c3.016,0 5.461,-2.445 5.461,-5.461c0,-3.016 -2.445,-5.461 -5.461,-5.461c-3.016,0 -5.461,2.445 -5.461,5.461c0,3.016 2.445,5.461 5.461,5.461Z" fill="currentColor"/></svg></span><span class="defra-button-secondary__text">${options.btnText || 'View map'}</span><span class="govuk-visually-hidden">(Visual only)</span>`
   button.className = options.btnClasses || (options.btnType === 'link' ? 'defra-link-icon-s' : 'defra-button-secondary defra-button-secondary--icon')
   if (options.data && options.data.button) {
     button.setAttribute('data-journey-click', options.data.button)

diff --git a/server/src/sass/components/_navbar.scss b/server/src/sass/components/_navbar.scss
@@ -10,6 +10,7 @@
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
+  overflow-y: hidden;
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
@@ -28,17 +29,13 @@
   &__inner {
     flex: 0 0 auto;
     padding: 3px 15px 4px 15px;
-    // @include mq ($from: tablet) {
-    //   padding-left: 0px;
-    //   padding-right: 0px;
-    // }
   }
   &__group {
     float: left;
   }
   &__list {
     list-style: none;
-    margin: 0px 0px -1px;
+    margin: 0px;
     padding: 0px;
   }
   &__list:after {
@@ -70,6 +67,12 @@
     border: 0px;
     box-shadow: 0 4px 0 govuk-colour('black');
     outline: 3px solid transparent;
+    outline-offset: 0px;
+  }
+  a:not([keyboard-focus]):focus {
+    background-color: white;
+    box-shadow: none;
+    text-decoration: underline;
   }
   // Overides
   .defra-link-icon-s {
@@ -81,21 +84,13 @@
     margin-right: 10px;
     &:not([keyboard-focus]):focus {
       background-color: white;
-      // border-color: govuk-colour('mid-grey');
       border: 0px;
       color: govuk-colour('black');
       box-shadow: none;
       text-decoration: underline;
     }
     &:hover {
       color: govuk-colour('black');
-      background-color: transparent;
-      svg {
-        color: currentColor;
-      }
-    }
-    &:active {
-      color: govuk-colour('black');
     }
   }
   // Modifiers
@@ -139,9 +134,9 @@
       float: left;
       border: 0px;
       color: $govuk-link-colour;
-      margin: 0px 7.5px 4px 0px;
-      padding-top: 7.5px;
-      padding-bottom: 7.5px;
+      margin: 0px 7px 3px 0px;
+      padding-top: 7px;
+      padding-bottom: 7px;
       text-decoration: none;
       &:visited {
         color: $govuk-link-colour;
@@ -159,26 +154,31 @@
         color: $govuk-link-colour;
         box-shadow: none;
         border: 0px;
+        text-decoration: none;
       }
       &:after {
         content: 'Map';
       }
       svg {
         position: relative;
         display: inline-block;
+        color: currentColor;
         vertical-align: top;
         left: 0px;
         margin: 0px 7px -3px 1px;
         top: -1px;
       }
-      span {
+      .defra-button-secondary__icon {
+        color: govuk-colour('black');
+      }
+      .defra-button-secondary__text {
         @include defra-visually-hidden();
       }
     }
     .defra-navbar__item a {
       color: $govuk-link-colour;
       text-decoration: none;
-      padding: 7.5px;
+      padding: 7px 6px;
     }
     .defra-navbar__item a:visited {
       color: $govuk-link-colour;
@@ -187,21 +187,35 @@
       color: $govuk-link-hover-colour;
       svg {
         color: $govuk-link-hover-colour;
-        @include high-contrast-mode-only {
-          color: currentColor;
-        }
+      }
+    }
+    .defra-navbar__item--selected a{
+      background-color: transparent;
+      color: $govuk-link-colour;
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -4px;
+        left: 0px;
+        right: 0px;
+        border-bottom: 4px solid currentColor;
       }
     }
     .defra-navbar__item a:focus {
       color: govuk-colour('black');
+      background-color: $govuk-focus-colour;
+      text-decoration: none;
+      box-shadow: 0 4px 0 govuk-colour('black');
+      outline: 3px solid transparent;
+      outline-offset: 0px;
       svg {
-        color: currentColor;
+        color: govuk-colour('black');
       }
     }
-    .defra-navbar__item--selected a:not(:focus) {
-      background-color: transparent;
-      border-bottom: 4px solid currentColor;
+    .defra-navbar__item a:not([keyboard-focus]):focus {
+      background-color: white;
       color: $govuk-link-colour;
-    }  
+      box-shadow: none;
+    }
   }
 }
diff --git a/server/views/rainfall-station.html b/server/views/rainfall-station.html
@@ -49,14 +49,22 @@ <h2 class="defra-service-error__title" id="error-summary-title">This measuring s
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-full">
-    <nav aria-label="Related levels" class="govuk-!-margin-top-0">
-      <span id="map"></span>
-        <a data-journey-click="Rainfall:Station navigation:Rainfall - Nearby levels" href="/river-and-sea-levels/rainfall/{{model.stationId }}" class="defra-flood-nav__link">Nearby levels</a>
-      </a>
+    <nav class="defra-navbar defra-navbar--secondary" aria-label="Related levels" >
+      <div class="defra-navbar__inner">
+        <span id="map"></span>
+          <div class="defra-navbar__group">
+            <ul class="defra-navbar__list">
+              <li class="defra-navbar__item">
+                <a data-journey-click="Rainfall:Station navigation:Rainfall - Nearby levels" href="/river-and-sea-levels/rainfall/{{model.stationId }}">Nearby levels</a>
+              </li>
+            </ul>
+          </div>
+      </div>
     </nav>
   </div>
 </div>
 
+
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-full">
     <div class="defra-flood-statistics defra-flood-statistics--border">