Promote visual styling of tab to list item

The ‘tab styling’ is currently applied to the link, with the list item doing very little in terms of presentation. This is problematic when it comes to presenting the focus state, which we want to be tight around the tab text, and thus visually smaller than the tab. By moving the tab styling to the list item, we can then make the link element smaller, and use an `::after` pseudo element to make the target area for the link fill the entire tab. The class names do not make sense any more, but we’ll update them in a future commit to make this change easier to parse.
alphagov · Jul 16, 2019 · a7aa551 · a7aa551
1 parent 64fd9bd
commit a7aa551
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 38 deletions.
diff --git a/src/govuk/components/tabs/_tabs.scss b/src/govuk/components/tabs/_tabs.scss
@@ -60,54 +60,29 @@
         border-bottom: 1px solid $govuk-border-colour;
       }
 
-      .govuk-tabs__list-item {
-        margin-left: 0;
-
-        &::before {
-          content: none;
-        }
-      }
-
       .govuk-tabs__title {
         display: none;
       }
 
-      .govuk-tabs__tab {
-        @include govuk-link-style-text;
+      .govuk-tabs__list-item {
+        position: relative;
+
         margin-right: govuk-spacing(1);
         margin-bottom: 0;
+        margin-left: 0;
         padding: govuk-spacing(2) govuk-spacing(4);
 
         float: left;
         background-color: govuk-colour("light-grey", $legacy: "grey-4");
         text-align: center;
         text-decoration: underline;
 
-        &:focus {
-
-          // IE8 doesn't support `box-shadow` so add an outline to indicate focus instead
-          @include govuk-if-ie8 {
-            outline: $govuk-focus-width solid $govuk-focus-colour;
-          }
-
-          // Move the focus style from the entire tab to the link
-          @include govuk-not-ie8 {
-            box-shadow: none;
-          }
-
-          &:after {
-            // Add "highlight" on focused link
-            $highlight-space: 13px;
-            content: "";
-            display: block;
-            margin-right: $highlight-space;
-            margin-left: $highlight-space;
-            box-shadow: 0 (-$highlight-space) 0 $highlight-space $govuk-focus-colour, 0 -9px 0 $highlight-space govuk-colour("black");
-          }
+        &::before {
+          content: none;
         }
       }
 
-      .govuk-tabs__tab--selected {
+      .govuk-tabs__list-item--selected {
         $border-width: 1px;
 
         position: relative;
@@ -125,7 +100,25 @@
         border-bottom: 0;
 
         background-color: $govuk-body-background-colour;
-        text-decoration: none;
+
+        .govuk-tabs__tab {
+          text-decoration: none;
+        }
+      }
+
+      .govuk-tabs__tab {
+        @include govuk-link-style-text;
+
+        margin-bottom: 0;
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
       }
 
       .govuk-tabs__panel {

diff --git a/src/govuk/components/tabs/tabs.js b/src/govuk/components/tabs/tabs.js
@@ -254,18 +254,18 @@ Tabs.prototype.hidePanel = function (tab) {
 
 Tabs.prototype.unhighlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'false')
-  $tab.classList.remove('govuk-tabs__tab--selected')
+  $tab.parentNode.classList.remove('govuk-tabs__list-item--selected')
   $tab.setAttribute('tabindex', '-1')
 }
 
 Tabs.prototype.highlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'true')
-  $tab.classList.add('govuk-tabs__tab--selected')
+  $tab.parentNode.classList.add('govuk-tabs__list-item--selected')
   $tab.setAttribute('tabindex', '0')
 }
 
 Tabs.prototype.getCurrentTab = function () {
-  return this.$module.querySelector('.govuk-tabs__tab--selected')
+  return this.$module.querySelector('.govuk-tabs__list-item--selected .govuk-tabs__tab')
 }
 
 // this is because IE doesn't always return the actual value but a relative full path

diff --git a/src/govuk/components/tabs/template.njk b/src/govuk/components/tabs/template.njk
@@ -10,8 +10,8 @@
   <ul class="govuk-tabs__list">
     {% for item in params.items %}
     {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-      <li class="govuk-tabs__list-item">
-        <a class="govuk-tabs__tab{% if loop.index == 1 %} govuk-tabs__tab--selected{% endif %}" href="#{{ id }}"
+      <li class="govuk-tabs__list-item{% if loop.index == 1 %} govuk-tabs__list-item--selected{% endif %}">
+        <a class="govuk-tabs__tab" href="#{{ id }}"
            {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {{ item.label }}
         </a>