Design System updates (V.2.1.1)

By Constantinos Evangelou, Interaction Design Lead

The design system has been updated to version 2.1.1. Even though there is a major version increase, the changes in the CSS are backwards compatible with v.1.3.2.

Updates include:

CSS and Javascript

Changes in the CSS and Javascript include:

• Added option to add CSS via CDN
• Added app.min.js javascript. Currently only used for the autocomplete function by the Confirm phone number pattern

Accessibility enhancements

• Updated all <labels> to include a valid for=”” attribute
• Updated the Info colour value to enhance contrast
• Updated page title instructions

Screen reader enhancements

• Updated all error messages and converted them from <span> to <p>
• Updated the error messages components with instructions for the usage of aria-describedby=”error_message_id” to help announce the error message on screen readers

Pattern enhancements

• Added confirm a phone number pattern
• Added dates pattern
• Added Page not found pages pattern
• Added There is a problem with the service pages pattern
• Added Service unavailable pages pattern
• Updated Telephone pattern to include displaying and storing telephones

New components

• Added breadcrumbs component