fixes tabs keyboard navigation bug in IE8

CHANGELOG.md

@@ -194,6 +194,13 @@
 
 🔧 Fixes:
 
+- fixes tabs keyboard navigation bug in IE8
+
+  Users were unable to tab between tab panels using the keyboard and had to
+  use their mouse to toggle between panels.
+
+  ([PR #1359](https://github.com/alphagov/govuk-frontend/pull/1359))
+
 - Update accordion focus styles to remove firefox outlines
 
   ([PR #1324](https://github.com/alphagov/govuk-frontend/pull/1324))

src/components/tabs/tabs.js

@@ -1,5 +1,7 @@
 import '../../vendor/polyfills/Function/prototype/bind'
 import '../../vendor/polyfills/Element/prototype/classList'
+import '../../vendor/polyfills/Element/prototype/nextElementSibling'
+import '../../vendor/polyfills/Element/prototype/previousElementSibling'
 import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
 import { nodeListForEach } from '../../common'
 
@@ -207,7 +209,7 @@ Tabs.prototype.activateNextTab = function () {
   var currentTab = this.getCurrentTab()
   var nextTabListItem = currentTab.parentNode.nextElementSibling
   if (nextTabListItem) {
-    var nextTab = nextTabListItem.firstElementChild
+    var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab')
   }
   if (nextTab) {
     this.hideTab(currentTab)
@@ -221,7 +223,7 @@ Tabs.prototype.activatePreviousTab = function () {
   var currentTab = this.getCurrentTab()
   var previousTabListItem = currentTab.parentNode.previousElementSibling
   if (previousTabListItem) {
-    var previousTab = previousTabListItem.firstElementChild
+    var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab')
   }
   if (previousTab) {
     this.hideTab(currentTab)

src/vendor/polyfills/Element/prototype/nextElementSibling.js

@@ -0,0 +1,27 @@
+import '../../Object/defineProperty'
+import '../../Element'
+
+(function(undefined) {
+
+    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    var detect = (
+      'Element' in this && "nextElementSibling" in document.documentElement
+    )
+
+    if (detect) return
+
+
+    (function (global) {
+
+      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-404b69b4750d18dea4174930a49170fd
+      Object.defineProperty(Element.prototype, "nextElementSibling", {
+        get: function(){
+          var el = this.nextSibling;
+          while (el && el.nodeType !== 1) { el = el.nextSibling; }
+          return (el.nodeType === 1) ? el : null;
+        }
+      });
+
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

src/vendor/polyfills/Element/prototype/previousElementSibling.js

@@ -0,0 +1,25 @@
+import '../../Object/defineProperty'
+import '../../Element'
+
+(function(undefined) {
+
+    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    var detect = (
+      'Element' in this && 'previousElementSibling' in document.documentElement
+    )
+
+    if (detect) return
+
+    (function (global) {
+      // Polyfill from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b45a1197b842728cb76b624b6ba7d739
+      Object.defineProperty(Element.prototype, 'previousElementSibling', {
+        get: function(){
+          var el = this.previousSibling;
+          while (el && el.nodeType !== 1) { el = el.previousSibling; }
+          return (el.nodeType === 1) ? el : null;
+        }
+      });
+
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});