CDN links and release log

Added

• Video hero banner: Ability to disable the video at mobile, falling back to a standard hero banner, for when the video hero is not appropriate for small screens. This is acheived by the addtion of the modifier class m-hero-video--not-mobile.
• Application and app store buttons: Component added to offer consistency across Abeille Assurances websites for application and app store buttons and their associated accessible states.

Updated

• Adjustments have been made to the initial JavaScript setup to enable better error monitoring and additional security.
• Video hero banner: To improve user experience, we now recommend that the autoplay attribute is no longer included; this ensures that motion preferences are guaranteed to be upheld, as well as having the added benefit of the video quality being updated prior to the video playing. The poster image should also now be a transparent svg rather than an image from the video, allowing for appropriate sized hero image to be displayed while the video is loading, when animation is turned off, or when JavaScript is not available.
• Modal: The modal positioning code has been updated to make use of CSS Flexbox, rather than relying on JavaScript to position the modal correctly. This simplifies the code and also makes the positioning of the modal more reliable, particularly when elements inside the modal cause it to change size.
• Show more: Update functionality to provide support for a wider range of content types where the original content need to remain in roughly the same position within the DOM. This helps to to ensure that anything tied functionally to the content continues to display correctly.

Fixed

• Various fixes have been put in place for Wallet, including:

  • Card replay now correctly shows the expiry date with the '/' when the value auto formatted.
  • Very long names on very narrow tablet displays now wrap rather than overflowing the content area.
  • 'Add card' button has now been disabled until all inputs have values.
  • Tabbing at mobile is now contained within the visible carousel area, rather bypassing the 'Next' button and jumping between them.
  • Various minor issues with the print stylesheet have been corrected.
• Secondary navigation: Fix for JavaScript error occuring if current page text for 'in section' variant was clicked.
• Predictive search: Fix for JavaScript incompatability with IE11.

Paths

Fixed

• Show more: Fix issue where JavaScript errors could occur if a show more started the non paragraph content.

Paths

Updated

• It is recommended that all landmark elements have a unique label to aid assistive technology users with their understanding of the page they are viewing and its structure. The following components have been updated to include unique labels:

  • Masthead
  • Stand-alone global navigation
  • See also card

• The media player can now be controlled programatically to play, pause, mute, set and get volume, set and get captions and their settings and set and get a particular point within a media file.

  Components this affects are:

  • Video player
  • Audio player

• aria-live="polite" has been removed from notification cards as this function is already performed for screenreaders by role="status".

  Components this affects are:

  • Accessibility settings
  • Notification patterns
  • Wallet - add card
  • Wallet - edit card

• FAQ panels can now be controlled programatically to open/close a single FAQ or open/close all open FAQs.

  Components this affects are:

  • FAQ panel
  • FAQ panel right
• All polyfill files used with Framework are now being loaded only if the browser requires them, and as part of the initial setup for RequireJS, meaning they will always be available to any components loaded without having to specifiy the dependancy within the JavaScript module. Stand-alone global nav continues to load the polyfill files for all browsers to ensure any required features are available for the module being loaded. These changes have been made in order to improve page performance by reducing page weight and processing time for modern browsers.
• Accessibility settings: Accessibility settings can now be controlled programatically to turn animation preference on and off.
• Notification patterns: Notification cards with close link can now be controlled programatically to close them.
• Contextual help: Contextual help can now be controlled programatically to close the contextual help box/modal.
• Forms introduction: Additional spacing has been added before the last button / button group on a form. The previous spacing means buttons appear to have a stronger relationship with the form elements immediately above them than all other form fields, which is misleading; this change offers a greater degree of cognitive separation from the element immediately above. The exceptions are when there is only one form input, and on login/register pages, where the spacing should be the standard 30px.
• Textarea: aria-live="assertive" has been removed from the notification message created by the JavaScript as this function is already performed for screenreaders by role="alert"
• Cookie policy: Cookie policy can now be closed programatically.
• Masthead: The extra content area will now display within the masthead bar at desktop to reduce Cumulative Layout Shift (CLS) for the majority of occurances of masthead.
• Sticky CTA bar: The sticky CTA bar can now be controlled programatically to open and close the show/hide variant.
• Opening times: Opening times can now be closed programatically.

• Show more:

  • Now supports basic HTML elements within the introductory paragraph such as strong and sup.
  • Show more components can now be controlled programatically to open/close their content, as well as update their settings.
• Chapter index: Chapter index can now be controlled programatically to scroll to a section by index or id.

Fixed

• Fix for masthead not supporting the logged in menu without any logged out menu items. The locale file now contains an additional entry ('menuText') for the masthead menu link label for if no menu link is provided within the markup. The following components have been updated:

  • Masthead
  • Stand-alone global navigation
• Cards: Spacing issues corrected where margin removal rules were not sufficiently specific.
• Contextual help: Issues where icons jumping rather than animating when triggered, and were not displaying correctly in Firefox.

• Show more:

  • Issue where if the show more content length could be considered over the character limit for the breakpoint due to whitespace at either end of the content string, causing the show more button to be displayed when not required.
  • Issue where activating the show more/less button quickly in succession could result in the content being completely hidden from view.
  • Issue where spacing was too small when the content length was below the limit, when used within form rows, so no button is required to show more/less.
  • Issue where the default upper limits could potentially be overwritten by other show/more components on the page, causing the truncation of the introductory paragraph to be incorrect.

Deprecated

• Cookie policy: Following legal changes surounding the use of cookies on websites, this component has been deprecated and replaced by a more comprehensive third party solution.

Paths

Fixed

• Stand-alone global navigation: Fix for close link not displaying and additional white space at the top of the megamenu area, when using the standalone version of the masthead, following the addition of the close link and position change to the view all link in v5.8.0.

Paths

Updated

• It is now recommended that the data attribute data-module-load="true" is added alongside data-module="o-modal" in order to force loading of the JavaScript on page load instead of it being lazy loaded. This helps mitigate issues where modal content could remain visible until the anchor it is associated with comes into view.

  Components this affects are:

  • Notification patterns
  • Wallet, add card
  • Wallet, edit card
  • Wallet, remove card
  • Wallet, stored cards
  • Modal
  • Full screen modal

• Checkbox multicard selects (all variants) can now be controlled programatically to to deselect all or to select/deselect a set of multicard select cards.

  • Checkbox multicard select, basic variant
  • Checkbox multicard select, complex variant
  • Checkbox multicard select, comprehensive variant

• Slider and slider range can now be controlled programatically to set and get the value of the slider, as well as to update the slider settings. It is also now possible to initialise a slider or slider range via JavaScript by providing the slider settings as an object instead or data attributes on the slider element.

  • Slider
  • Slider range
• Carousel: Carousels can now be controlled programatically to move forward and backwards by a single slide or move to a particular slide.
• Checkbox multiselect: Checkbox multiselect can now be controlled programatically to select/deselect all, select/deselect a selection of checkboxes and close the multiselect.
• Plus/minus number textbox: Plus/minus number textbox can now be controlled programatically to set the displayed value and the minimum and maximum possible values.
• Radio segmented controls: Radio segmented controls can now be controlled programatically to select a particular option or clear any current selection.
• Textarea: Textarea with optional character count can now be controlled programatically to set and clear the value, as well as update the maximum number of characters allowed.
• Textbox format: Textbox format can now be controlled programatically to set and clear the value.
• Wallet: Credit card number field can now be controlled programatically to set and clear the value.
• Modal: Modals can now be controlled programatically to open, close or destroy a particular modal.
• Full screen modal: Modals can now be controlled programatically to open, close or destroy a particular modal.
• Opening times: The markup for the actual definition list has changed to use the standard a-list-opening-times markup. This also provides a minor styling change, in that the days become bold.
• Show/hide: Show/hide controls can now be controlled programatically to open, open all, close and close all controls within a group.
• Primary tabs: Primary tabs can be controlled programatically to open a specified tab and optionally scroll to it.
• Tabs: Section tabs can be controlled programatically to open a specified tab and optionally scroll to it.
• List: Markup for opening times lists has been updated to include additional meta schemae to assist with SEO. Minor spacing changes have also been made to ensure consistency with the show/hide component variant (5px fewer for the right padding and 5px bottom margin added, both for the days).

Fixed

• Slider and slider range inline playback variant was not displaying the playback at all.

  • Slider
  • Slider range
• Show more: Fix for default description not being replaced by the one set within the locale settings for the website.

• Show/hide:

  • Issue where sections may not have correctly auto opened on initial load when nested within other show/hide sections.
  • Issue where show/hide chevron could end up displaying the opposite way to the others within the same component.

Paths

Fixed

• Masthead: Fix for the megamenu not closing when the skip to content link is pressed while the megamenu is open.
• Tabs: Fix for issue with the lazy loading tabs where a duplicate tabs would be created with the first throwing JavaScript errors if used, if a tab heading was included outside of the static tab content area.

Paths

Added

• Breadcrumb: New breadcrumb variant for use at the top of pages, replacing the wayfinder and footer variant of the breadcrumb, designed to help with user orientation whilst navigating Abeille Assurances' websites. Note that the class a-breadcrumb-list__item--parent is required for the new breadcrumb variant to correctly hide all but the parent level link at mobile and tablet screens sizes.

Updated

• The controls for various components have been updated from anchors to buttons following feedback from accessibility audits which flagged that our current pattern for elements which show and hide content are potentially confusing to screen reader users. These alterations have been made within the JavaScript, so no markup changes are required. The components affected are:

  • Opening times
  • Show / hide
  • Show more
  • FAQ panel
  • FAQ panel (right hand side variant)
  • Help utility section

• Support for inclusion of a full breacrumb within the following components has now been added to maintain cross site navigation consistency when using the a breadcrumb at the top of pages instead of the now deprecated footer variant of the breadcrumb.

  • Long form hero
  • Hero
  • Shallow hero
  • Video hero
  • Primary tabs
• Carousel: Card carousels should revert to using div elements rather than ul elements due to an issue with Javascript-injected code breaking semantic markup patterns. This does not affect functionality, but could cause testing errors due to the incorrect nesting of list items within lists.
• Breadcrumb: The chevrons used within the footer variant of the breadcrumb have been reduced in size slightly to match with the new breadcrumb variant.
• Secondary navigation: Basic markup for the nav element has been updated to include aria-label="Secondary navigation" to help with landmark signposting for assistive technologies. This is not a breaking change, but we recommend making the addition where possible.

• Masthead:

  • Addition of a close menu link within the mega menu to aid users in closing the menu.
  • The menu link text no longer changes to "Close" when the menu is open to maintain consistency of navigation, for screen reader users in particular.
  • The section landing page links at tablet and desktop are now displayed at the top of the mega menu area for each relevant section; this change responds to user research which showed users were struggling to find them in their current location (at the bottom, above the "Get support" bar). It is possible to revert the links to their original location, in order to maintain consistency across an application, by applying the class o-masthead--landing-page-bottom to o-masthead.
• Modal: An additional label has been added to the modal content container to better identify it to assistive technologies. This can be altered via the locale settings, but will default to 'Modal content' or equivalent where no specific entry is included.

Fixed

• Video hero banner: Fix for dark overlay, used for ensuring colour contrast, not being correctly applied to the hero video.
• Wayfinder: Fix for spacing above wayfinder when placed within different l-section areas.
• Filter tags: Fix for issue where select all checkboxes would not always be cleared on smaller screens when tags were removed from the filter. Some adjustments have been made in order to improve support for IE11, where it was struggling to reliably draw the modal view correctly.
• Full screen modal: Fix for extra large gap below the full screen modal when modal close is disabled.
• Show more: Fix for page always scrolling on close of show more, the scroll position will now only adjust if open/close button has been pulled off the top of the screen.

• Tabs:

  • Fix for nested tab modifier no longer working as documented.
  • Fix for lazy loading tabs colouring incorrectly when placed on a dark accent colour and JavaScript off.
• Long form hero: Fix for double dark overlay being applied to the hero when JavaScript is loaded.

Deprecated

• Breadcrumb: The footer variant of the breadcrumb has been deprecated and replaced by a new version of the breadcrumb that should be used at the top of pages in place of the wayfinder and the footer variant of the breadcrumb. This change has been made to help with user orientation whilst navigating Abeille Assurances' websites.
• Wayfinder: Wayfinder has been deprecated and been replaced by a new version of the breadcrumb that should be used at the top of pages in place of the wayfinder and the footer variant of the breadcrumb. This change has been made to help with user orientation whilst navigating Abeille Assurances' websites.

Paths

Fixed

• Buttons: Fix for disabled button text colour being incorrectly set for default, legacy, business and b2b themes in v5.7.0.
• Masthead: Fix for all icons within the 'Get support' bar displaying with the edit icon.
• Stand-alone global navigation: Additional reset styles have been added to standalone to help counteract styles being included on some MyAviva pages.

Paths

Added

• Managed themes: Latest brand theme, named "2021" is now available for use. This theme will be made the default theme in v6.0.0.

Fixed

• Download cards: Fix for the colour of the download icon when placed on some accent colour combinations.
• Keyline cards: Fix to remove keylines from any cards with dark accents applied to them.
• Filter tags: Fix for issue where if any additional markup was included between any of the checkboxes and their associated label, the filter tags would not populate correctly.
• Show more: Fix for content from show more component invisibily overlaying the page obstructing interaction with the top portion on the page.

Paths

Fixed

• Cards: Fix for 50/50 cards which was causing the image to not fill the full depth of the card as required.
• Checkbox: Positioning for pictorial checkbox sprites has been updated.
• Radio buttons: Positioning for pictorial radio sprites has been updated.
• Radio segmented controls: Positioning for pictorial radio sprites has been updated, and the padding for the labels has changed to sneure that the minimum height of the controls is 50px, to match other form controls.
• Masthead: The JavaScript has been updated so that it does not error if the required hidden text element for skip links has been omitted.

Paths

Updated

• Source Sans Pro font files used have been updated to the latest font release by Adobe, now named Source Sans 3. The font update includes various optimisations and bug fixes with some characters.

• To improve page load and layout times the additional attributes decoding, width and height must be set on all inline images.

  For specific markup examples see the individual components documentation.

  • Audio card
  • Author and contributor box
  • Cards with keylines
  • Cards with news categories and icons
  • Cards with title sections
  • Checkbox
  • Checkbox multicard select, basic variant
  • Checkbox multicard select, complex variant
  • Checkbox multicard select, comprehensive variant
  • Data replay
  • Doughnut chart
  • Download cards
  • Editorial cards
  • Form affix
  • Gallery card
  • Heading group
  • Hero
  • Icon cards
  • Imagery
  • Large video player
  • Legal supporting text and image
  • Link cards
  • Long form hero
  • Masthead
  • Navigation cards
  • Numeric cards
  • Payment options
  • Pie chart
  • Primary tabs
  • Promo cards with imagery
  • Radio
  • Radio singlecard select, basic variant
  • Radio singlecard select, complex variant
  • Radio singlecard select, comprehensive variant
  • Report cards
  • Review cards
  • Secondary navigation
  • Section feature banner
  • Section tabs
  • Stand-alone global navigation
  • Story deck
  • Tertiary cards
  • Video
  • Video hero
  • Wallet

• Markup has changed to use the picture element to improve page performance by allowing different sized images to be served for different screen sizes.

  For specific markup examples see the individual components documentation.

  • Checkbox multicard select, basic variant
  • Checkbox multicard select, complex variant
  • Checkbox multicard select, comprehensive variant
  • Radio singlecard select, basic variant
  • Radio singlecard select, complex variant
  • Radio singlecard select, comprehensive variant
  • Editorial cards
  • Cards with keylines
  • Link cards
  • News cards
  • Numeric cards
  • Promo cards with imagery
  • Tertiary cards
  • Cards with title sections
  • Card carousel
  • Section feature banner
  • Story deck
  • Heroes
  • Shallow heroes
  • Video heroes
  • Videos
  • Audio cards (long form article)
  • Gallery cards (long form article)
  • Large videos (long form article)
  • Long form heroes (long form article)
• Buttons: Documentation has been added to make it clear that the aria-disabled="true" attribute should be used alongside the is-disabled class when creating disabled buttons. This is to ensure that the disabled state is not only indicated visually (by the class) but also announced by screen readers (via the aria attribute).

• Masthead:

  • The 'Hi whoever' greeting for logged in users has been hidden from screen readers then moved using JavaScript so that it is read out independently of the 'Your account' link. This is as a result of accessibility testing, which showed that some users were being confused by having the greeting announced as part of the link.
  • The examples for all other skip links have also been updated to better highlight correct markup to use for accessibility reasons - the visible part of the links should come first, with the visually hidden descriptor for screen readers following.
• Quote: Colours used for quotes and block quotes on the B2B and Business themes have been updated from pink to Boston Blue and Raven Black respectively. This is to better harmonise the components when used with these themes.

Paths

Added

• v9.0.1 of Highcharts and Highstock is now available for use. See core javascript files for reference.
• Link cards: Component added as an accessible replacement for navigation cards. This variant presents less verbose content to screenreaders, which means they do not fail WCAG 1.3.1.
• Timeline: Additional statuses have been added for inactive and rejected items, while heading groups (including those with icons) can now be used in place of simple h2 and h3 tags; guidance for these has been included in the documentation.

Updated

• Alternative markup has been created to allow cards to be better linked semantically and to prevent failure of WCAG 1.3.1. These changes are currently optional, but although the old code will continue to work for Framework v5, it has been deprecated and will be removed from v6. This change affects all card types.

  • Editorial cards
  • Download cards
  • Icon cards
  • Cards with keylines
  • Cards with news categories and icons
  • Cards with title sections
  • Numeric cards
  • Promo cards
  • Promo cards with imagery
  • Report cards
  • Review cards
  • Tertiary cards
  • Video (containing video card blocks)

• Additional aria attributes are now recommended to be applied across all form fields/rows so as to aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occurred.

  All form row help, explanatory text, form row instructions and form row errors must have a unique id assigned to them and be appropriately linked to either the individual form input or the form row using aria-describedby.

  All inline form error messages should now start with the hidden text 'Error: ' so that when read by out by a screen reader it is immediately clear that the text being read is an error message.

  All erroring form fields (or fieldset if a group or radios/checkboxes) must have aria-invalid="true" set on them.

  For specific markup examples see the individual components documentation.

  • Accessibility settings
  • Checkbox
  • Checkbox multicard select - basic variant
  • Checkbox multicard select - complex variant
  • Checkbox multicard select - comprehensive variant
  • Checkbox multiselect
  • Checkbox toggle
  • Contextual help
  • Date
  • Date range
  • Dropdown
  • Explanatory text
  • File upload
  • Filter tags / results display
  • Form affix
  • Form assumptions
  • Form help show more
  • Form row
  • Form row group
  • Form row instruction
  • International-contact
  • Plus/Minus number textbox
  • Predictive search
  • Preferred contact
  • Progressive disclosure
  • Radio
  • Radio - segmented controls
  • Radio singlecard select - basic variant
  • Radio singlecard select - complex variant
  • Radio singlecard select - comprehensive variant
  • Show more
  • Slider
  • Slider range
  • Textarea
  • Textbox
  • Textbox format
  • Wallet
  • Wallet, add card
  • Wallet, edit card

• A number of vendor JavaScript files have been updated to their latest stable releases, ensuring files hosted contain the latest features, bug fixes and security patches.

  Vendor file	Original version	Updated version
  jquery	v3.5.1	v3.6.0
  jquery.validate	v1.19.2	v1.19.3
  jquery.validate.unobtrusive	v3.2.11	v3.2.12
  dayjs and associated plugins	v1.8.23	v1.10.4
  pikaday	v1.8.0	v1.8.2
  v8 Highcharts, Highstock, highcharts-3d, highcharts-more plus all sub libraries/modules	v8.2.0	v8.2.2
  v7 Highcharts, Highstock, highcharts-3d, highcharts-more plus all sub libraries/modules	v7.0.2	v7.2.2

• The fallback font list has been reviewed and adjusted to allow use of font alignment techniques. F-mods have been applied to improve the alignment between the brand font and the fallback fonts used. Both these changes have been made in order to help reduce layout changes once the brand font loads. No significant differences will be seen yet but these will form the foundations for further improvements in the future.
• Notification patterns: The colour for the inactive notification tag has been updated from #aaa to #858392, to provide better consistency in the colours used within Framework.
• Date: The disabled dates colour within the datepicker has been updated from #9b9b9b to #b8b8b8, to provide better consistency in the colours used within Framework.
• Date range: The disabled dates colour within the datepicker has been updated from #9b9b9b to #b8b8b8, to provide better consistency in the colours used within Framework.
• Timeline: Status pins have been updated to include an icon and the event stamp should now also include the status title in text at the top of the content area. These changes have been made in order to aid user comprehension and to assist users where colour visibility could be an issue.
• Masthead: The colour of the top border on the 'Get support' bar has been updated from #eee to #ccc, to provide better consistency in the colours used within Framework.
• Site switcher: The colour of the border and the active background on the transparent buttons within the site switcher has been updated from #888 to #737373, to provide better consistency in the colours used within Framework.
• Filter tags: The colour of the dividing line between the form fields and results has been updated from #eee to #ccc, to provide better consistency in the colours used within Framework.
• Horizontal value bar: The colour for the inactive status badge and value bar have been updated from #aaa to #858392, to provide better consistency in the colours used within Framework.
• Body copy: The underline colour for links when placed on Abeille Assurances Yellow has been updated from #999 to #737373, to provide better consistency in the colours used within Framework.

Fixed

• jquery.validate.unobtrusive was failing to load due to incorrect references to file dependancies. These references have now been corrected resolving the errors.
• Timeline: JavaScript for controlling the background colour of large timeline items when expanded was not working, this has now been fixed.
• Masthead: Coloured border at the bottom of the masthead bar was not being overlaid by menu items.
• Audio card: Soundcloud audio player width was being contstrained on small tablets even if no image was being used with the component.

Deprecated

• Navigation cards: Alternative markup has been created to allow cards to be better linked semantically and to prevent failure of WCAG 1.3.1. These changes are currently optional, but although the old code will continue to work for Framework v5, it has been deprecated and will be removed from v6; instead, move to using link cards.

Paths

Updated

• Guidance regarding social sharing links has been updated to recommend containing more descriptive text eg. "Abeille Assurances' Twitter feed" or "Share this article on Twitter" instead of simply "Twitter" in order to make it clearer to users of assistive technologies what the link will do. See social link, footer and social sharing bar for reference.

• The background and border colour of form components has been updated to maintain consistency and ensure the minimum contrast of 3:1 for non-text elements is met across all form elements. The background colour when placed onto white is now #f9f9f9 and for any other background is #fff, the border colour has been updated from #aaa to #737373.

  • Checkbox
  • Checkbox multicard select - basic variant
  • Checkbox multicard select - complex variant
  • Checkbox multicard select - comprehensive variant
  • Checkbox multiselect
  • Checkbox toggle
  • Date
  • Date range
  • Dropdown
  • File upload
  • Filter tags / results display
  • Form affix
  • Form assumptions
  • International-contact
  • Plus/Minus number textbox
  • Predictive search
  • Preferred contact
  • Progressive disclosure
  • Radio
  • Radio - segmented controls
  • Radio singlecard select - basic variant
  • Radio singlecard select - complex variant
  • Radio singlecard select - comprehensive variant
  • Slider
  • Slider range
  • Textarea
  • Textbox
  • Wallet

• The border of the checkbox multicard select and radio singlecard select have been updated from #aaa to #ccc for consistency with tertiary cards.

  • Checkbox multicard select - basic variant
  • Checkbox multicard select - complex variant
  • Checkbox multicard select - comprehensive variant
  • Radio singlecard select - basic variant
  • Radio singlecard select - complex variant
  • Radio singlecard select - comprehensive variant
• Buttons: The border colour for secondary buttons has been updated from #ccc to #737373 to ensure the minimum contrast of 3:1 for non-text elements is met.
• Data group: Added support for standard bullets to be used with data group list items for use with lists of data such as insured vehicles on a policy. The spacing between data group list items has also been reduced to 5px to improve component consistency. The font size used within the smaller data size variant has been corrected to 20px, matching with standard framework font sizing an line heights.

Fixed

• Textarea: Styling for optional character count was not being correctly included in the CSS files.

Paths

Added

• Ability to force hidden components to load their JavaScript modules in order to fix issues with layout calculation issues due to JavaScript having not loaded prior to being made visible. See how to extend the Framework JavaScript for reference.
• Form row instruction: Form row instruction component added to replace the use of placeholder text across all form components in order to improve accessibility. The use of placeholder text can increase cognitive load due to requiring the user to remember the information provided as the placeholder eg. the format required for date entry, as the placeholder text is not visible once any value is entered into the field. Placeholder text can also cause information to be read out twice, where the value of the placeholder has the same or similar value to that of the field's associated label. It is now recommended that where an input requires a specific format to be used, this information is displayed permanently between the label and the field, thus ensuring compliance with WCAG 3.3.2.
• Heading group: Heading groups with icons added as an option to help enhance understanding of headings through visual association and improved at-a-glance comprehension.

Updated

• The font size used for checkbox, checkbox toggle, international contact, preferred contant, radio and segmented controls has been reduced from 20px to 16px following the darkening of the green used on forms so that it now passes WCAG AA contrast levels for standard sized text. See checkbox, checkbox toggle, international contact, preferred contant, radio and segmented controls for reference.
• As a result of the change in guidance around the use of placeholder text and the addition of the form row instruction, Date, Textarea, Textbox, Textbox format, Wallet and Wallet - Add card no longer use placeholder text. Additionally, placeholder text colour has been changed from #999 to #444 across all form elements to ensure a minimum colour contrast of 4.5:1 is maintained to comply with WCAG 1.4.11.
• The ability to print all show/hide or tab sections where there is a legal requirement for all information to be available when printed has been added through the use of the modifier class. See primary tabs and section tabs and show/hide for reference.
• Tabs and show/hide components now support anchoring to content within them, including tabs or show/hides nested within them. It is now recommended that the JavaScript for these components is not lazy loaded to ensuring anchoring to any links works as expected. See primary tabs, section tabs and show/hide for reference.

• It is now recommended that the data attribute data-module-load="true" is added alongside data-module="m-showhide" and data-module="m-tabs" in order to force loading of the JavaScript on page load instead of it being lazy loaded. This helps mitigate issues when anchoring to elements within the page and reduces large amounts of page reflow as users interact with the page.

  Components this affects are:

  • Primary tabs
  • Section tabs
  • Show/hide
  • Audio
  • Help utility section
  • Video
• Notification patterns: The documentation page has been updated from 'Global notifications' to make it clearer that the section is broader than just top-level straps. As part of this, status badges have been extracted from the Horizontal value bar component, renamed as Notification tags and included with the other notification patterns so that they can be used with other components (also see horizontal value bar for reference). A notification modal has also been added which inserts a notification icon inside a no-external-close variant of a modal (ie, it cannot be closed by clicking outside the modal, nor by using the escape key, only by clicking on the CTA within the modal itself).
• Date: The datepicker has been adjusted, removing the clear and confirm buttons following observations showing customers were struggling with the component. The datepicker now immediately updates the date in the text box on date selection.
• Progressive disclosure: Careful nesting can now be used to allow multiple answers to link to the same set of follow-up questions, as well as to allow any one answer to a question to only link to one set of follow up questions. Currently, answers in different sections cannot link to question sets within different nesting groups.

• Textbox format:

  • It is now recommended that the date input is used when requesting full date entry to allow the user the choice input method. This change has been made as it was observed that some users were confused that there was no datepicker option available to them.
  • Placeholder text should also no longer be used to display the required format for date entry as this requires users to remember the format due to it disapearing as soon as the user types. Instead the required format should be displayed as explanatory text between the label on the textbox, statisfying WCAG 3.3.2.

• Masthead:

  • Horizontal spacing of the masthead at tablet and desktop has been reduced to allow additional space for items placed within the masthead.
  • Edit icon for a "Manage your policy" link within the "Get support" bar, using the class o-masthead-support__link--claim, has been added for use.
• Sticky CTA bar: The sticky CTA bar has been visually modified to include the word 'reviews' next to the review count to make it clearer to users what the stars and number relates to. The existing markup (with previous wording) still works, but we encourage teams to update their markup where possible.

• Filter tags:

  • To ensure compliance with WCAG 4.1.3 it is now recommended that the main H2 heading for the Filter tags/results display is descriptive of the task that can be acheived, instead of replaying the amount of results found. The feedback regarding the number of results should now be placed alongside the results display component, ensuring that the feedback regarding the updated number of results is clear to users on all devices. This should also be combined with the use of aria-live regions to ensure any updates are announced to screen reader users. Any errors that occur during filtering results should also be clearly announced to users via the use of aria-live.
  • The modifer m-results-display--total and the element it is applied to are now available.
• Horizontal value bar: Status badges have been extracted from this component and renamed as Notification tags so that they can be used with other components. We encourage all users to update to the new classes, as the existing markup (using m-value-bar__status) is being deprecated and will be removed from v6 of the Framework.

Fixed

• Issue with auto-formatted text fields not allowing copy and paste via the keyboard and formatting invalid content.
• Brand font not being correctly applied across all elements when using stand-alone global nav.
• Issue where a show more area would remain too tall on first opening if other JavaScript module was nested inside eg. a show/hide section inside the show more.
• Issue where show/hide and show more components could end up scrolling off screen / scrollable area when closed.
• Issue where multiselect overlay variant would close on selection of its scrollbar.
• Issue where if a multiselect component was at the very bottom of a page, the page may not be made tall enough once opened to view all options.
• Issue where a multiselect component could be obscured by the page footer when open.
• Issue where the value displayed within the multiselect component would not reliably truncate when required on resize, in particular fast resize.

• Various issues with the filter tags / results display component including:

  • Keyboard navigation was difficult and/or confusing within the filter modal
  • Scrollbars were not reliably being displayed on inital load of the filter modal
  • No print styles were present for this component
• Fix for various print styling issue across components.
• Various fixes for modals to prevent styling and redraw issues when resizing.

Paths

Added

• Components for use within a long form article:

  • Audio card
  • Image gallery card
  • See also card
  • Large video player
  • Social sharing bar
• Audio card: Audio card added to allow users to listen to sound bites, conversations and interviews supporting the long form article content.

Updated

• Video player: Full 12-column grid width variant added for desktop. This option was required for the long form article template, but has been made widely available as part of that process. No markup changes required other than the addition of the .m-large-video class to the outer wrapper

• Social links:

  • Email option has been made available for use to support the addition of the social sharing bar for long form articles.
  • The hover and focus state for the icons have been adjusted to improve accessibity and compatability with theme colours. Instead of changing to the appropriate brand colour for the company, eg. Twitter changing to Twitter blue, the icons now change to 50% darker on light accent background and 50% white on dark accents. On focus, the social icon will now receive a thin, dashed outline so that focus no longer solely relies on colour.

Fixed

• Italic text was not being displayed consistently across browsers, in particular Chrome was not displaying italicised text at all.

Paths

Added

• Long form article template for segmenting large amounts of written content into bite-sized, tangible and digestible sections. Components for use within this are:

  • Long form hero
  • Author and contributors box
  • Chapter index
  • Read next article

Updated

• The maximum selected message displayed on the overlays of checkbox multicard selects is now set via the locale settings rather than in the HMTL; this has resulted in minor HTML changes, but the pre-existing markup will still work. For the complex and comprehensive variants, the rest of the overlay content is still editable as previously, although the m-card-max div has been changed to o-card-select__max-message, and the h3 element is no longer required (again, the pre-existing markup will still work). See checkbox multicard select - basic variant, checkbox multicard select - complex variant and checkbox multicard select - comprehensive variant for reference.

Paths

Fixed

• Issue with masthead where user would be scrolled to the top of the screen when resizing from tablet/desktop to mobile.
• Issue where selected styles would not be removed from the segmented control if the input selection was removed, for example for a form reset.
• Utility smooth scroll function was timing out too early with native smooth scroll, which could cause the call the callback to be called function too early.
• Issue with stand alone global navigation css not applying variable fonts correctly.

Paths

Added

• Additional variants have been added to masthead, replacing the need for the Partner theme when combined with automated theming. These include:

  • Alternative logo - increases the overall height of the masthead to accomodate a greater variety of logo shapes and sizes, for example logos which are tall and narrow.
  • With chevrons - includes chevrons beside all the mega dropdown links within the masthead; originally available only within the partner theme.
  • Powered by Abeille Assurances - includes a 'Powered by Aviva' logo within the masthead mega dropdown/support bar.
  • Dark background - changes the masthead to use a dark background with white text and icons.

  The default masthead can now also accomodate slightly larger Abeille Assurances corporate logos, for example Abeille Assurances Investors.

  See masthead for reference.

• New simple masthead variant added that centers the company logo at all breakpoints. This is for use only on pages with restricted width centre-aligned content, such as login forms. See masthead for reference.
• RequireJS configurations, component and locale settings can now be included as indivudual JavaScript files which will then safely loaded asynconously during the JavaScript setup process. This can help with page performance by allowing the settings files to be cached, rather than having to be included inline on every page. See how to extend the Framework JavaScript guide for further details.
• 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 and wayfinder for reference.
• Form help show more: A specific variant of show more has been created for use within forms.
• Form row group: Support for checkbox and radio groups has been added.
• Secondary navigation: Secondary navigation component created to unify the former in-page, linear and non-linear navigation components into a single, coherent secondary navigation, for use below hero areas and as a stand-alone component for use elsewhere on pages.
• Auto themes: Automated theming option added.
• Managed themes: Legacy theme added to provide access to the brand theme that is used throughout v4.X.X with the default theme providing the latest brand accent colours. Business and B2B themes are not affected.

Updated

• 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 help improve page performance. See base template for reference.
• The charset and http-equiv meta tags have been removed from the base 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. See base template for reference.
• RequireJS is now set up to support multiple versions. Thie enables two seupts to be run side-by-side when working with third party code which is also dependent on Require.
• JavaScript modules are now loaded automatically using mutation and intersection observers.
• Support has been removed for jQuery within all Framework modules; consequently, jQuery is no longer loaded by default.
• Following WCAG 2.5.5 guidelines, filter tag and result display links have an increased target size to improve accessibility on touch devices. See filter tags / results display for reference.
• Following WCAG 2.5.5 guidelines, telephone number links have an increased target size to improve accessibility on touch devices. See call us panel for reference.
• 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 to editorial cards, see editorial cards. For navigation cards, the 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. Be aware that other card types using 'read more' type links will need markup changes accordingly.
• Following WCAG 2.5.5 guidelines, checkbox toggles have an increased target size to improve accessibility on touch devices. The visible height of the toggle itself has not changed, with the extra height being taken from margins and padding around the element. See checkbox toggles for reference.
• Following WCAG 2.5.5 guidelines, pagination links have an increased target size to improve accessibility on touch devices. Due to the increased target size the pattern displayed at different device sizes has been adjusted. The markup has been adjusted to not only support the adjusted layout but to also further improve the accessibility of the component. See pagination for reference.
• The bottom padding of all card types has been fixed to 20px to allow consistency across components and pages, and to provide a simpler rule for content authors. See individual card type pages for details.
• Keyline dividers have been renamed as divider lines. See divider line (v5) for reference. This change affects checkbox multicard select complex, checkbox multicard select comprehensive, filter tags / results display, radio singlecard select complex, radio singlecard select comprehensive, section feature banner, accessibility settings and timeline.

• Objectfit and Scrollable JavaScript module names have been updated to match standard naming conventions. The following components have been updated as a result:

  • Cards:

    • Editorial
    • Navigational
    • Promo with imagery
    • Tertiary
    • Cards with keylines
    • Cards with news icons and categories
    • Cards with optional title sections
  • Hero (standard and shallow)
  • Section feature banner
  • Story deck
  • Table
  • Lazy loading

• The locale settings for components has been updated to match with the component naming conventions. See the change log for details. As a result, the following components have been updated:

  • Accessibility settings
  • Checkbox multiselect
  • Cookie policy
  • Contextual help
  • Date
  • Date range
  • Faq panel (standard and right)
  • File upload
  • Form row help
  • Global notifications
  • Masthead
  • Media player (audio and video)
  • Modal (standard and fullscreen)
  • Predictive search
  • Show more
  • Site switcher
  • Tabs (primary and section)
  • Textbox
  • Wallet
• The paths and browser support requirements for all extensions have been updated as part of v5. Please check the documentation for all components which form part of an extension rather than being part of the Framework core styles.

• Class names for the t-accent-light-- and t-accent-dark-- modifiers have changed to aid in theming the Framework, while the colour values themselves have also been updated to reflect the new colour palette in the recently released Brand Guidelines. The colours used within the Abeille Assurances Legacy theme were the the original default colours prior to v5.0.0, however the reduced number of colours means that some of the new colours are used more than once; this is to ensure that all of the old colours are mapped to the best new equivalent in order to prevent any jarring colour combinations being accidentally produced when switching Framework versions.

  • Accent light 1 - White (#fff)
  • Accent light 2 - Light Grey (#f9f9f9 - renamed from Lightest Grey)
  • Accent light 3 - Base Grey (#eee - renamed from Light Grey)
  • Accent light 4 - Base Blue (#e5edf8 - renamed from Lightest Blue)
  • Accent light 5 - Abeille Assurances Yellow (#ffd900)
  • Accent dark 1 - Abeille Assurances Blue (#004fb6 - mapped from legacy Light Blue (#1a61bd))
  • Accent dark 2 - Abeille Assurances Blue (#004fb6 - mapped from legacy Dark Blue (#001647))
  • Accent dark 3 - Bottle Green (#002f14 - mapped from legacy Dark Green (#0e573f))
  • Accent dark 4 - Warm Grey (#5c596d - renamed from Heading Grey, mapped from legacy Light Purple (#87378e))
  • Accent dark 5 - Plum (#4e1758 - mapped from legacy Dark Purple (#421b67)
  • Accent dark 6 - Plum (#4e1758 - mapped from legacy Pink (#c01b83))
  • Accent dark 7 - Dark Teal (#005a6c - mapped from legacy Teal (#00788a))
  • Accent dark 8 - Dark Grey (#444 - renamed from Body Copy Grey, mapped from legacy Dark Grey (#413e45))

  See accent colours for reference.

• Hover state border for segmented controls updated to match all other form controls.
• Module name for date and date range updated following the removal of the deprecated version of both components. See date and date range for reference.
• Font files, Abeille Assurances logos and favions are now stored centrally and not include within each release. This will help with page performance as the files will remained cached between framework versions. See base template and masthead for reference.
• Class naming for radio and checkbox groups has been adjusted to be consistent. See radio and checkbox for reference.
• Moment.js has been removed from the Framework and has been replaced by the lightweight DayJS.js, affecting both the a-date and m-date-range components. While no changes are required to the markup for either component, additional values are required in locale files. See date and date range for details.
• Markup and styles for Wallet edited to ensure greater consistency across add/edit/remove functions. See Wallet - add card, Wallet - edit card and Wallet - remove card for reference.
• Card carousel has been rebuilt to not use the vendor library Slick in order to simplify the code base and reduce page weight. The next and previous arrows have been increased in size to 44px for all screen sizes to comply with WCAG 2.5.5. See card carousel for reference.
• Font loading has been updated to use variable fonts in order to reduce the number of font files being loaded, increasing page performance for the majority of browsers.
• Additional hidden text has been added to numeric cards to aid in understanding when using a screen reader. See numeric cards for reference.

• Checkbox, radio and dropdown groups have been updated to use form row groups. This has resulted in class changes to the following components:

  • Accessibility settings
  • Checkbox
  • Checkbox multiselect
  • Filter tags / results display
  • Form assumptions
  • Radio
  • Segmented controls
  • Wallet

  See form row group for reference.

• The optional markup changes from v4.14.0 to ensure compliance with WCAG 2.1 are now compulsory and built into the component. This applies to checkbox multicard select complex, checkbox multicard select comprehensive, checkbox toggle, radio singlecard select complex, radio singlecard select comprehensive, footer, doughnut chart and pie chart.
• Animations and transitions will automatically be disabled if a user has turned them off on their device. The accessibility settings component will display an appropriate message to the user to inform them of this. The component now no longer has a relience on the framework cookie policy cookie being set being it can be used, instead it used clear messaging to inform the user to use the feature cookies are required. See accessibility settings for reference.
• The cookies set by both the cookie policy and accessibility settings components now have the attribute Secure set to 'true' and SameSite set to 'Strict'.
• Breadcrumb and wayfinder links now have a minimum width of 44px to improve cross-device usability. See breadcrumb and wayfinder for reference.
• All animations and transitions, including fades, are now disabled when animation is disabled to aid in preventing automation test failures due to race conditions with animation timings.
• Copy marked up with em will now consistency be displayed italicised across browsers.
• Aria role="group" and role="radiogroup" have removed from various elements as the role is already implied by the elements themselves. This applies to checkbox, checkbox multiselect, preferred contact and slider range, form row, radio buttons, radio segmented controls, radio singlecard select basic, radio singlecard select complex, radio singlecard select comprehensive, wallet and accessibility settings.

• Accessibility settings:

  • Will now set jQuery.fx.off appropriately if jQuery is already present on the page. If any module loads jQuery as a dependancy, it must be 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 either cookies to store preferences, or the use of the device's reduced motion settings.
  • The cookie set by this component now has the attribute Secure set to 'true' and SameSite set to 'Strict'.
  • The locale setting format has been updated to match with the component naming conventions, and a message for when users have reduced motion set on their devices has been added.
  • The data attribute data-module-load="true" must now be included alongside data-module="m-cookie-policy" to ensure the JavaScript is loaded on initial page load.
  • A number of class names for the list of checkboxes have changed to align with the form row group.
• Hero banner: Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
• Shallow hero banner: Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
• Map styling: Ability to use PNG icons removed and the icons have been moved to sit within the central icon library.
• Section feature banner: Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
• Buttons: Support for buttons using the input element has been removed in favour of using the button element with appropriate type attribute applied to ensure that hover, focus and active states work correctly.

• Cards:

  • Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
  • 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.
  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.

• Download cards:

  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.
  • Last card in download list now also has bottom rule to better separate it from the CTA area.

• Icon 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 to editorial cards, see editorial cards.
  • 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.
  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.
  • Various class names have been updated to follow BEM conventions.

• Keyline cards:

  • Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
  • 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 to editorial cards, see editorial cards.
  • For navigation cards, the 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.
  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.
  • Class names for the m-card-keyline-- modifiers have changed to aid in theming the Framework.

• Navigation cards:

  • Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.

• News, category and icon cards:

  • Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
  • 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 to editorial cards, see editorial cards.
  • For navigation cards, the 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.
  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.

• Numeric 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 to editorial cards, see editorial cards.
  • For navigation cards, the 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.
  • 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.
  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.
• Promo cards: The class m-card--full-bleed-promo has been renamed to m-card--promo in order to have consistent naming across various components.

• Promo cards with imagery:

  • Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
  • The class m-card--full-bleed-promo has been renamed to m-card--promo in order to have consistent naming across various components.
• Report cards: Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.
• Review cards: Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.

• Tertiary cards:

  • Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
  • 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 to editorial cards, see editorial cards.
  • For navigation cards, the 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.
  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.

• Title section cards:

  • Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
  • 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 to editorial cards, see editorial cards.
  • For navigation cards, the 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.
  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.
  • Class names for the t-card-title-section-dark-- modifiers have changed to aid in theming the Framework.

• Carousel:

  • 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.
  • 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.
  • The taxonomic name, and thus the name for the CSS classes and JavaScript file, has been changed from o-card-carousel to o-carousel to leave the carousel open for potential future expansion and reuse Currently this component is only for use with groups of cards.
  • The hidden text and aria labels used for the navigation controls can now be set via the locale settings.
  • Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors. See individual card type pages for details.
• Notification patterns: Bottom padding of all card types fixed to 20px to allow consistency across components and pages and to provide a simpler rule for content authors.

• Story deck:

  • Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
  • Various class names have been updated to follow BEM conventions.
• Call us panel: Following WCAG 2.5.5 guidelines, telephone number links have an increased target size to improve accessibility on touch devices.

• Contextual help:

  • The locale setting format was updated to match with the component naming conventions.
  • The class a-context-help--hidden-text is now required for the inline content variant to ensure hover and focus states are visible.
  • The data attribute data-module-load="true" must now be included alongside data-module="a-context-help" to ensure the JavaScript is loaded on initial page load.
• FAQ panel: The event name used when adding additional FAQs post initial load has been 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.
• FAQ panel right: The data attribute data-module-load="true" must now be included alongside data-module="o-faq-panel" to ensure the JavaScript is loaded on initial page load.

• Checkbox:

  • 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 standalong checkboxes in a group, their natural widths.
• Checkbox multiselect: A number of class names for the list of checkboxes have changed to align with the form row group.
• Checkbox toggle: Following WCAG 2.5.5 guidelines, checkbox toggles have an increased target size to improve accessibility on touch devices. The visible height of the toggle itself has not changed, with the extra height being taken from margins and padding around the element.

• Date:

  • The data module attribute value has been changed from "a-date--extended" to "a-date" as the previous version of the date input has been fully removed from the code base. The modifer class a-date--extended is also no longer required.
  • The date component no longer has a dependency on Moment.js, but instead uses the lightweight DayJS.js. There are no markup changes required by this change, although there are additional values which need to be set as part of the locale setup, which has also been updated to match with the component naming conventions.
  • Method for updating configuration post load has changed name from dateInput.setSettings to aDate.setSettings.
  • It is now also recommended that the aDate object is obtained by calling initInstance on the date input 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.

• Date range:

  • The data module attribute value has been changed from "m-date-range--extended" to "m-date-range" as the previous version of the date input has been fully removed from the code base. The modifer class m-date-range--extended is also no longer required.
  • The date range component no longer has a dependency on Moment.js, but instead uses the lightweight DayJS.js. There are no markup changes required by this change, although there are additional values which need to be set as part of the locale setup, which has also been updated to match with the component naming conventions.
  • The method for setting the components settings via a variable name being passed in using the data attribute data-settings on the m-date-range element has been removed in favor of updating post load via a small peice of JavaScript.
  • Method for updating configuration post load has changed name from dateRange.setSettings to mDateRange.setSettings.
• Form assumptions: A number of class names for the list of radios have changed to align with the form row group.
• Payment options list: Ability to use PNG icons removed and the location of the icons updated from //cdn.abeille-assurances.fr/static/core/icons/v1/functional/payment-types/[ png or svg ]/... to /assets/themes-icons/v2/[ organisation ]/[ theme name ]/functional/payment-types/... for example /assets/themes-icons/v2/aviva/default/functional/payment-types/visa.svg.
• Plus/minus number textbox: Improved feedback for screenreaders, which will now read the function of the plus and minus buttons, and announce any changes to the input value.
• Preferred contact: Ability to use PNG icons removed.
• Radio singlecard select, comprehensive variant: The optional markup changes from v4.14.0 to ensure compliance with WCAG 2.1 are now compulsory and built into the component.
• Textbox format: Functionality updated so that the field is only auto-formatted if the caret is at the end of the text. This means if a users goes back and edits the field, it does not format at all, negating the issue where what the user types gets placed in the wrong position. The field will also format on loss of focus to cover when a user has edited a field.

• Wallet:

  • Ability to use PNG icons removed and the image path updated.
  • The markup for the expiry date dropdowns has been updated to use the form row group.

• Breadcrumb:

  • Wayfinder has been renamed as Breadcrumb, as this is the more commonly recognised name for lists of links of this kind. The component markup has been updated assist users of adaptive technologies and improve SEO performance.
  • Breadcrumbs are now a compulsory part of the footer on all pages (from the home page down) on all sites for both accessibility and SEO reasons.

• Pagination:

  • Following WCAG 2.5.5 guidelines pagination links have an increased target size to improve accessibility on touch devices. Due to the increased target size the pattern displayed at different device sizes has been adjusted. At mobile only three page links (rather than five) are displayed and there is now an additional pattern of five page links for large mobile to small tablet. The three layouts have been acheived by inclusion of the new class a-pagination-list__item--tertairy.
  • The markup has been adjusted to not only support the adjusted layout, but also to further improve the accessibility of the component, ie. the next and previous links should also call out which page it will move the user to within the aria label, for example "Next page, page 4".
  • Aria role="navigation" removed from <nav class="a-pagination"> element as the role is already implied by the element itself.
• Timeline: The completed status green has been updated to improve colour contrast from #4F9F31 to #3E812C.
• Wayfinder: Wayfinder split 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.
• Divider line: Component renamed from a-keyline-divider to differentiate from 4px coloured keylines used above cards, to the left of assumptions, and so on.
• Loading indicator: The Positive Green used within the indicator has been updated from #4F9F31 to #3E812C, in order to improve colour contrast.

• Base template:

  • With the release of v5 the browser support provided has been updated to not include support for IE10 and below. This has resulted in changes to the base template to remove the additional styles, polyfills etc used to maintain their support. Modernizr has also been removed from use to aid in page performance.
  • The favicon images used have been moved from "[ CDN Folder Path ]/images/favicon/..." to "/assets/favicon/" so that the icons remain cached between versions of framework.
  • Adding the crossorigin attribute to the script tags to allow CORS is now compulsory.
  • The charset and http-equiv meta tags have 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.

• Cookie policy:

  • The optional hidden H2 to provide context to the cookie message is now compulsory and built into the component.
  • The data attribute data-module-load="true" must now be included alongside data-module="m-cookie-policy" to ensure the JavaScript is loaded on initial page load.

• Footer:

  • Aria role="contentinfo" removed from footer element as the role is already implied by the element itself.
  • The class .m-footer__group--textual-links-yellow has been changed to .m-footer__group--textual-links-highlight to make the naming more generic.
  • Wayfinder has been renamed as Breadcrumb, as this is the more commonly recognised name for lists of links of this kind. The component 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. The breadcrumb trails are now a compulsory part of the footer to fulfil accessibility and SEO criteria. See Breadcrumb for further details.

• Masthead:

  • 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 layout for the masthead at mobile has also been adjusted due to these changes to provide more consistency in layout across screen sizes with the company logo remaining on the left, followed by the menu link and then the login link.
  • Aria role="banner" removed from header and role="navigation" removed from <nav class="m-primary-navigation"> elements as the roles are already implied by the elements themselves.
  • The Abeille Assurances logo has been removed from being included with every release to being stored centrally. This is to help improve page performance when moving between versions of framework as the file will remain cached by the browser. The logo is now only available as an SVG.
  • 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.
  • In order to improve page performance, the masthead no longer responds to the refresh event being fired. If the extra content area's width could change as a result of it's contents being updated dynamically, then the redraw function will need to be called on the masthead element to trigger a recalculation of what can fit and to then refresh if required.
  • The data attribute data-module-load="true" must now be included alongside data-module="o-masthead" to ensure the JavaScript is loaded on initial page load.
  • New variants added in order to better support theming and ensure styles used within the now removed partner theme remain available where teams require. These include: a dark accent option for the masthead bar, alternative logo (allowing for taller logos), chevrons beside the main menu items and powered by aviva logo within the mega dropdowns.
  • New simple masthead variant added that centers the company logo at all breakpoints. This is for use only on pages with restricted width centre-aligned content, eg login forms.
  • Accessibility adjustments including: skip link to content now much earlier within the page, skip links tranfer focus correctly to area they are linked too, and menu closes if focus is gained on any element outside of the menu.
• Site switcher: It is now recommended that aria-current="true" is included on the currently selected button.
• Stand-alone global navigation: Markup updated to align with all changes made to components used as part of stand-alone global navigation, including masthead, footer etc.
• Sticky CTA bar: The data attribute data-module-load="true" must now be included alongside data-module="m-sticky-cta-bar" to ensure the JavaScript is loaded on initial page load.

• Filter tags:

  • Following WCAG 2.5.5 guidelines, filter tag and result display links have an increased target size to improve accessibility on touch devices.
  • 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.
  • Modules must now be loaded in via require.
  • A number of class names for the list of radios have changed to align with the form row group.

• Predictive search:

  • Ability to use PNG icons removed; icons should now be supplied only in SVG format.
  • Prior to v5.0.0, a global variable containing the settings required had to be specified as a JavaScript object.
  • The options minChars and delay were not available to be set prior to v5.0.0.
  • The default searches and highlighting would match for a string anywhere within the dataset. This has now been chanaged to only search and highlight matches from the start of each entry in the dataset eg. a search for "a" will now only return results that start with "a" rather than all that contain it.
  • The ability to 'Use current location' has been removed in this release, in favour of offering this functionality 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.

• Modal:

  • Following multiversion support being applied to the RequireJS setup used by Framework the method used to access the modules via Require has changed.
  • Modules must now be loaded in via Require.
  • The use of pubsub to close or destroy the modals as required has been removed and replaced with an event being fired on the window element.

• Full screen modal:

  • Following multiversion support being applied to the RequireJS setup used by Framework the method used to access the modules via Require has changed.
  • Modules must now be loaded in via Require.
  • The use of pubsub to close or destroy the modals as required has been removed and replaced with an event being fired on the window element.

• Show more:

  • Component rewritten to better announce changes triggered buy the expansion / contraction to screen readers, with enforced requirement to add data-description attribute to ensure accessibility standards requirements are met.
  • Additional inline and do-not-truncate variants added, along with functionality being extended so the component can be used in place of Form row help.
  • Locale settings have changed to add default values for attributes needed to meet accessibility requirements.
• Primary tabs: Tabs have been completely rewritten to use a new format carousel instead of the previous 'More' dropdown, which consistently performed poorly in testing as users were failing to understand its use, especially with regard to changes in the tab order when an item from within the 'More' dropdown was selected. There are no markup changes required other than the need to update the locale setting format to match with the component naming conventions and to include any appropriate translations for the 'Previous' and 'Next' messages to accompany the carousel arrows.
• Tabs: Tabs have been completely rewritten to use a new format carousel instead of the previous 'More' dropdown, which consistently performed poorly in testing as users were failing to understand its use, especially with regard to changes in the tab order when an item from within the 'More' dropdown was selected. There are no markup changes required other than the need to update the locale setting format to match with the component naming conventions and to include any appropriate translations for the 'Previous' and 'Next' messages to accompany the carousel arrows.
• Accent colours: Class names for the t-accent-light-- and t-accent-dark-- modifiers have changed to aid in theming the Framework, while the colour values themselves have also been changed to reflect the new colour palette in the recently updated Brand Guidelines. The colours used within the Abeille Assurances Legacy theme were the the original default colours prior to v5.0.0, and are the ones names in the class list table below. The reduced number of colours means that some of the new colours are used more than once; this is to ensure that all of the old colours is mapped to the best new equivalent in order to prevent any jarring colour combinations being accidentally produced when switching FW versions.

• Local themes:

  • With the change in browser support, the code required for local theming has changed, so support for multiple image formats for background images is no longer required.
  • With the addition of automated theming, is it now recommended that the majority of styling and colour changes are achieved using the automated theming, and that only very specific changes are made locally.
• Managed themes: Themed version of icon library icons are now available for all managed themes.

• Doughnut charts:

  • Component updated to add ability to extend colour settings for themes.
  • 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.
  • Accent colours have been updated to the new brand theme, so the setSettings function should be used to pass through the correct colour values if the legacy colour scheme is still required. 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 convention, for example "accent-dark-5".
  • The path to the generic fallback image used when it is not possible to generate a custom fallback image for a single segment chart has moved to /assets/themes-icons/v2/aviva/default/placeholder/doughnut-static.svg

• Horizontal value bar:

  • Keyline dividers (a-keyline-divider) were renamed as divider lines (a-divider-line), which may require a code change to this component depending on the variant used. See Divider line documentation for details.
  • a-heading and a-heading--4 classes are no longer required on m-value-bar__status element.

• Pie charts:

  • Component updated to add ability to extend colour settings for themes.
  • 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.
  • Accent colours have been updated to the new brand theme, so the setSettings function should be used to pass through the correct colour values if the legacy colour scheme is still required. 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 convention, for example "accent-dark-5".
  • The path to the generic fallback image used when it is not possible to generate a custom fallback image for a single segment chart has moved to /assets/themes-icons/v2/aviva/default/placeholder/doughnut-static.svg

• Tables:

  • Data module used for scrollable was renamed to match standard naming conventions for scrollable to u-scrollable.
  • 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.
• Numeric indicator: The colours used for the indicators have been updated to improve colour contrast. The red has changed from #BD2624 to #B10101 and green from #35821F to #3E812C.
• Quote: The paths and browser support requirements for the extension 'quotes' have been updated.
• Content fade: The data attribute data-module-load="true" must now be included alongside data-module="u-content-fade" to ensure the JavaScript is loaded on initial page load.

• Lazy loading:

  • Data module used for objectfit was renamed to match standard naming conventions for objectfit to u-objectfit.
  • The data attribute data-module-load="true" must now be included alongside data-module="u-content-fade" to ensure the JavaScript is loaded on initial page load.
  • The locations for the placeholder images has changed to match the new Framework folder strcuture.

Fixed

• Hover/focus styles have been added to contextual help links with hidden text to aid navigation via a keyboard. Appropriate aria has also been added to the component to aid navigation using assistive technologies.
• Update to checkbox multiselect cards (all variants) to ensure that if any checkboxes are already checked on load, then those selections are taken into consideration in the 'x of x' count, and the 'max selections reached' message displays if appropriate.
• Review stars SVGs updated so that the stars are more visible on dark accent colours.
• Checkboxes that were part of a progressive disclosure group would all hide a disclosue area if one had been opened for that group; now only the checkbox which is tied to the disclosure area will hide the area again on unchecking.
• Contextual help links being placed directly within labels/legends when used within form were providing a degradaded experience to assistive technology users. The JavaScript has been adjusted to ensure the anchors are placed outside of the labels/legends to maintain the accessibility of the elements.
• Filter tags / results display would often not display the correct layout once the window resized, leaving the mobile/tablet layout.
• Filter tags were not compatible with the overlay option for multiselects, causing tablet/mobile view not to work correctly if switched to from desktop layout.
• Masthead maintains the same layout when zoomed out up to 50% when at desktop or tablet view. Prior to this, it would often switch to the small tablet layout at 75% zoom or below.

Removed

• Support for IE8, IE9 and IE10; no JavaScript will be served to these browsers.
• jQuery - no longer loaded by default; convert any JavaScript to not use jQuery where possible.
• Modernizr.js - removed to improve page performance.
• Moment.js - removed to improve page performance (replaced in date components by dayjs.js - see Updated section above for details).
• Customer Portal - the portal and extension-myaviva extensions that included Customer Portal product tabs, roundels and headers have been removed to make way for a more modular design and allow the MyAviva project to build, maintain and evolve the design as required.
• Partner theme - this and more can now be achieved by using automated theming and additional masthead variants.
• In-page, linear and non-linear navigations have been removed in order to consolidate their patterns into a single secondary navigation component.
• Blue help bar - replaced by call us panel.
• Date / date range - old-style deprecated versions of date and date range removed; newer versions are now the default.
• Form Row Help - replaced by Show more.
• Results filters - deprecated in v4.15.0; replaced by filter tags / results display.
• Textbox group - replaced by form row group.
• Textbox with symbol or acronym - deprecated in v4.14.0; replaced by form affix.
• Removed support for element type input being used with buttons.
• Removed 'Use current location' functionality from the predictive search component in order to improve its usability; location functionality should now be handled separately.
• Blue help bar: Component removed; use help utility section instead.
• FAQ list: Component removed; replaced by Replaced by call us panel and faq panel.
• Form row help: Component removed in order to consolidate design and development patterns. Move to using form help show more.
• In-page navigation: Component removed in order to consolidate the in-page, linear and non-linear navigation patterns into a single secondary navigation pattern. Move to using secondary navigation.
• Linear navigation: Component removed in order to consolidate the in-page, linear and non-linear navigation patterns into a single secondary navigation pattern. Move to using secondary navigation.
• Non-linear navigation: Component removed in order to consolidate the in-page, linear and non-linear navigation patterns into a single secondary navigation pattern. Move to using secondary navigation.
• Product header: Component removed to make way for a more modular design and allow the MyAviva project to build, maintain and evolve the design as required.
• Product roundels: Both 'Customer portal product roundels' and 'Customer portal product tabs' removed to make way for a more modular design and allow the MyAviva project to build, maintain and evolve the design as required.
• Results filter
• Textbox group: Component removed, replaced by form row group.
• Textbox symbol: Component removed and replaced by form affix, which provides more flexability.
• Partner themes: Partner theme removed from use as automated theming and the new variants added to masthead allow for the creation of matching themes and even greater customisation.

Paths