From ab963688420aac0545db313fd4d31adbf44e3296 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 17 Jul 2018 16:57:23 +0100 Subject: [PATCH 1/2] Replace global `js-hidden` class with tabs panel modifier `js-hidden` is a global class that is defined by GOV.UK Template (https://github.com/alphagov/govuk_template/blob/78cbc105b564d2f4a83bb257abb98322bb851a93/source/assets/stylesheets/_accessibility.scss#L17) This could mean that if users include GOV.UK Frontend into their project it could break the JavaScript fallback in their project, since the tabs' implementation of `js-hidden` does not check for the presense of the `js-enabled` class. To avoid this problem we avoid a global class name and instead create a modifier for the panel component which is being hidden. --- src/components/tabs/_tabs.scss | 8 ++++---- src/components/tabs/tabs.js | 2 +- src/components/tabs/tabs.test.js | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 9d8d9de7c1..2a269fd168 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -116,6 +116,10 @@ border: 1px solid $govuk-border-colour; border-top: 0; + &--hidden { + display: none; + } + & > :last-child { margin-bottom: 0; } @@ -123,8 +127,4 @@ } } - - .js-hidden { - display: none; - } } diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index 95d024ea97..6ca534b42a 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -8,7 +8,7 @@ function Tabs ($module) { this.$tabs = $module.querySelectorAll('.govuk-tabs__tab') this.keys = { left: 37, right: 39, up: 38, down: 40 } - this.jsHiddenClass = 'js-hidden' + this.jsHiddenClass = 'govuk-tabs__panel--hidden' } Tabs.prototype.init = function () { diff --git a/src/components/tabs/tabs.test.js b/src/components/tabs/tabs.test.js index 257d2f0d10..152e9412b7 100644 --- a/src/components/tabs/tabs.test.js +++ b/src/components/tabs/tabs.test.js @@ -47,14 +47,14 @@ describe('/components/tabs', () => { it('should display the first tab panel', async () => { await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' }) - const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel').classList.contains('js-hidden')) + const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel').classList.contains('govuk-tabs__panel--hidden')) expect(tabPanelIsHidden).toBeFalsy() }) it('should hide all the tab panels except for the first one', async () => { await page.goto(baseUrl + '/components/tabs/preview', { waitUntil: 'load' }) - const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel ~ .govuk-tabs__panel').classList.contains('js-hidden')) + const tabPanelIsHidden = await page.evaluate(() => document.body.querySelector('.govuk-tabs > .govuk-tabs__panel ~ .govuk-tabs__panel').classList.contains('govuk-tabs__panel--hidden')) expect(tabPanelIsHidden).toBeTruthy() }) }) @@ -78,7 +78,7 @@ describe('/components/tabs', () => { const secondTabPanelIsHidden = await page.evaluate(() => { const secondTabAriaControls = document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-controls') - return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('js-hidden') + return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('govuk-tabs__panel--hidden') }) expect(secondTabPanelIsHidden).toBeFalsy() }) @@ -105,7 +105,7 @@ describe('/components/tabs', () => { const secondTabPanelIsHidden = await page.evaluate(() => { const secondTabAriaControls = document.body.querySelector('.govuk-tabs__list-item:nth-child(2) .govuk-tabs__tab').getAttribute('aria-controls') - return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('js-hidden') + return document.body.querySelector(`[id="${secondTabAriaControls}"]`).classList.contains('govuk-tabs__panel--hidden') }) expect(secondTabPanelIsHidden).toBeFalsy() }) @@ -118,7 +118,7 @@ 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 currentTabPanelIsHidden = await page.evaluate(() => document.getElementById('past-week').classList.contains('js-hidden')) + const currentTabPanelIsHidden = await page.evaluate(() => document.getElementById('past-week').classList.contains('govuk-tabs__panel--hidden')) expect(currentTabPanelIsHidden).toBeFalsy() }) }) From c74b1adb00f039d960fc972497d0d0efd97b3cf9 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 17 Jul 2018 17:02:29 +0100 Subject: [PATCH 2/2] Add CHANGELOG entry for fixing tabs panel hidden class --- CHANGELOG.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f6aa7d77f..eb65c6fb1d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,11 +22,9 @@ 🔧 Fixes: -- Pull Request Title goes here - - Description goes here (optional) - - ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) +- Replace conflicting `js-hidden` class used within the tabs component with a new modifier class. + Because this class is defined and used within the JavaScript, no markup changes are required. + ([PR #916](https://github.com/alphagov/govuk-frontend/pull/916)) ## 1.1.1 (fix release)