Merge pull request #1000 from alphagov/fix-flash-of-unstyled-content-…

…tabs

Fix flash of unstyled content in tabs component

CHANGELOG.md

@@ -49,6 +49,10 @@
 
   ([PR #994](https://github.com/alphagov/govuk-frontend/pull/994))
 
+- Fix flash of unstyled content in tabs component
+
+  ([PR #1000](https://github.com/alphagov/govuk-frontend/pull/1000))
+
 - Pull Request Title goes here
 
   Description goes here (optional)

src/components/tabs/README.md

@@ -24,7 +24,7 @@ Find out when to use the tabs component in your service in the [GOV.UK Design Sy
       <ul class="govuk-tabs__list">
 
           <li class="govuk-tabs__list-item">
-            <a class="govuk-tabs__tab" href="#past-day">
+            <a class="govuk-tabs__tab govuk-tabs__tab--selected" href="#past-day">
               Past day
             </a>
           </li>
@@ -80,7 +80,7 @@ Find out when to use the tabs component in your service in the [GOV.UK Design Sy
 
       </section>
 
-      <section class="govuk-tabs__panel" id="past-week">
+      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
         <h2 class="govuk-heading-l">Past week</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -111,7 +111,7 @@ Find out when to use the tabs component in your service in the [GOV.UK Design Sy
 
       </section>
 
-      <section class="govuk-tabs__panel" id="past-month">
+      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
         <h2 class="govuk-heading-l">Past month</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -142,7 +142,7 @@ Find out when to use the tabs component in your service in the [GOV.UK Design Sy
 
       </section>
 
-      <section class="govuk-tabs__panel" id="past-year">
+      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
         <h2 class="govuk-heading-l">Past year</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">

src/components/tabs/_tabs.scss

@@ -86,7 +86,7 @@
         text-align: center;
         text-decoration: none;
 
-        &[aria-selected= "true"] {
+        &--selected {
           margin-top: - govuk-spacing(1);
           margin-bottom: -1px;
 

src/components/tabs/tabs.js

@@ -251,16 +251,18 @@ Tabs.prototype.hidePanel = function (tab) {
 
 Tabs.prototype.unhighlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'false')
+  $tab.classList.remove('govuk-tabs__tab--selected')
   $tab.setAttribute('tabindex', '-1')
 }
 
 Tabs.prototype.highlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'true')
+  $tab.classList.add('govuk-tabs__tab--selected')
   $tab.setAttribute('tabindex', '0')
 }
 
 Tabs.prototype.getCurrentTab = function () {
-  return this.$module.querySelector('[role=tab][aria-selected=true]')
+  return this.$module.querySelector('.govuk-tabs__tab--selected')
 }
 
 // this is because IE doesn't always return the actual value but a relative full path

src/components/tabs/tabs.test.js

@@ -42,6 +42,9 @@ describe('/components/tabs', () => {
 
         const firstTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:first-child .govuk-tabs__tab').getAttribute('aria-selected'))
         expect(firstTabAriaSelected).toEqual('true')
+
+        const firstTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:first-child .govuk-tabs__tab').className)
+        expect(firstTabClasses).toContain('govuk-tabs__tab--selected')
       })
 
       it('should display the first tab panel', async () => {
@@ -68,6 +71,9 @@ describe('/components/tabs', () => {
 
         const secondTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-selected'))
         expect(secondTabAriaSelected).toEqual('true')
+
+        const secondTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').className)
+        expect(secondTabClasses).toContain('govuk-tabs__tab--selected')
       })
 
       it('should display the tab panel associated with the selected tab', async () => {
@@ -94,6 +100,9 @@ describe('/components/tabs', () => {
 
         const secondTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-selected'))
         expect(secondTabAriaSelected).toEqual('true')
+
+        const secondTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').className)
+        expect(secondTabClasses).toContain('govuk-tabs__tab--selected')
       })
 
       it('should display the tab panel associated with the selected tab', async () => {
@@ -118,6 +127,9 @@ describe('/components/tabs', () => {
         const currentTabAriaSelected = await page.evaluate(() => document.body.querySelector('.govuk-tabs__tab[href="#past-week"]').getAttribute('aria-selected'))
         expect(currentTabAriaSelected).toEqual('true')
 
+        const currentTabClasses = await page.evaluate(() => document.body.querySelector('.govuk-tabs__tab[href="#past-week"]').className)
+        expect(currentTabClasses).toContain('govuk-tabs__tab--selected')
+
         const currentTabPanelIsHidden = await page.evaluate(() => document.getElementById('past-week').classList.contains('govuk-tabs__panel--hidden'))
         expect(currentTabPanelIsHidden).toBeFalsy()
       })

src/components/tabs/template.njk

@@ -12,7 +12,8 @@
     {% 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" href="#{{ id }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        <a class="govuk-tabs__tab{% if loop.index == 1 %} govuk-tabs__tab--selected{% endif %}" href="#{{ id }}"
+           {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {{ item.label }}
         </a>
       </li>
@@ -22,7 +23,7 @@
 
   {% for item in params.items %}
   {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-  <section class="govuk-tabs__panel" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <section class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     {{ item.panel.html | safe if item.panel.html else item.panel.text }}
   </section>
   {% endfor %}

src/components/tabs/template.test.js

@@ -207,5 +207,39 @@ describe('Tabs', () => {
         expect($tabPanelItems.attr('data-attribute-2')).toEqual('my-attribute-2')
       })
     })
+
+    it('renders the first tab selected', () => {
+      const $ = render('tabs', {
+        items: [
+          {
+            id: 'tab-1',
+            label: 'Tab 1',
+            panel: {
+              text: 'Panel text'
+            }
+          },
+          {
+            id: 'tab-2',
+            label: 'Tab 2',
+            panel: {
+              text: 'Panel text 2'
+            }
+          },
+          {
+            id: 'tab-3',
+            label: 'Tab 3',
+            panel: {
+              text: 'Panel text 3'
+            }
+          }
+        ]
+      })
+
+      const $tabs = $('.govuk-tabs')
+      const $selectedTabs = $tabs.find('.govuk-tabs__tab--selected')
+      const $hiddenTabPanels = $tabs.find('.govuk-tabs__panel--hidden')
+      expect($hiddenTabPanels.length).toBe(2)
+      expect($selectedTabs.length).toBe(1)
+    })
   })
 })