WCAG 2.1 AA accessibility updates

[jonnystening]

The new WCAG 2.1 AA specification brought about a number of changes to our modules...

All modules

In addition to the module updates below, most modules were also updated to support relative CSS units https://github.com/WestpacCXTeam/GUI-source/issues/456

GUI_colors

v3.0.2

Interactive elements (such as Form-Inputs) must meet a new 3:1 colour contrast ratio requirement against the background. Our current @border-Color swatch does not meet 3:1.

• New colour variable @color-BorderDark for form inputs; powered by swatch slot D (@color-D), no longer empty
• New colour variable @color-Focus for form control focus styling; powered by a new swatch slot K (@color-K)

GUI_text-styling

v4.0.5

• Updated focus outline styling
• Reset default browser focus outline styling; applied to default interactive and programatically focused elements as required

GUI-input-fields

v3.0.1

• Darker input field borders (must meet 3:1 colour contrast ratio); mapped to the new @color-BorderDark variable (see above)
• A new way to indicate active/focused input fields; branded colour mapped to the new @color-Focus variable (see above)

GUI-input-groups

v3.0.1

• Mapped new border colour @color-BorderDark from _Colors v3.0.2

GUI-form-base (new)

v1.0.0

• A new module to provide styling for form layout and structure; including form labels, hints, fieldset groups, 'add another' utilities, form-sections, form-groups and much more

GUI-icons

v2.0.3

• All SVGs will require focusable="false" attribute to disable focus in IE/Edge. This will ensure focus behaviour is consistent between all browsers.

GUI-radios & GUI-checkboxes

• Now deprecated, superseded by a consolidated GUI-form-checks

GUI-form-checks (new)

v1.0.0

• Controls must use explicit association of input and label. This is a more verbose approach, but more concise and accessible. Dragon NaturallySpeaking does not support implicit association (where the label wraps the input element).
• Controls must not use CSS background images to indicate state. High contrast mode will not render these indicators. We will remove the SVG dependency and use CSS shapes to render the indicators.
• UI components should ideally use the same focus styling across the board. We're updating the Input-Fields focus style (see above), so this new style will also be applied to Radios and Checkboxes.
• The new GUI-form-checks module will provide these new features. GUI-radios and GUI-checkboxes will be deprecated. Refer to https://github.com/WestpacCXTeam/GUI-source/issues/436 for project details.

GUI-Alerts

v4.0.0

• Alert messages now positioned above the form input control; this is a much more enjoyable layout for all users
• Increased alert message text size to 14px
• Alert boxes will be used to render an Error summary component

Lists

v3.0.1

• New .lists-unstyled modifier option used for error list inside Error summary component

Tabcordions

v4.1.4

• Ensuring open collapsible panels don’t chop overflow; was affecting offset focus outlines

Progress-Ropes

v1.0.0

• Removed programmatic focus setting on group body; focus remains on the group toggle
• Removed aria-selected attribute; not required by the ARIA design pattern
• Updated focus outline to use global styling; provided by _Text-Styling module

v1.0.1

• Migrate to relative CSS units (a11y) https://github.com/WestpacCXTeam/GUI-source/issues/456

v2.0.0

• Moved the progress line to the left side
• Updated group and step styling to improve visual indication of current state (not relying on colour alone)
• Group toggle button heading element wrapping; provides navigation shortcut for screen reader users
• Visually hidden (screen reader only) text appended to group and step text; announces current state to screen reader users
• ARIA attributes aria-controls and aria-expanded added to group toggles
• ARIA attribute aria-current="step" added to active step
• Final review item moved into ordered list

Templates

v2.0.0

• Updated .header-inner, .sidebar-content and sidebar backdrop overlay z-index
• Added styling to reposition sidebar .sr-skiplink
• Updated JS functionality; only add sidebar aria-hidden attribute if necessary (when hidden in XS & SM)

Form-Pods

v1.0.0

• New layout modifiers
• Added styling to position ‘Error summary’ alert boxes