Update inactive tab colours to be white

CHANGELOG.md

@@ -4,6 +4,12 @@
 
 ### :new: **New features**
 
+#### Inactive tabs use a white background instead of grey
+
+This is to improve contrast and visibility, and to avoid the inactive tabes being perceived as disabled.
+
+This was added in https://github.com/nhsuk/nhsuk-frontend/pull/1824
+
 #### Links are easier to read and have a clearer hover state
 
 Links now have underlines that are consistently thinner and a bit further away from the link text.

packages/nhsuk-frontend/src/nhsuk/components/tabs/_index.scss

@@ -10,6 +10,8 @@
 ////
 
 @include nhsuk-exports("nhsuk/components/tabs") {
+  $border-width: 1px;
+
   .nhsuk-tabs {
     @include nhsuk-responsive-margin(1, "top");
     @include nhsuk-responsive-margin(6, "bottom");
@@ -63,11 +65,18 @@
         margin-right: nhsuk-spacing(1);
         margin-bottom: 0;
         margin-left: 0;
-        padding: nhsuk-spacing(2) nhsuk-spacing(4);
+        padding-top: nhsuk-spacing(2);
+        padding-right: nhsuk-spacing(4) - $border-width;
+        padding-bottom: nhsuk-spacing(2);
+
+        // Compensation for border (otherwise we get a shift)
+        padding-left: nhsuk-spacing(4) - $border-width;
 
         float: left;
 
-        background-color: nhsuk-colour("grey-4");
+        border: $border-width solid $nhsuk-border-colour;
+
+        background-color: nhsuk-colour("white");
 
         text-align: center;
 
@@ -76,30 +85,31 @@
         }
       }
 
+      // The selected tab has no border on the bottom, and moves
+      // down to close the gap, so that it appears visually joined
+      // to the main content.
       .nhsuk-tabs__list-item--selected {
-        $border-width: 1px;
-
-        position: relative;
-
         margin-top: nhsuk-spacing(-1);
 
-        // Compensation for border (otherwise we get a shift)
         margin-bottom: -$border-width;
-        padding-top: (nhsuk-spacing(2) * 1.5) - $border-width;
-        padding-right: nhsuk-spacing(4) - $border-width;
+        padding-top: (nhsuk-spacing(2) * 1.5);
         padding-bottom: (nhsuk-spacing(2) * 1.5) + $border-width;
-        padding-left: nhsuk-spacing(4) - $border-width;
-
-        border: $border-width solid $nhsuk-border-colour;
         border-bottom: 0;
 
-        background-color: $nhsuk-card-background-colour;
+        // The link on the selected tab uses text colour (black)
+        // and no underline to make it clear that the tab is active,
+        // and because clicking it won’t change the content.
+        .nhsuk-tabs__tab {
+          @include nhsuk-link-style-no-underline;
+          @include nhsuk-link-style-text;
+        }
       }
 
       .nhsuk-tabs__tab {
         margin-bottom: 0;
 
-        @include nhsuk-link-style-text;
+        @include nhsuk-link-style;
+        @include nhsuk-link-style-no-visited-state;
 
         &::after {
           content: "";