Migration guide

Moving from v4.X.X to v5.0.0

RequireJS multiversion support

Framework has now been setup in a way that will allow for multiple version of RequireJS to run at the same time, so that third party libraries with their own RequireJS setups should be able to run along side without issue.

As part of these changes, the variable used to extend the RequireJS config has changed from window.requireExtend to FRAMEWORK.extend.requireConfig. Any additional requireConfig change can now also be held within a separate JavaScript, file rather than being placed inline before the init.js script tag. To load the requireConfig from a separate file, provide the URL to the file within the data-require attribute on the init.js script tag.

<script id="js-init" src="./v.2023.01/shared/assets/themes-managed/[ release version ]/shared/js/init.js" data-app="[ App JS url ]" data-require="[ requireJS config file url ]" data-settings="[ component settings file url ]" data-locale="[ locale JS file url ]" integrity="[ init integrity digest ]" async></script>

Any code which referenced Require directly to load modules must now be updated to use the specific context, eg.:

require([ 'm-filter-tags' ], function () {

Changes to:

FRAMEWORK.require([ 'm-filter-tags' ], function () {

There is also now a new 'frameworkready' event which is fired when the Framework Require setup is ready to use, ensuring that locale files and so on are all ready and set up. This should be used instead of 'requireready' to avoid errors.

'requireready' is still available to use where multi-version support is required.

Removal of Modernizr

Modernizr has been completely removed from use to aid page performance. A class of either non-js or js will still be applied to the html element as appropriate, but other Modernizr specific classes, such as svg and csscalc, will not.

With the change in browser support (removing support for IE10 and below) Modernizr's functionality becomes redundant, as other techniques can be used for the few features that browsers such as IE11 do not support.

jQuery support and JavaScript events and listeners

jQuery has been completely removed from all Framework components as part of the work to improve page performance. With browser capability and support changing, the majority of what jQuery was being used to do can be done relatively simply using native JavaScript, which negates the need to load in an additional library. Whilst converting the Framework components over to using purely native JavaScript, a small utility library has been built up to include common functions such as fade, slide, wrap and so on. There is also a guide coving common substitutions from jQuery to native JavaScript; see the migrating away from jQuery guide for more information.

With the removal of jQuery from all Framework modules, the jQuery events are no longer supported within those modules. Events triggered by jQuery are not detected by native JavaScript, and thus the Framework modules, and visa versa. Ensure that any events are also fired using native JavaScript. There is a helper function available to use to assist; see migrating away from jQuery.

jQuery will no longer be loaded automatically on page load, but is still availble to use if required, and can be loaded into your Require modules by just using the name 'jquery'; it is, however, recommended that its use is avoided if at all possible.

JavaScript module loading

JavaScript modules are now loaded automatically using a combination of mutation and intersection observers. This removes the need to manually call 'moduleScan' in order to set up newly added components, and also increases page performance by defering the loading of JavaScript modules until they are close to coming into view. There are a few components which require their JavaScript to run on page load, and these now need the additional attribute data-module-load="true" to be added alongside their data-module attribute.

Framework components which require this additional attribute are:

• Accessibility settings
• Content fade
• Contextual help
• Cookie policy
• Frequently asked questions panel - right hand side variant
• Lazy loading
• Masthead
• Sticky CTA bar

CSS class name changes

Various components have had their class names updated to match with our coding standards or due to deprecated components being removed. The following table provides a mapping for the class names within components.

Business theme changes

B2B theme changes

Font loading updates

Font loading has been updated to use variable fonts in order to reduce the number of font files being loaded and improve page performance. In doing this, the method required to apply different font weight styles via CSS has also changed, and now uses font weight only, rather than a combination of font weight and font family. Any custom CSS will therefore need to be updated to no longer refer to the font family, but rather to use font weights instead.

If there is a requirement to specify the font family, use the following setup to load the appropriate font files safely depending on the browser's capability:

.m-component {
	font-family: "source_sans_pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", "helvetica", sans-serif;
}@supports (font-variation-settings: normal) {
	.m-component {
		font-family: "source_sans_pro_vf", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", "helvetica", sans-serif;
	}
}

Removal of PNGs

PNG fallback images and sprites have been removed. Additionally, do not directly link to icons in the images folder for a particular release, as these links/files could change in any later release.

PNG versions of the Abeille Assurances and Abeille Assurances Investors logos have been retained to mainatain support for the Article microdata format which does not support svg format images for publisher logos.

File path changes

Fonts, Abeille Assurances logos and favicons will no longer be included with every release, instead being moved to be stored centrally. This is to help improve page performance when moving between versions of Framework, as these files will remain cached by the browser.

The paths for the CSS, JavaScript and Icon Library have also all been adjusted to enable theming support.

Note: cdn.abeille-assurances.fr has been deprecated and replaced by static.aviva.io which is a cookieless domain.

PNG versions of all of the logo images have been removed.

The icon library images are now aligned with the theme ensuring that the icons are appropriately coloured/themed. For the default theme the image path would be /assets/themes-icons/v2/aviva/default/.../[ image name ].svg

JavaScript module name changes

A few JavaScript modules have had their names updated to match with our coding standards or due to deprecated components being removed. The following table provides a mapping for the module names within components.

JavaScript library updates

To ensure that all the latest security fixes are applied to Abeille Assurances websites, we have updated all available vendor libraries to their latest versions. The following table provides a list of the vendor libraries which have been updated, what version they have moved between and any further details required to be able to upgrade smoothly.

Optional code now compulsory

Various components had additional supporting markup added or altered to allow compliance with WCAG 2.1 criteria and better accessibility generally. These optional changes are now compulsory and should be built into the components, if this has not already been done.

The list of affected components includes:

• Base template
• Cookie policy
• Checkbox multicard select (complex and comprehensive variants)
• Checkbox toggle
• Doughnut charts
• Footer
• Masthead
• Pagination
• Radio single card select (complex and comprehensive variants)
• Show more

Locale settings

The locale settings variable name has been updated to aid in extending the framework settings safely. The formating of component names used within the locale settings have been updated to match with the component naming conventions. Use the following format to ensure any locale settings remain set as required.

var FRAMEWORK = window.FRAMEWORK || {};
FRAMEWORK.extend = FRAMEWORK.extend || {};FRAMEWORK.extend.locale = {
	'...' : {
		aContextHelp : {
			formText : '...',
			closeText : '...',
		},
		aDate : {
			locale : '...',
			format : '...',
			previousMonth : '...',
			nextMonth : '...',
			months : [ '...', '...', '...', '...', '...', '...', '...', '...', '...', '...', '...', '...' ],
			weekdays : [ '...', '...', '...', '...', '...', '...', '...' ],
			weekdaysShort : [ '...', '...', '...', '...', '...', '...', '...' ],
			interactionInstruction : '...',
			triggerLabelSingle : '...',
			confirmLabelSingle : '...',
			triggerLabelRange : '...',
			confirmLabelRange : '...',
			clearLabel : '...',
			totalSelectedSingular : '...',
			totalSelectedPlural : '...',
			yearLabel : '...',
			monthLabel : '...',
			startDateTitle : '...',
			endDateTitle : '...',
		},
		aFileUpload : { multipleCaption : '...' },
		aPlusMinus : {
			plus : '...',
			minus : '...',
		},
		aTextarea : {
			multipleCaption : '...',
			limitMessage : '...',
			limitMetMessage : '...',
		},
		mCardNotification : { closeText : '...' },
		mCheckboxGroupMultiselect : {
			pleaseSelect : '...',
			allSelected : '...',
			selected : '...',
			selectAll : '...',
		},
		mCookiePolicy : {
			successfullySaved : '...',
			failed : '...',
		},
		mCreditCard : {
			default : '...',
			noMatch : '...',
			amex : '...',
		},
		mFormRowHelp : {
			showMore : '...',
			showLess : '...',
		},
		mMediaPlayer : {
			progress : '...',
			progressTime : '...',
			restart : '...',
			rewind : '...',
			play : '...',
			playVideo : '...',
			playAudio : '...',
			pause : '...',
			forward : '...',
			mute : '...',
			volume : '...',
			captions : '...',
			subtitles : '...',
			fullscreen : '...',
			seconds : '...',
			on : '...',
			off : '...',
		},
		mPredictiveSearch : {
			instruction : '...',
			resultsFound : '...',
			noResults : '...',
		},
		mShowMore : {
			expand : '...',
			contract : '...',
			about : ' ... ',
			description : '...',
		},
		mStickyCtaBar : { mobileText : '...' },
		mTabs : {
			previousText : '...',
			nextText : '...',
			loadingText : '...',
		},
		oAccessibilitySettings : {
			error : '...',
			reduced : '...',
			success : '...',
		},
		oCarousel : {
			previousPageLong : '...',
			previousPage : '...',
			page : '...',
			nextPageLong : '...',
			nextPage : '...',
		},
		oFaqPanel : { showMore : '...' },
		oMasthead : {
			closeText : '...',
			loadingText : '...',
			switcherInitial : '...',
			switcherSelection : '...',
		},
		oModal : {
			closeText : '...',
			loadingText : '...',
		},
		oWallet : {
			nextButton : '...',
			previousButton : '...',
		},
	},
};

Base template

With the release of v5, the browser support list has been updated to no longer include Internet Explorer 10 and below. This has resulted in changes to the base templates to remove the additional styles, polyfills previously required to support these old browsers. Modernizr has also been removed from use to aid in page performance.

The charset and http-equiv meta tags have also been removed from the template in favour of the web server serving the HTML document with the appropriate Content-Type header, "text/html; charset=UTF-8", in order to improve page performance.

The format for the head of pages is now:

<head>
	<title>...</title>
	<meta name="description" content="..." />	<!-- Viewport for responsive -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />	<!-- DNS prefetch -->
	<link rel="dns-prefetch" href="./" />	<!-- Standard favicon -->
	<link rel="icon" type="image/ico" href="./v.2023.01/shared/assets/favicon/favicon.ico" />	<!-- Apple touch icon (also used by other devices eg Android) -->
	<link rel="apple-touch-icon" href="./v.2023.01/shared/assets/favicon/apple-touch-icon.png" />	<!-- MS tile image and colour -->
	<meta name="msapplication-TileImage" content="./v.2023.01/shared/assets/favicon/abeille-windows-logo.png" />
	<meta name="msapplication-TileColor" content="#ffd900" />
	<meta name="theme-color" content="#ffd900" />	<!-- Canonical tag for SEO -->
	<link rel="canonical" href="[ Page URL ]" />	<meta name="twitter:card" content="summary" />
	<meta name="twitter:site" content="@[ Twitter username ]" />
	<meta name="twitter:url" property="og:url" content="[ Page URL ]" />
	<meta name="twitter:title" property="og:title" content="[ Page title ]" />
	<meta name="twitter:description" property="og:description" content="[ Page description ]" />
	<meta name="twitter:image" property="og:image" content="[ Social card image ]" />	<script>
		document.documentElement.classList.remove( 'no-js' );
		document.documentElement.classList.add( 'js' );
	</script>	<link media="all" href="./v.2023.01/shared/assets/themes-managed/[ release version ]/shared/css/vendor/normalize/normalize.css" rel="stylesheet" />
	<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/core.css" rel="stylesheet" />
	<!-- [ Insert extension and custom css for all browsers here ]-->	<link media="print" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/print.css" rel="stylesheet" />
	<!-- [ Insert custom print styles here ]-->
</head>

The crossorigin attribute on the script files to allow CORS should now also be included.

<script async id="js-init" src="./v.2023.01/shared/assets/themes-managed/[ release version ]/shared/js/init.js" integrity="[ init integrity digest ]" crossorigin="anonymous"></script>

IE11 custom styles

To prevent styles being applied to IE11 and below, use CSS @supports and place the styles that IE11 can understand before the @supports rule. This replaces the use of Modernizr classes such as no-smil and smil.

In css:

.m-component {
	transform: none;
}@supports ( object-fit: cover ) {
	.m-component {
		transform: rotate(20deg);
	}
}

In JS:

if ( window.CSS && window.CSS.supports && window.CSS.supports( 'object-fit', 'cover' ) ) {
	// This will not be run for IE
}

Superfluous aria roles

Some aria roles previously included on components are not required due to arias role being implied by the element types themselves. These superfluous aria roles have been removed from the following components:

• Masthead: role="banner" removed from header and role="navigation" removed from <nav class="m-primary-navigation"> element.
• Form fieldsets (all components using fieldsets): role="group" and role="radiogroup" removed from all fieldset elements.
• Footer: role="contentinfo" removed from footer element.
• Pagination: role="navigation" removed from <nav class="a-pagination"> element.

Accessibility settings

This component will now set jQuery.fx.off appropriately if jQuery is already present on the page. If any module loads jQuery as a dependancy, ensured that the jQuery.fx.off variable is set appropriately when the module runs to ensure animations are not used when they should not be.

The component now does not rely on the cookie policy cookie being set to true before the component is available to use. Messaging around the use of the feature should now make it clear that it requires cookies to store preferences, or the use of the device's reduced motion settings. For example:

<div class="m-card m-card-notification m-card-notification--neutral" role="status">
	<div class="m-card-content">
		<p>These settings only affect [ website domain ]</p>
		<p>This feature requires the use of a cookie to save your preference, alternatively this site also respects reduced motion preferences set on your device.</p>
	</div>
</div>

The component will now display an appropriate message if the user has disabled animations on their device to inform them that animations have been disabled across the site in accordance to this setting. The text for this message is included within the locale settings.

oAccessibilitySettings : {
	error : 'The ability to store your accessibility preferences for this website requires the use of cookies. Please enable cookies for this site so that we can save your preference, or use the reduced motion setting on your device.',
	reduced : 'Animations and transitions have been automatically disabled for this website in accordance with your device settings.',
	success : 'Your preferences have been successfully updated.',
}

A number of class names for the list of radios have changed to align with the form row group.

Prior to v5.0.0

<div class="o-accessibility-settings" data-module="o-accessibility-settings" data-cookie-name="...">
	<hr class="a-keyline-divider a-keyline-divider--60-all a-keyline-divider--horizontal-solid" />	<div class="l-max l-max--9-column-large l-max--left">
		<h2 class="l-section__heading a-heading a-heading--1 u-margin--top-none">Accessibility settings</h2>		<div class="m-card m-card-notification m-card-notification--neutral" role="status">
			<div class="m-card-content">
				<p>These settings only affect [ website domain ]</p>
			</div>
		</div>		<div class="o-accessibility-settings__notification"></div>		<fieldset class="m-form-row m-form-row--full-width o-accessibility-settings__animation-toggle" role="radiogroup">
			<legend class="a-label">Website animation</legend>
			<p class="m-form-row__explanatory-text">This includes animations on video banners, form controls, expandable menus etc.</p>
			<div class="m-form-row__content">
				<ul class="m-radio-group m-radio-group--double-column">
					<li class="m-radio-group__item">
						<label class="a-radio" for="animations_toggle_on">
							<input class="a-radio__input" type="radio" name="animations_toggle" id="animations_toggle_on" value="On" checked />
							<span class="a-radio__label"><span class="a-radio__label-inner">On</span></span>
							<span class="a-radio__ui"></span>
						</label>
					</li>
					<li class="m-radio-group__item">
						<label class="a-radio" for="animations_toggle_off">
							<input class="a-radio__input" type="radio" name="animations_toggle" id="animations_toggle_off" value="Off" />
							<span class="a-radio__label"><span class="a-radio__label-inner">Off</span></span>
							<span class="a-radio__ui"></span>
						</label>
					</li>
				</ul>
			</div>
		</fieldset>		<ul class="m-button-group u-margin--bottom-none">
			<li class="m-button-group__item"><button class="a-button a-button--primary o-accessibility-settings__submit"><span class="a-button__inner">Submit</span></button></li>
		</ul>	</div>
</div>

v5.0.0

<div class="o-accessibility-settings" data-module="o-accessibility-settings" data-module-load="true" data-cookie-name="...">
	<hr class="a-divider-line a-divider-line--60-all a-divider-line--horizontal-solid" />	<div class="l-max l-max--9-column-large l-max--left">
		<h2 class="l-section__heading a-heading a-heading--1 u-margin--top-none">Accessibility settings</h2>		<div class="m-card m-card-notification m-card-notification--neutral" role="status">
			<div class="m-card-content">
				<p>These settings only affect [ website domain ]</p>
			</div>
		</div>		<div class="o-accessibility-settings__notification"></div>		<fieldset class="m-form-row m-form-row--full-width o-accessibility-settings__animation-toggle">
			<legend class="a-label">Website animation</legend>
			<p class="m-form-row__explanatory-text">This includes all animations and transitions used across this website such as on video banners, form controls, expandable menus etc.</p>
			<div class="m-form-row__content">
				<ul class="m-form-row-group m-form-row-group--option-group">
					<li class="m-form-row-group-item m-form-row-group-item--full-width">
						<label class="a-radio" for="animations_toggle_on">
							<input class="a-radio__input" type="radio" name="animations_toggle" id="animations_toggle_on" value="On" checked />
							<span class="a-radio__label"><span class="a-radio__label-inner">On</span></span>
							<span class="a-radio__ui"></span>
						</label>
					</li>
					<li class="m-form-row-group-item m-form-row-group-item--full-width">
						<label class="a-radio" for="animations_toggle_off">
							<input class="a-radio__input" type="radio" name="animations_toggle" id="animations_toggle_off" value="Off" />
							<span class="a-radio__label"><span class="a-radio__label-inner">Off</span></span>
							<span class="a-radio__ui"></span>
						</label>
					</li>
				</ul>
			</div>
		</fieldset>		<ul class="m-button-group u-margin--bottom-none">
			<li class="m-button-group__item"><button class="a-button a-button--primary o-accessibility-settings__submit"><span class="a-button__inner">Submit</span></button></li>
		</ul>	</div>
</div>

Buttons

Support for buttons using the input element has been removed in favour of using the button element with appropriate type attribute applied; this ensures thathover, focus and active states work correctly.

<button class="a-button" type="submit" >...</button>

Instead of:

<span class="a-button a-button--input"><input class="a-button__inner" type="submit" value="..." /></span>

Cards (editorial card types)

Following WCAG 2.5.5 guidelines, 'read more' type links within cards have an increased target size to improve accessibility on touch devices. The markup has changed to convert the links to shallow tertiary buttons, which must include a hidden additional description to better convey the meaning of the read more link. The markup, formerly:

<p class="m-card-readmore"><a href="...">...</a></p>

changes to:

<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">Read more<span class="u-hidden--visually">...</span></span></a></p>

Checkbox

A number of class names for the list of checkboxes have changed to align with the form row group.

Checkboxes in a single column/stacked

Prior to v5.0.0

<fieldset class="m-form-row" role="group">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-checkbox-group">
			<li class="m-checkbox-group__item">
				<label class="a-checkbox" for="...">
					<input class="a-checkbox__input" name="..." id="..." type="checkbox" value="..." />
					<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
					<span class="a-checkbox__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group m-form-row-group--stacked">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-checkbox" for="...">
					<input class="a-checkbox__input" name="..." id="..." type="checkbox" value="..." />
					<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
					<span class="a-checkbox__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

Checkboxes in two columns

Prior to v5.0.0

<fieldset class="m-form-row" role="group">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-checkbox-group m-checkbox-group--2">
			<li class="m-checkbox-group__item">
				<label class="a-checkbox" for="...">
					<input class="a-checkbox__input" name="..." id="..." type="checkbox" value="..." />
					<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
					<span class="a-checkbox__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-checkbox" for="...">
					<input class="a-checkbox__input" name="..." id="..." type="checkbox" value="..." />
					<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
					<span class="a-checkbox__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

Pictorial checkboxes

Prior to v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-radio-group m-radio-group--pictorial [ Modifier ]">
			<li class="m-radio-group__item">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." alt="" />
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group m-form-row-group--pictorial m-form-row-group--stacked [ Modifier ]">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-checkbox" for="...">
					<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." />
					<span class="a-checkbox__label">
						<span class="a-checkbox__label-image">
							<img src="..." alt="" />
						</span>
						<span class="a-checkbox__label-inner">...</span>
					</span>
					<span class="a-checkbox__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

The class m-checkbox-group--2, which made checkboxes sit in two columns at tablet and desktop, has been removed as a result of the move to using form row group. By default, checkboxes will now sit in two columns, unless the new modifier class m-form-row-group--stacked is used to force the checkboxes to sit in a single column or to stack.

The class m-checkbox-group--3, which made checkboxes sit in three columns at tablet and desktop, has been removed completely in favour of either using two columns or, when using standalone checkboxes in a group, their natural widths.

Checkbox multicard select and radio singlecard select - complex and comprehensive variants

Following WCAG 2.1 guidelines, markup changes are required to ensure the form field does not have multiple label elements, as these are not widely supported in assistive technologies. The input now identifies the ID of the label using aria-labelledby="..." and other labels are hidden using aria-hidden="true".

Checkbox toggle

Following WCAG 2.1 guidelines, markup changes are available to the checkbox toggle to ensure the form field does not have multiple label elements, as these are not widely supported by assistive technologies.

The input is now positioned outside the inner label and identifies the outer label ID using aria-labelledby="...". The inner label is hidden using aria-hidden="true"

<label class="a-label a-checkbox--toggle-outer-label" for="..." id="...">...</label>
<div class="m-form-row__content a-checkbox--toggle-outer-content">
	<input class="a-checkbox__input" id="..." name="..." type="checkbox" aria-labelledby="..." />
	<label class="a-checkbox a-checkbox--toggle" for="..." aria-hidden="true">
		<span class="a-checkbox__label">
			<span class="a-checkbox__label-inner a-checkbox__label-inner--yes">...</span>
			<span class="a-checkbox__label-inner a-checkbox__label-inner--no">...</span>
		</span>
		<span class="a-checkbox__ui"></span>
	</label>
</div>

Cookie policy

A hidden H2 is now required at the top of the cookie policy message, by both providing better context for the message and also making it more discoverable by screen reader users.

<div class="l-whole-page">
	<div class="m-cookie-policy [ Modifers ] t-accent-dark" data-module="m-cookie-policy" data-module-load="true" data-cookie_expires="..." data-cookie-name="...">
		<div class="m-cookie-policy__content">
			<h2 class="u-hidden--visually">Cookie policy</h2>
			<p>...</p>
			<a href="..." class="m-cookie-policy__close">...</a>
		</div>
	</div>
	<!-- Masthead -->
	...
</div>

Contextual help

The class a-context-help--hidden-text is now required for the inline content variant to ensure hover and focus states are visible.

<p>...<a class="a-context-help a-link-icon" href="..." data-module="a-context-help"><span class="a-link-icon__inner u-hidden--visually">...</span></a></p>

Should now be:

<p>...<a class="a-context-help a-context-help--hidden-text a-link-icon" href="..." data-module="a-context-help"><span class="a-link-icon__inner u-hidden--visually">...</span></a></p>

Date and date range

Method for calling setSettings function on the date and date range compnents has been adjusted slightly to match with new namespacing system used across all Framework components. dateInput.setSettings has changed to aDate.setSettings and dateRange.setSettings to mDateRange.setSettings.

It is now also recommended that the aDate/mDateRange object is obtained by calling initInstance on the date input/date range component to ensure that the module is loaded before attempting to use the setSettings function. See Interacting with Framework components example for further details on how to safely interact with Framework components.

Was:

document.querySelector( '#dateInput' ).dateInput.setSettings({
	minDate: '2016-01-01',
	maxDate: '2018-01-01',
});

Now:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/a-date' ], function ( aDateModule ) {
		var dateEl = document.querySelector( '#dateInput' ),
			dateInstance = aDateModule.initInstance( dateEl );		dateInstance.setSettings({
			minDate: '2016-01-01',
			maxDate: '2018-01-01',
		});
	});
});

Doughnut and pie charts

The ability to update settings via triggering the event 'updateSettings' has been removed. Settings should now be updated programatically by calling the 'setSettings' function returned when calling initInstance on the m-doughnut-chart element.

Pre-v5.0.0 the code required to update the settings post load was:

$( selector ).trigger( 'updateSettings', {
	'amount' : '10,15,20,25,30'
});

This is now:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-doughnut-chart' ], function ( mDoughnutChartModule ) {
		var mDoughnutChartEl = document.querySelector( '#chart' ),
			mDoughnutChartInstance = mDoughnutChartModule.initInstance( mDoughnutChartEl );			mDoughnutChartInstance.setSettings({
				'amount' : '10,15,20,25,30',
		});
	});
});

The default accent colours have been updated to the new palette, so to use the legacy accent colours, call the setSettings function from the m-doughnut-chart element with a JavaScript object containing the following:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-doughnut-chart' ], function ( mDoughnutChartModule ) {
		var mDoughnutChartEl = document.querySelector( '#chart' ),
			mDoughnutChartInstance = mDoughnutChartModule.initInstance( mDoughnutChartEl );		mDoughnutChartInstance.setSettings({
			accentSegmentColors : {
				'accent-dark-1' : '#1a61bd', // Light blue
				'accent-dark-2' : '#001647', // Dark blue
				'accent-dark-3' : '#0e573f', // Dark green
				'accent-dark-4' : '#87378e', // Light purple
				'accent-dark-5' : '#421b67', // Dark purple
				'accent-dark-6' : '#c01b83', // Pink
				'accent-dark-7' : '#00788a', // Teal
				'accent-dark-8' : '#413e45', // Dark grey
			}
		});
	});
});

The names for the colours have also been updated to not use named colours such as 'dark-purple' which were specific to the Abeille Assurances branded theme, but to instead use the new accent naming convension such as 'accent-dark-5'.

Editorial and navigation cards

Following WCAG 2.5.5 guidelines, 'read more' type links within cards have an increased target size to improve accessibility on touch devices. This has affected both editorial (internal links) and navigation (whole card as link) variants. For markup changes, see editorial cards and navigation cards, but be aware that other card types using 'read more' type links will need markup changes accordingly.

For the navigation cards, markup has not changed, but there will be an additional 10px of space above the 'read more' link to ensure styling remains consistent across all card types.

Cards should now use tertiary button instead of simple links:

Editorial card (internal / no link)

<div class="l-columns__column m-card [ Modifiers ]">
	<div class="m-card-image">
		<img src="..." alt="" />
	</div>
	<div class="m-card-content">
		<div class="m-card-content__inner m-card-content__inner--top">
			<p class="m-card-tagline">...</p>
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
			<p>...</p>
			</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-readmore"><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...<span class="u-hidden--visually">...</span></span></a></p>
		</div>
	</div>
</div>

Navigation card (whole card link)

<a class="l-columns__column m-card [ Modifiers ]" href="...">
	<div class="m-card-image">
		<img src="..." alt="" />
	</div>
	<div class="m-card-content">
		<div class="m-card-content__inner m-card-content__inner--top">
			<p class="m-card-tagline">...</p>
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
			<p>...</p>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-readmore"><span>...</span></p>
		</div>
	</div>
</a>

FAQ panel

The event name used when adding additional FAQs post initial load was renamed from 'standardVariant' to 'update'. The event can also no longer be triggered via jQuery due to the jQuery support being removed, so will now only be triggerable via native JavaScript.

Prior to v5.0.0. the code was:

$( '[ID or class of div including data-module call ]' ).trigger( 'standardVariant' );

This is now:

utility.trigger( '[ID or class of div including data-module call ]', 'update' );

Example using the utility functions available.

Filter tags / results display

Following multiversion support being applied to the RequireJS setup used by Framework the method used to access the modules via require has changed, the JavaScript module also now returns an object containing the reference to setCallback on calling initInstance making interacting with Framework modules easier. Previously modules could be accessed using:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-filter-tags' ], function () {
		var filterEl = document.querySelector( '.m-filter-tags' ),
			applyFilters,
			filterLoaded = setInterval( function() {
				if ( filterEl.classList.contains( 'js-m-filter-tags' ) ) {
					filterEl.setCallback( applyFilters );
					clearInterval( filterLoaded );
				}
			}, 100);		applyFilters = function() {
			// Callback function which should then process which checkboxes have been selected
		}
	});
});

Modules must now be loaded in via Require using:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-filter-tags' ], function ( mFilterTagsModule ) {
		var filterEl = document.querySelector( '.m-filter-tags' ),
			applyFilters = function() {
				// Callback function which should then process which checkboxes have been selected
			},
			filterInstance = mFilterTagsModule.initInstance( filterEl );		filterInstance.setCallback( applyFilters );
	});
});

A number of class names for the list of checkboxes have changed to align with the form row group.

Prior to v5.0.0

<div class="m-filter-tags" id="..." data-module="m-filter-tags">
	<div class="m-filter-tags-filters">
		<h3 class="m-filter-tags-filters__heading a-heading a-heading--3">Select categories to filter documents</h3>
		<div class="m-filter-tags-filters__multiselect">
			<fieldset class="m-form-row m-form-row--full-width">
				<legend class="a-label">.../legend>
				<div class="m-form-row__content">
					<ul class="m-checkbox-group">
						<li class="m-checkbox-group__item">
							<label class="a-checkbox" for="...">
								<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." />
								<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
								<span class="a-checkbox__ui"></span>
							</label>
						</li>
						...
					</ul>
				</div>
			</fieldset>
		</div>
		...
		<div class="m-filter-tags-filters__cta">
			<button id="modal-trigger" class="a-button a-button--form">Filter results</button>
		</div>
		<div class="m-filter-tags-filters__buttons">
			<ul class="m-button-group">
				<li class="m-button-group__item"><button class="a-button a-button--filters-apply">Apply</button></li>
				<li class="m-button-group__item"><button class="a-button a-button--tertiary a-button--filters-clear"><span class="a-button__inner">Clear all filters</span></button></li>
			</ul>
		</div>
	</div>
	<div class="m-filter-tags-tags">
		<p class="m-filter-tags-tags__label">Filters:</p>
		<ul class="m-filter-tags-tags__list m-button-group">
			<li class="m-button-group__item"><button class="a-button a-button--tag">...</button></li>
			...
			<li class="m-button-group__item"><button class="a-button a-button--tertiary a-button--cancel a-button--filters-cancel"><span class="a-button__inner">Clear all filters</span></button></li>
		</ul>
	</div>
</div>

v5.0.0

<div class="m-filter-tags" id="..." data-module="m-filter-tags">
	<div class="m-filter-tags-filters">
		<h3 class="m-filter-tags-filters__heading a-heading a-heading--3">Select categories to filter documents</h3>
		<div class="m-filter-tags-filters__multiselect">
			<fieldset class="m-form-row m-form-row--full-width">
				<legend class="a-label">.../legend>
				<div class="m-form-row__content">
					<ul class="m-form-row-group m-form-row-group--option-group m-form-row-group--stacked">
						<li class="m-form-row-group-item m-form-row-group-item--full-width">
							<label class="a-checkbox" for="...">
								<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." />
								<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
								<span class="a-checkbox__ui"></span>
							</label>
						</li>
						...
					</ul>
				</div>
			</fieldset>
		</div>
		...
		<div class="m-filter-tags-filters__cta">
			<button id="modal-trigger" class="a-button a-button--form">Filter results</button>
		</div>
		<div class="m-filter-tags-filters__buttons">
			<ul class="m-button-group">
				<li class="m-button-group__item"><button class="a-button a-button--filters-apply">Apply</button></li>
				<li class="m-button-group__item"><button class="a-button a-button--tertiary a-button--filters-clear"><span class="a-button__inner">Clear all filters</span></button></li>
			</ul>
		</div>
	</div>
	<div class="m-filter-tags-tags">
		<p class="m-filter-tags-tags__label">Filters:</p>
		<ul class="m-filter-tags-tags__list m-button-group">
			<li class="m-button-group__item"><button class="a-button a-button--tag">...</button></li>
			...
			<li class="m-button-group__item"><button class="a-button a-button--tertiary a-button--cancel a-button--filters-cancel"><span class="a-button__inner">Clear all filters</span></button></li>
		</ul>
	</div>
</div>

Form assumptions

A number of class names for the list of radios have changed to align with the form row group.

Prior to v5.0.0

<div class="l-max l-max--left [ Modifier ]">
	<fieldset class="m-form-row [ Modifier ] o-form-assumptions" data-module="o-form-assumptions">
		<legend>...</legend>
		<div class="m-heading-group [ Modifier ]">
			<h2 class="m-heading-group__item a-heading a-heading--2">...</h2>
			<h3 class="m-heading-group__item a-heading a-heading--3 a-heading--light">...</h3>
		</div>
		<div class="o-form-assumptions__content">
			<h2 class="a-label a-heading [ Modifier ]">...</h2>
			<ul class="o-form-assumptions-list">
				<li class="o-form-assumptions-list__item">...</li>
				<li class="o-form-assumptions-list__item">...</li>
				...
			</ul>
			<p>...</p>
			<p class="u-hidden--js">[Non Javascript help message. Example: If one or more of these is not true, choose 'False'.]</p>
			<ul class="m-radio-group m-radio-group--2-columns">
				<li class="m-radio-group__item">
					<label class="a-radio" for="...">
						<input class="a-radio__input o-form-assumptions__input--valid" type="radio" name="..." id="..." value="..." />
						<span class="a-radio__label"><span class="a-radio__label-inner">True</span></span>
						<span class="a-radio__ui"></span>
					</label>
				</li>
				<li class="m-radio-group__item">
					<label class="a-radio" for="...">
						<input class="a-radio__input o-form-assumptions__input--warning" type="radio" name="..." id="..." value="..." />
						<span class="a-radio__label"><span class="a-radio__label-inner">False</span></span>
						<span class="a-radio__ui"></span>
					</label>
				</li>
			</ul>
			<div class="m-card m-card-notification m-card-notification--information m-card-notification--background-colour u-hidden u-margin--bottom-none" role="status">
				<div class="m-card-content">
					<p>[Notification message to advise on next steps if assumptions not met]</p>
				</div>
			</div>
			<span class="o-form-assumptions__ui"></span>
		</div>
	</fieldset>
</div>

v5.0.0

<div class="l-max l-max--left [ Modifier ]">
	<fieldset class="m-form-row [ Modifier ] o-form-assumptions" data-module="o-form-assumptions">
		<legend>...</legend>
		<div class="m-heading-group [ Modifier ]">
			<h2 class="m-heading-group__item a-heading a-heading--2">...</h2>
			<h3 class="m-heading-group__item a-heading a-heading--3 a-heading--light">...</h3>
		</div>
		<div class="o-form-assumptions__content">
			<h2 class="a-label a-heading [ Modifier ]">...</h2>
			<ul class="o-form-assumptions-list">
				<li class="o-form-assumptions-list__item">...</li>
				<li class="o-form-assumptions-list__item">...</li>
				...
			</ul>
			<p>...</p>
			<p class="u-hidden--js">[Non Javascript help message. Example: If one or more of these is not true, choose 'False'.]</p>
			<ul class="m-form-row-group m-form-row-group--option-group">
				<li class="m-form-row-group-item m-form-row-group-item--full-width">
					<label class="a-radio" for="...">
						<input class="a-radio__input o-form-assumptions__input--valid" type="radio" name="..." id="..." value="..." />
						<span class="a-radio__label"><span class="a-radio__label-inner">True</span></span>
						<span class="a-radio__ui"></span>
					</label>
				</li>
				<li class="m-form-row-group-item m-form-row-group-item--full-width">
					<label class="a-radio" for="...">
						<input class="a-radio__input o-form-assumptions__input--warning" type="radio" name="..." id="..." value="..." />
						<span class="a-radio__label"><span class="a-radio__label-inner">False</span></span>
						<span class="a-radio__ui"></span>
					</label>
				</li>
			</ul>
			<div class="m-card m-card-notification m-card-notification--information m-card-notification--background-colour u-hidden u-margin--bottom-none" role="status">
				<div class="m-card-content">
					<p>[Notification message to advise on next steps if assumptions not met]</p>
				</div>
			</div>
			<span class="o-form-assumptions__ui"></span>
		</div>
	</fieldset>
</div>

Footer

A visually hidden, generic H2 must be included to the top of the footer component. All m-footer__list-heading elements must then be H3 to ensure correct semantics.

Horizontal value bar

a-heading and a-heading--4 classes are no longer required on m-value-bar__status element.

Masthead

Skip the main content skip link moved prior to all main masthead code to enable users to quickly skip past all the navigation. The skip to content link used to be include along with all the other skip link deeper within the masthead.

Prior to v5.0.0

...
<ul class="a-list-plain o-masthead__skip-links">
	<li class="o-masthead__menu-link"><a href="#nav">Menu</a></li>
	...
	<li><a href="#main">Skip to content</a></li>
</ul>
...

v5.0.0

<div class="l-whole-page">
	<header>
		<p class="o-masthead-main-content"><a href="#main">Skip to content</a></p>
		...

Login link has been surfaced at all screen sizes. Prior to v5.0.0, all masthead links would apear within the menu dropdown. The login link can either be a direct link to a login page or open a dropdown containing login and register buttons. With this change being made, if the login link goes directly to a login page, there is now no longer a requirement to include a duplicate login link within the primary navigation area for display at mobile.

The classes t-accent-light and t-accent-light--yellow must be removed from the o-masthead element. The colour of the masthead is now controlled entirely by the theme.

If the content within the extra content area is dynamically updated post initial page load, then the redraw function must be called on the masthead element in order to recalculate what can fit at the current window size.

mastheadInstance.redraw();

See how to interact with Framework components for more information.

Multiselect

A number of class names for the list of checkboxes have changed to align with the form row group.

Prior to v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-checkbox-group" data-module="m-multiselect">
			<li class="m-checkbox-group__item">
				<label class="a-checkbox" for="...">
					<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." />
					<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
					<span class="a-checkbox__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group m-form-row-group--stacked" data-module="m-multiselect">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-checkbox" for="...">
					<input class="a-checkbox__input" type="checkbox" name="..." id="..." value="..." />
					<span class="a-checkbox__label"><span class="a-checkbox__label-inner">...</span></span>
					<span class="a-checkbox__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

Numeric card

It is now recommended that additional hidden text is included for the numeric value on each of the cards to make it clearer that the card represents a step in a process. The line of code:

<span class="m-card-numeric">[Numeric]</span>

Changes to:

<span class="m-card-numeric"><span class="u-hidden--visually">Step </span>[Numeric]<span class="u-hidden--visually"> of [Total numeric]</span></span>

Pagination

Markup and logic changes required due to style changes applied to ensure compliance with WCAG 2.5.5 and to improve general accessibility of this component.

<p class="u-text--center u-no-print">Showing ... of ...</p>
<nav class="a-pagination" aria-label="Pagination">
	<ul class="a-pagination-list a-list-plain">
		<li class="a-pagination__previous"><a href="..." aria-label="Previous page, page ..."><span>Previous</span></a></li>
		<li class="a-pagination-list__item a-pagination-list__item--tertiary"><a href="..." aria-label="Page ...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--tertiary"><a href="..." aria-label="Page ...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--secondary"><a href="..." aria-label="Page ...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--primary"><a href="..." aria-label="Page ...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--primary a-pagination-list__item--selected"><span aria-current="page" aria-label="Page ...">...</span></li>
		<li class="a-pagination-list__item a-pagination-list__item--primary"><a href="..." aria-label="Page ...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--secondary"><a href="..." aria-label="Page ...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--tertiary"><a href="..." aria-label="Page ...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--tertiary"><a href="..." aria-label="Page ...">...</a></li>
		<li class="a-pagination__next"><a href="..." aria-label="Next page, page ..."><span>Next</span></a></li>
	</ul>
</nav>

There are now three primary links (shown at all sizes), two secondary links (shown from large mobile and up) and four tertiary links (shown from small tablet and up). See pagination for a working example.

Predictive search

A number of changes have been made to this component but the main one being the removal of the 'Use current location' functionality, in favour of this being handled separately. This has been done to improve the usability and understanding of the component. Location functionality is commonly found along side an entry field and separate from any location suggestions as a user types.

The method for setting the components settings has been changed from providing a global variable reference within a data attribute to either providing the settings on inital setup using initInstance or calling 'setSettings' programatically from the referenced returned by initInstance.

Prior to v5.0.0

<input type="text" id="..." name="..." class="a-textbox" placeholder="..." data-module="m-predictive-search" data-settings="AVIVA.predictiveSearchExample" />

<script>
	var AVIVA = window.AVIVA || {};
	AVIVA.predictiveSearchExample = {
		'overlay' : true,
		'display' : 2,
		'location': true,
		'source': function( term, response ) {
			$.ajax({
				url: "//www.test.com/search?q=" + term,
				dataType: "jsonp",
				success: function (data) {
					var response_data = [];
					if ( data[1].length > 0 ) {
						for ( var i = 0; i < data[1].length; i++ ) {
							response_data.push(data[1][i][0]);
						}
					}
					response( response_data );
				}
			});
		}
	};
</script>

v5.0.0

<input type="text" id="..." name="..." class="a-textbox" placeholder="..." />

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-predictive-search' ], function ( mPredictiveSearchModule ) {
		var searchEl = document.querySelector( ... ),
			dateInstance = mPredictiveSearchModule.initInstance( searchEl, {
			source : function( term, response, xhr ) {
				xhr.open( 'GET', '//www.test.com/search?q=' + term, true );
				xhr.onload = function onload() {
					var jsonResponse,
						responseData = [],
						i;
					if ( xhr.status >= 200 && xhr.status < 400 ) {
						jsonResponse = JSON.parse( xhr.responseText );						// Format response from service						response( responseData );
					}
				};
				xhr.send();
			},
		});
	});
});

Other changes include:

• Addition of minChars setting to change the number of characters required before a search is performed.
• Addition of delay setting, to increase the debounce time for keypresses and reduce the number of search calls as a user types<. /li>
• Additionl of XMLHttpRequest being passed to the source function to use for ajax calls so that the call can be aborted when a new search is initiated.

Radio

A number of class names for the list of radios have changed to align with the form row group.

Radios in a single column/stacked

Prior to v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-radio-group">
			<li class="m-radio-group__item">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group m-form-row-group--stacked [ Modifers ]">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

Radios in two columns

Prior to v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-radio-group m-radio-group--double-column">
			<li class="m-radio-group__item">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group [ Modifers ]">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

Pictorial radios

Prior to v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-radio-group m-radio-group--pictorial [ Modifier ]">
			<li class="m-radio-group__item">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." alt="" />
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group m-form-row-group--pictorial [ Modifier ]">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." alt="" />
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

The class m-radio-group--double-column, which made radios sit in two columns at tablet and desktop, has been removed as a result of the move to using form row group. By default, radios will now sit in two columns unless the new modifier class m-form-row-group--stacked is used to force the radios to sit in a single column or to stack.

Segmented controls

A number of class names for the list of radios have changed to align with the form row group.

Two options

Prior to v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-radio-group m-radio-group--2" data-module="m-radio-segmented">
			<li class="m-radio-group__item">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			<li class="m-radio-group__item">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group m-radio-segmented--2" data-module="m-radio-segmented">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
		</ul>
	</div>
</fieldset>

Three or more options

Prior to v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-radio-group m-radio-group--[ 3 to 5 ]" data-module="m-radio-segmented">
			<li class="m-radio-group__item">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group m-form-row-group--stacked m-radio-segmented--[ 3 to 5 ]" data-module="m-radio-segmented">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

Pictorial

Prior to v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-radio-group m-radio-group--pictorial m-radio-group--[ 2 to 5 ]" data-module="m-radio-segmented">
			<li class="m-radio-group__item">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." alt="" />
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

v5.0.0

<fieldset class="m-form-row">
	<legend class="a-label">...</legend>
	<div class="m-form-row__content">
		<ul class="m-form-row-group m-form-row-group--option-group m-form-row-group--pictorial [ Modifiers ]" data-module="m-radio-segmented">
			<li class="m-form-row-group-item m-form-row-group-item--full-width">
				<label class="a-radio" for="...">
					<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
					<span class="a-radio__label">
						<span class="a-radio__label-image">
							<img src="..." alt="" />
						</span>
						<span class="a-radio__label-inner">...</span>
					</span>
					<span class="a-radio__ui"></span>
				</label>
			</li>
			...
		</ul>
	</div>
</fieldset>

Show more / Form row help

A descriptive text for the show more / show less links should be included on every instance of Show more components to aid screen readers and other assitive technologies.

Form row help has now been removed, so all instances should be moved to Show more, which can be done simply by changing both the class and data-module attributes from m-form-row__help to m-show-more. Do not forget to also add the descriptive text as detailed above.

Required markup is now:

<div class="m-show-more" data-module="m-show-more" data-description="..." >
	<p>...</p>
</div>

Single segment doughnut chart

Following WCAG2.1 criterion 1.4.12: Text Spacing, mark up changes were made to the single segmented doughnut chart to correctly space text should a user stylesheet over-ride be applied.

<div class="m-doughnut-chart" data-module="m-doughnut-chart" data-amount="..." data-color="...">
	<div class="m-doughnut-chart__inner">
		<div class="m-doughnut-chart__background">
			<img src="..." alt="" />
		</div>
		<p class="m-doughnut-chart-summary">
			<span class="m-doughnut-chart-summary__number">...</span>
			<span class="m-doughnut-chart-summary__title">...</span>
		</p>
	</div>
</div>

Site switcher

It is now recommended that aria-current="true" is included on the currently selected button.

Tables

The m-table element must have tabindex="0" set on it to ensure that if the table becomes scrollable at any screen size the area is accessibile via the keyboard.

Tables stacked by column no longer require a data attribute setting for each table cell mirroring the value of the row header. Previously the markup required would have been:

<div class="m-table m-table--stackable-column" data-module="m-stackable-column-table">
	<table>
		<thead class="m-table--text-left">
			<tr>
				<td>&nbsp;</td>
				<th scope="col">[ Title 1 ]</th>
				<th scope="col">[ Title 2 ]</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">[ Label 1 ]</th>
				<td>[ Content 1 ]</td>
				<td>[ Content 2 ]</td>
			</tr>
			<tr>
				<th scope="row">[ Label 2 ]</th>
				<td>[ Content 1 ]</td>
				<td>[ Content 2 ]</td>
			</tr>
		</tbody>
	</table>
</div>

Wallet

The class o-wallet-stored-cards__name--logo has been removed and the corresponding div that it was originally placed on. The markup required is now:

No stored cards

<div class="o-wallet-stored-cards">
	<a class="o-wallet-card-display" href="..." data-module="o-modal" data-modal-fullscreen="true" data-modal-wallet="true" aria-label="Add a card">
		<div class="o-wallet-card-display-inner">
			<p class="o-wallet-card-display-inner__number">
				<span class="o-wallet-card-display-inner__number-title"></span>
				<span class="o-wallet-card-display-inner__number-data"></span>
			</p>
			<p class="o-wallet-card-display-inner__expiry">
				<span></span>
			</p>
			<p class="o-wallet-card-display-inner__name"></p>
		</div>
	</a>
</div>

Stored cards

<ul class="a-list-plain o-wallet-stored-cards [ Modifier ]">
	<li class="o-wallet-card-display o-wallet-stored-cards__card [ Modifier ] t-accent-dark">
		<p class="o-wallet-stored-cards__default-card">default</p>
		<div class="o-wallet-card-display-inner">
			<p class="o-wallet-card-display-inner__number">
				<span class="o-wallet-card-display-inner__number-title">Card number:</span>
				<span class="o-wallet-card-display-inner__card-ending">Card ending </span>
				<span class="o-wallet-card-display-inner__number-data">...</span>
				<span class="o-wallet-card-display-inner__card-is-expiring"> is expiring</span>
				<span class="o-wallet-card-display-inner__card-has-expired"> has expired</span>
			</p>
			<p class="o-wallet-card-display-inner__expiry">Expires:<span>...</span></p>
			<p class="o-wallet-card-display-inner__name">...</p>
		</div>
		<ul class="m-button-group">
			<li class="m-button-group__item">
				<a class="a-button a-button--tertiary a-button--edit" href="...">
					<span class="a-button__inner">
						<span class="o-wallet-card-display-inner__edit-card">Edit<span class="u-hidden--visually"> card ending ...</span></span>
						<span class="o-wallet-card-display-inner__update-card">Update expiry date</span>
					</span>
				</a>
			</li>
			<li class="m-button-group__item">
				<a class="a-button a-button--tertiary a-button--delete" href="...">
					<span class="a-button__inner">Remove<span class="u-hidden--visually"> card ending ...</span></span>
				</a>
			</li>
		</ul>
	</li>
	<li>...</li>
</ul>

Additionally, markup and styles have been edited to ensure greater consistency across add/edit/remove functions. Buttons within .o-wallet-add-edit-remove-buttons form row element no longer need additional modifier classes (.o-wallet-add-edit-remove-buttons--add / .o-wallet-add-edit-remove-buttons--remove / .o-wallet-add-edit-remove-buttons--cancel).

Wayfinder

Wayfinder has been split off to be a specific stand-alone component in order to differentiate it from the compulsory breadcrumb trail; wayfinder is now part of the Supporting Navigation extension.

Breadcrumb has been reinstated as a compulsory part of the footer on all pages (from the home page down) on all sites for both accessibility and SEO reasons. This is because it is the more commonly recognised name for lists of links of this kind than 'wayfinder', which has now become a stand-alone optional component. The breadcrumb markup has been updated to consist of a nav landmark region wrapping an ordered list including additional meta data, item properties and aria tags to assist users of adaptive technologies and improve SEO performance. See breadcrumb for further details on the component, and footer for code examples on how to include it appropriately.

Prior to v5.0.0

<p class="a-wayfinder" itemscope itemtype="https://schema.org/BreadcrumbList">
	<span class="u-hidden--visually">You are currently within </span>
	<span class="u-hidden--visually" aria-hidden="true" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="item" itemscope itemtype="https://schema.org/WebPage"><a class="a-wayfinder__link" href="..." itemprop="url"><span class="a-wayfinder__title" itemprop="name">...</span></a></span><meta itemprop="position" content="1" /></span>
	<span aria-hidden="true" class="a-wayfinder__separator u-hidden--visually">&gt;</span>	<span class="u-hidden--visually" aria-hidden="true" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="item" itemscope itemtype="https://schema.org/WebPage"><a class="a-wayfinder__link" href="..." itemprop="url"><span class="a-wayfinder__title" itemprop="name">...</span></a></span><meta itemprop="position" content="2" /></span>
	<span aria-hidden="true" class="a-wayfinder__separator u-hidden--visually">&gt;</span>	<span class="u-hidden--visually" aria-hidden="true" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="item" itemscope itemtype="https://schema.org/WebPage"><a class="a-wayfinder__link" href="..." itemprop="url"><span class="a-wayfinder__title" itemprop="name">...</span></a></span><meta itemprop="position" content="3" /></span>
	<span aria-hidden="true" class="a-wayfinder__separator u-hidden--visually">&gt;</span>	<!-- Level 4 to last level -1 -->
	<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="item" itemscope itemtype="https://schema.org/WebPage"><a class="a-wayfinder__link" href="..." itemprop="url"><span class="a-wayfinder__title" itemprop="name">...</span></a></span><meta itemprop="position" content="..." /></span>
	<span aria-hidden="true" class="a-wayfinder__separator">&gt;</span>	<!-- Last level ( previous level to current page ) -->
	<span aria-hidden="true" class="a-wayfinder__separator a-wayfinder__separator--last">&lt;</span> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="item" itemscope itemtype="https://schema.org/WebPage"><a class="a-wayfinder__link a-wayfinder__link--last" href="..." itemprop="url"><span class="a-wayfinder__title" itemprop="name">...</span></a></span><meta itemprop="position" content="..." /></span>
</p>

v5.0.0 wayfinder

<div class="a-wayfinder">
	<p class="u-hidden--visually">You are currently within </p>
	<ol class="a-wayfinder-list">
		<li class="a-wayfinder-list__item">
			<a class="a-wayfinder-link" href="...">
				<span class="a-wayfinder-link__inner">...</span>
			</a>
		</li>
		<li class="a-wayfinder-list__item">
			<a class="a-wayfinder-link" href="...">
				<span class="a-wayfinder-link__inner">...</span>
			</a>
		</li>
		<li class="a-wayfinder-list__item">
			<a class="a-wayfinder-link" href="...">
				<span class="a-wayfinder-link__inner">...</span>
			</a>
		</li>
	</ol>
</div>

v5.0.0 breadcrumb

<footer class="m-footer t-accent-dark">
	<div class="l-content-container">
		<h2 class="u-hidden--visually">Footer</h2>
		<nav class="a-breadcrumb" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
			<p class="u-hidden--visually">You are currently within </p>
			<ol class="a-breadcrumb-list">
				<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<meta itemprop="position" content="1" />
					<a class="a-breadcrumb-page" itemprop="item" href="...">
						<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
					</a>
				</li>
				<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<meta itemprop="position" content="2"  />
					<a class="a-breadcrumb-page" itemprop="item" href="...">
						<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
					</a>
				</li>
				...
				<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<meta itemprop="position" content="..." />
					<a class="a-breadcrumb-page" itemprop="item" href="..." tabindex="-1" aria-current="page">
						<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
					</a>
				</li>
			</ol>
		</nav>		[ Footer content ]
	</div>
</footer>

• View code changes for earlier releases
• View code changes for beta releases