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 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.
@color-BorderDark
for form inputs; powered by swatch slot D (@color-D
), no longer empty@color-Focus
for form control focus styling; powered by a new swatch slot K (@color-K
)GUI_text-styling
v4.0.5
GUI-input-fields
v3.0.1
@color-BorderDark
variable (see above)@color-Focus
variable (see above)GUI-input-groups
v3.0.1
@color-BorderDark
from _Colors v3.0.2GUI-form-base (new)
v1.0.0
GUI-icons
v2.0.3
focusable="false"
attribute to disable focus in IE/Edge. This will ensure focus behaviour is consistent between all browsers.GUI-radios & GUI-checkboxes
GUI-form-checks (new)
v1.0.0
label
wraps theinput
element).GUI-Alerts
v4.0.0
Lists
v3.0.1
.lists-unstyled
modifier option used for error list inside Error summary componentTabcordions
v4.1.4
Progress-Ropes
v1.0.0
aria-selected
attribute; not required by the ARIA design patternv1.0.1
v2.0.0
aria-controls
andaria-expanded
added to group togglesaria-current="step"
added to active stepTemplates
v2.0.0
.header-inner
,.sidebar-content
and sidebar backdrop overlay z-index.sr-skiplink
aria-hidden
attribute if necessary (when hidden in XS & SM)Form-Pods
v1.0.0