Skip to content

Commit

Permalink
Rename classes and variables
Browse files Browse the repository at this point in the history 
Tabs are now tabLinks, and listItems are now tabs.
  • Loading branch information
@36degrees
36degrees committed Jul 16, 2019
1 parent e875e4b commit c49ae8b
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 27 deletions.
12 changes: 6 additions & 6 deletions src/govuk/components/tabs/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
@include govuk-responsive-margin(6, "bottom");
}

.govuk-tabs__list-item {
.govuk-tabs__tab {
margin-left: govuk-spacing(5);

&::before {
Expand All @@ -31,7 +31,7 @@
}
}

.govuk-tabs__tab {
.govuk-tabs__tab-link {
@include govuk-link-style-default;
@include govuk-font($size: 19);

Expand Down Expand Up @@ -64,7 +64,7 @@
display: none;
}

.govuk-tabs__list-item {
.govuk-tabs__tab {
position: relative;

margin-right: govuk-spacing(1);
Expand All @@ -82,7 +82,7 @@
}
}

.govuk-tabs__list-item--selected {
.govuk-tabs__tab--selected {
$border-width: 1px;

position: relative;
Expand All @@ -101,12 +101,12 @@

background-color: $govuk-body-background-colour;

.govuk-tabs__tab {
.govuk-tabs__tab-link {
text-decoration: none;
}
}

.govuk-tabs__tab {
.govuk-tabs__tab-link {
@include govuk-link-style-text;

margin-bottom: 0;
Expand Down
51 changes: 32 additions & 19 deletions src/govuk/components/tabs/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,20 @@ import { nodeListForEach } from '../../common'

function Tabs ($module) {
this.$module = $module
this.$tabs = $module.querySelectorAll('.govuk-tabs__tab')

// Because of the way we do the focus state, there is a slight disconnect
// between the way the styling and the semantics are applied within this
// component.
//
// In terms of styling, the tab presentation is applied to the parent list
// item (`.govuk-tabs__tab`) and the link (`.govuk-tabs__tab-link`) just
// looks like a link.
//
// Semantically though, it's the <a> elements (`.govuk-tabs__tab-link`) that
// have the tab role, and it's this that any aria attributes are applied to.
// The parent list items (`.govuk-tabs__tab`) are inert and have a
// presentation role.
this.$tabLinks = $module.querySelectorAll('.govuk-tabs__tab-link')

this.keys = { left: 37, right: 39, up: 38, down: 40 }
this.jsHiddenClass = 'govuk-tabs__panel--hidden'
Expand Down Expand Up @@ -37,21 +50,21 @@ Tabs.prototype.checkMode = function () {

Tabs.prototype.setup = function () {
var $module = this.$module
var $tabs = this.$tabs
var $tabLinks = this.$tabLinks
var $tabList = $module.querySelector('.govuk-tabs__list')
var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item')
var $tabs = $module.querySelectorAll('.govuk-tabs__tab')

if (!$tabs || !$tabList || !$tabListItems) {
if (!$tabLinks || !$tabList || !$tabs) {
return
}

$tabList.setAttribute('role', 'tablist')

nodeListForEach($tabListItems, function ($item) {
nodeListForEach($tabs, function ($item) {
$item.setAttribute('role', 'presentation')
})

nodeListForEach($tabs, function ($tab) {
nodeListForEach($tabLinks, function ($tab) {
// Set HTML attributes
this.setAttributes($tab)

Expand All @@ -68,7 +81,7 @@ Tabs.prototype.setup = function () {
}.bind(this))

// Show either the active tab according to the URL's hash or the first tab
var $activeTab = this.getTab(window.location.hash) || this.$tabs[0]
var $activeTab = this.getTab(window.location.hash) || this.$tabLinks[0]
this.showTab($activeTab)

// Handle hashchange events
Expand All @@ -78,21 +91,21 @@ Tabs.prototype.setup = function () {

Tabs.prototype.teardown = function () {
var $module = this.$module
var $tabs = this.$tabs
var $tabLinks = this.$tabLinks
var $tabList = $module.querySelector('.govuk-tabs__list')
var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item')
var $tabs = $module.querySelectorAll('.govuk-tabs__tab')

if (!$tabs || !$tabList || !$tabListItems) {
if (!$tabLinks || !$tabList || !$tabs) {
return
}

$tabList.removeAttribute('role')

nodeListForEach($tabListItems, function ($item) {
nodeListForEach($tabs, function ($item) {
$item.removeAttribute('role', 'presentation')
})

nodeListForEach($tabs, function ($tab) {
nodeListForEach($tabLinks, function ($tab) {
// Remove events
$tab.removeEventListener('click', $tab.boundTabClick, true)
$tab.removeEventListener('keydown', $tab.boundTabKeydown, true)
Expand Down Expand Up @@ -137,7 +150,7 @@ Tabs.prototype.showTab = function ($tab) {
}

Tabs.prototype.getTab = function (hash) {
return this.$module.querySelector('.govuk-tabs__tab[href="' + hash + '"]')
return this.$module.querySelector('.govuk-tabs__tab-link[href="' + hash + '"]')
}

Tabs.prototype.setAttributes = function ($tab) {
Expand Down Expand Up @@ -172,7 +185,7 @@ Tabs.prototype.unsetAttributes = function ($tab) {
}

Tabs.prototype.onTabClick = function (e) {
if (!e.target.classList.contains('govuk-tabs__tab')) {
if (!e.target.classList.contains('govuk-tabs__tab-link')) {
// Allow events on child DOM elements to bubble up to tab parent
return false
}
Expand Down Expand Up @@ -215,7 +228,7 @@ Tabs.prototype.activateNextTab = function () {
var currentTab = this.getCurrentTab()
var nextTabListItem = currentTab.parentNode.nextElementSibling
if (nextTabListItem) {
var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab')
var nextTab = nextTabListItem.querySelector('.govuk-tabs__tab-link')
}
if (nextTab) {
this.hideTab(currentTab)
Expand All @@ -229,7 +242,7 @@ Tabs.prototype.activatePreviousTab = function () {
var currentTab = this.getCurrentTab()
var previousTabListItem = currentTab.parentNode.previousElementSibling
if (previousTabListItem) {
var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab')
var previousTab = previousTabListItem.querySelector('.govuk-tabs__tab-link')
}
if (previousTab) {
this.hideTab(currentTab)
Expand All @@ -256,18 +269,18 @@ Tabs.prototype.hidePanel = function (tab) {

Tabs.prototype.unhighlightTab = function ($tab) {
$tab.setAttribute('aria-selected', 'false')
$tab.parentNode.classList.remove('govuk-tabs__list-item--selected')
$tab.parentNode.classList.remove('govuk-tabs__tab--selected')
$tab.setAttribute('tabindex', '-1')
}

Tabs.prototype.highlightTab = function ($tab) {
$tab.setAttribute('aria-selected', 'true')
$tab.parentNode.classList.add('govuk-tabs__list-item--selected')
$tab.parentNode.classList.add('govuk-tabs__tab--selected')
$tab.setAttribute('tabindex', '0')
}

Tabs.prototype.getCurrentTab = function () {
return this.$module.querySelector('.govuk-tabs__list-item--selected .govuk-tabs__tab')
return this.$module.querySelector('.govuk-tabs__tab--selected .govuk-tabs__tab-link')
}

// this is because IE doesn't always return the actual value but a relative full path
Expand Down
4 changes: 2 additions & 2 deletions src/govuk/components/tabs/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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{% if loop.index == 1 %} govuk-tabs__list-item--selected{% endif %}">
<a class="govuk-tabs__tab" href="#{{ id }}"
<li class="govuk-tabs__tab{% if loop.index == 1 %} govuk-tabs__tab--selected{% endif %}">
<a class="govuk-tabs__tab-link" href="#{{ id }}"
{%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
{{ item.label }}
</a>
Expand Down

0 comments on commit c49ae8b

Please sign in to comment.