Tabs

Notes for developers

By default the first section tab will be opened on page load. This can be changed if required by applying js-m-tab-open to any m-tabs__heading.

A section tab can be linked to and automatically opened by adding an ID to any .m-tabs__heading

Sub-headings

Optional sub headers can be applied to section tabs when wrapped in a span using the .m-tabs__sub-heading class.

Icon tabs

Optional icons can be applied to both primary or section tabs when wrapped in a span using the .m-tabs-icon class.

Nested tabs

Nested tabs are tabs that sit within the content of primary or section tabs. As such, nested tabs will be automatically styled as secondary tabs when the style .m-tabs is a descendant of another instance of .m-tabs. They can also be styled independently using the modifier class m-tabs--nested.

Printing

It is possible to force the printing of all tab sections through the use of the modifier class m-tabs--print. This should only ever be used to satisfy legal requirements for all information to be available when printed. The use of this feature should always be challenged, as if the content if legally important, it should probably not be hidden within tabs in the first place.

Controling tabs programatically

Section tabs can be controlled programatically to open a specified tab and optionally scroll to it.

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-tabs' ], function ( mTabsModule ) {
		var mTabsEl = document.querySelector( '#tabsId' ),
			mTabsInstance = mTabsModule.initInstance( mTabsEl );		mTabsInstance.open( '#tabHeadingId', true );
	});
});

Changing locale settings

Locale settings should be updated to include appropriate translations for the 'Previous' and 'Next' messages to accompany the carousel arrows, and also for the message on the loading indicator for the tabs with lazy-loading content.

en: {
	mTabs : {
		previousText : 'Previous',
		nextText : 'Next',
		loadingText : 'Please wait',
	},
},

For more information on this, see our page on how to change locale settings within JavaScript.

---

Notes for testers

• Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
• Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page.
• Ensure that when hovering over a link the style changes noticeably.
• Ensure that when a link has focus the style changes noticeably.
• There should be a clear visual distinction between the currently selected tab and the others.
• The whole of the tab must look and be clickable.
• When JavaScript is not available, the tabs should fall back to being headings followed by content. Tabs with lazy-loading content should display a list of links followed by a single heading and content block relevant to the currently selected tab.

---

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

---

Keyboard operations

TAB

Tabbing to an anchor should make the anchor clearly visually different so that the focus point on the page is obvious to the user.

SPACE or ENTER

With focus on an anchor, pressing SPACE or ENTER will open the link. If the link is internal to the page it will scroll the page otherwise it will load the new page.