From 0dee6f7615232cb1257fe60c1f451f79d86aa39a Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Tue, 22 Oct 2024 11:31:21 +1100 Subject: [PATCH 01/18] WCAG 2.2 updates - Accordion, link --- src/components/accordion/_accordion.scss | 6 +++--- src/components/link/_link.hbs | 2 +- src/global/scss/base/_mixins.scss | 2 ++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 1e1728e8e..df8f69a28 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -39,6 +39,7 @@ display: flex; justify-content: flex-end; margin-bottom: rem(16px); + margin-right: rem(2px); button { @include font-size('sm'); @@ -47,7 +48,6 @@ text-decoration-skip-ink: auto; font-weight: var(--nsw-font-bold); border: 0; - padding: 0; background: none; &:hover:enabled { @@ -66,7 +66,7 @@ } &:first-child { - margin-right: rem(24px); + margin-right: rem(12px); } &:disabled { @@ -78,7 +78,7 @@ color: var(--nsw-text-light); &:focus { - outline-color: var(--nsw-white); + outline-color: var(--nsw-wh paddite); } } } diff --git a/src/components/link/_link.hbs b/src/components/link/_link.hbs index 1c2c86ff4..7bc982f33 100644 --- a/src/components/link/_link.hbs +++ b/src/components/link/_link.hbs @@ -3,4 +3,4 @@

{{/if}}{{#if icon}}{{#if-equals type "download"}} file_downloadMy Link (PDF, 123.45 KB){{/if-equals}}{{#if-equals type "external"}} {{#if content}}{{content}}{{else}}My Link{{/if}}open_in_new{{/if-equals}} -{{/if}} \ No newline at end of file +{{/if}} diff --git a/src/global/scss/base/_mixins.scss b/src/global/scss/base/_mixins.scss index 2f403ea29..6973ab7e0 100644 --- a/src/global/scss/base/_mixins.scss +++ b/src/global/scss/base/_mixins.scss @@ -45,6 +45,8 @@ font-weight: var(--nsw-font-bold); color: var(--nsw-link); text-decoration: underline; + padding: 2px; + // background-color: var(--nsw-link-light); &:visited { color: var(--nsw-visited); From c4344794609395fd17a1d76e193a1682c44d9a0e Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Wed, 30 Oct 2024 15:30:50 +1100 Subject: [PATCH 02/18] WCAG 2.2 AA updates for various components and docs site --- src/components/card-carousel/_carousel.scss | 20 +++++--------------- src/docs/docs.scss | 3 +++ src/global/scss/base/_mixins.scss | 4 +--- 3 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/components/card-carousel/_carousel.scss b/src/components/card-carousel/_carousel.scss index b95f54e8a..716b5c7b2 100644 --- a/src/components/card-carousel/_carousel.scss +++ b/src/components/card-carousel/_carousel.scss @@ -161,6 +161,7 @@ z-index: 1; transition: 0.2s; border: 2px solid var(--nsw-brand-dark); + cursor: pointer; &:hover { @include nsw-hover(); @@ -229,7 +230,7 @@ transform: translateX(-50%); @include breakpoint('md') { - bottom: 1.5em; + bottom: 0.8em; } li { @@ -287,9 +288,9 @@ &__nav-item { button { background-color: transparent; - width: 1.2em; - height: 1.2em; - padding: 0; + width: 1.6em; + height: 1.6em; + padding: 4px; border-radius: 50%; border: 2px solid var(--nsw-brand-dark); transition: all 300ms ease-in-out; @@ -297,11 +298,6 @@ line-height: 0; margin: 0 0.25em; - @include breakpoint('md') { - width: 0.9em; - height: 0.9em; - } - &:focus { @include nsw-focus(false); outline-offset: 2px; @@ -319,16 +315,10 @@ &--selected button { background-color: var(--nsw-brand-dark); - border-radius: 7px; - width: 2.2em; .nsw-section--invert & { background-color: var(--nsw-white); } - - @include breakpoint('md') { - width: 1.6em; - } } } diff --git a/src/docs/docs.scss b/src/docs/docs.scss index 246801c81..276316d78 100644 --- a/src/docs/docs.scss +++ b/src/docs/docs.scss @@ -155,6 +155,7 @@ $header-height: 151px; max-width: none; margin: 0; flex-direction: column; + cursor: pointer; > li { &:first-child { @@ -473,6 +474,8 @@ $header-height: 151px; > button { margin-top: rem(24px); + padding: rem(2px); + cursor: pointer; &.active { .nsw-material-icons { diff --git a/src/global/scss/base/_mixins.scss b/src/global/scss/base/_mixins.scss index 6973ab7e0..61302705f 100644 --- a/src/global/scss/base/_mixins.scss +++ b/src/global/scss/base/_mixins.scss @@ -45,8 +45,6 @@ font-weight: var(--nsw-font-bold); color: var(--nsw-link); text-decoration: underline; - padding: 2px; - // background-color: var(--nsw-link-light); &:visited { color: var(--nsw-visited); @@ -118,7 +116,7 @@ cursor: pointer; background-color: transparent; border: 0; - padding: 0; + padding: 2px; -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */ } From 774f7b4534f5b2262e67d86f378c157e0136129f Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Mon, 4 Nov 2024 10:41:09 +1100 Subject: [PATCH 03/18] WCAG 2.2 AA compliancy updates for select components --- src/components/filters/_filters.scss | 1 + src/components/form/_form.scss | 5 +++++ src/components/header/_header.scss | 4 +++- src/components/hero-banner/_hero-banner.scss | 9 +++++++++ src/components/hero-search/_hero-search.scss | 11 ++++++++++- src/components/in-page-nav/_in-page-nav.scss | 9 +++++++++ src/components/select/_select.scss | 1 + 7 files changed, 38 insertions(+), 2 deletions(-) diff --git a/src/components/filters/_filters.scss b/src/components/filters/_filters.scss index 57a5a8f64..9870607c8 100644 --- a/src/components/filters/_filters.scss +++ b/src/components/filters/_filters.scss @@ -337,6 +337,7 @@ border: 0; background: none; padding: 0; + cursor: pointer; @include breakpoint('lg') { font-size: var(--nsw-font-size-sm-desktop); diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss index 19e8a8979..9d2fca0f2 100644 --- a/src/components/form/_form.scss +++ b/src/components/form/_form.scss @@ -66,6 +66,10 @@ $nsw-form-tick: 'stop users from accidentally sending information more than once
  • Overusing buttons and button-style links makes them less noticable
  • A comprehensive review of buttons vs. links is available from Indiana University - Buttons & Links - the Basics
    • - \ No newline at end of file + + +

    Accessibility

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    \ No newline at end of file diff --git a/src/components/callout/_guidance.hbs b/src/components/callout/_guidance.hbs index dbc6d1105..a4e789b0e 100644 --- a/src/components/callout/_guidance.hbs +++ b/src/components/callout/_guidance.hbs @@ -25,4 +25,4 @@ layout: blank-layout.hbs

    Callouts can contain an icon, a title and a message. Callouts should be short, easy to scan, informative and clear.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    \ No newline at end of file diff --git a/src/components/card-carousel/_guidance.hbs b/src/components/card-carousel/_guidance.hbs index 855512e52..3be28ab2d 100644 --- a/src/components/card-carousel/_guidance.hbs +++ b/src/components/card-carousel/_guidance.hbs @@ -59,7 +59,7 @@ layout: blank-layout.hbs

    If the carousel items number is smaller than the number of visible items, and you want them to be centered in the viewport, add a data-justify-content="on" to the .nsw-carousel item. By default items will be aligned to the left.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    The card carousel conforms to the W3C Carousel Design Pattern and includes a Live Region that allows screen readers to read content whenever carousel slides change.

    diff --git a/src/components/card/_guidance.hbs b/src/components/card/_guidance.hbs index e6061270c..79c55bddf 100644 --- a/src/components/card/_guidance.hbs +++ b/src/components/card/_guidance.hbs @@ -69,4 +69,4 @@ layout: blank-layout.hbs

    When a user interacts with a card it inverts colour to indicate to the user which card they are currently focused on and reinforces the clickable area.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    \ No newline at end of file diff --git a/src/components/close-button/index.hbs b/src/components/close-button/index.hbs index e8d286b56..13fcf2546 100644 --- a/src/components/close-button/index.hbs +++ b/src/components/close-button/index.hbs @@ -30,7 +30,7 @@ meta-index: true {{/_docs-example}}

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    Do:

      diff --git a/src/components/content-block/_guidance.hbs b/src/components/content-block/_guidance.hbs index 4e7da05d0..5a5024c63 100644 --- a/src/components/content-block/_guidance.hbs +++ b/src/components/content-block/_guidance.hbs @@ -53,4 +53,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/date-input/_guidance.hbs b/src/components/date-input/_guidance.hbs index 632ebd1c3..9cd2285dc 100644 --- a/src/components/date-input/_guidance.hbs +++ b/src/components/date-input/_guidance.hbs @@ -44,4 +44,11 @@ layout: blank-layout.hbs

    The year input is set to accept only a four-digit number while the month and day inputs can accept up to a two-digit number.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    To ensure WCAG 2.2 AA compliance for a date input component, proper usage and configuration are essential. Although the component supports accessibility at a basic level, itโ€™s important to minimise redundant entry by retaining any previously entered dates if a user returns to the form. Make sure that the input field is clearly labelled, with guidance on the correct date format, and allow for easy error correction without requiring re-entry of the date.

    +

    Adhering to these practices ensures a smoother, more accessible experience that meets compliance standards.

    \ No newline at end of file diff --git a/src/components/date-picker/_guidance.hbs b/src/components/date-picker/_guidance.hbs index d13cfc335..da4a97af7 100644 --- a/src/components/date-picker/_guidance.hbs +++ b/src/components/date-picker/_guidance.hbs @@ -106,10 +106,17 @@ layout: blank-layout.hbs {{/_docs-code}}

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    The dialog contains a calendar that uses the grid pattern to present buttons that enable the user to choose a day from the calendar. Choosing a date from the calendar closes the dialog and populates the date input field. When the dialog is opened, if the input field is empty, or does not contain a valid date, then the current date is focused in the calendar. Otherwise, the focus is placed on the day in the calendar that matches the value of the date input field.

    +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    To ensure WCAG 2.2 AA compliance for a date picker, correct usage and configuration are key. While the component offers an accessible foundation, it's important to minimise redundant input by retaining previously selected dates if users return to the form. Ensure that keyboard navigation is fully functional, and provide clear labels and instructions for selecting dates. If errors occur, users should be able to correct them without needing to re-select the date.

    +

    Following these usage practices supports an inclusive experience that meets accessibility standards.

    +

    Keyboard support

    Users can navigate the calendar by using the cursor keys to move around the calendar, and can use the enter key or spacebar to select a date.

    diff --git a/src/components/dialog/_guidance.hbs b/src/components/dialog/_guidance.hbs index 3f8dd2602..26c01d153 100644 --- a/src/components/dialog/_guidance.hbs +++ b/src/components/dialog/_guidance.hbs @@ -41,4 +41,11 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    + +

    Ensuring compliance through usage

    + +

    Consistent help

    +

    When using the Dialog component in your project, focus on creating a smooth, accessible experience by implementing it thoughtfully within your design flow. As the Dialog will automatically handle focus management, ensure any actions leading to the Dialog's opening are intuitive and necessary for your users. Use clear and concise text for any buttons or links within the Dialog to guide users seamlessly through the interaction.

    +

    If the Dialog contains forms or complex choices, provide logical steps that align with the user journey, making it easy to understand and complete actions. Ensure the Dialog's purpose and content are directly relevant to the task at hand, allowing users to engage with the Dialog naturally and exit smoothly.

    +

    This approach will create a cohesive, accessible experience that feels effortless to navigate.

    diff --git a/src/components/file-upload/_guidance.hbs b/src/components/file-upload/_guidance.hbs index d473fa6a4..63feff84e 100644 --- a/src/components/file-upload/_guidance.hbs +++ b/src/components/file-upload/_guidance.hbs @@ -71,4 +71,16 @@ layout: blank-layout.hbs

    Error messages inform the user when there is an issue with the data they have input. Provide helpful error messages to clearly explain to the user what the issue is and how they can effectively address the errors. Check out GOV.UK Design System's error messages for file uploads for some best practice examples.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    To ensure WCAG 2.2 AA compliance for a file upload input, proper usage and configuration are essential. While the component provides a base level of accessibility, it's crucial to minimise redundant entry by configuring it so that users don't need to re-upload files or re-enter information they've previously provided. This includes allowing error correction without requiring re-entry and ensuring files remain accessible for review in multi-upload scenarios.

    + +

    Consistent help

    + +

    To create a consistent and accessible experience with the file upload component, provide clear, actionable guidance to support user interactions. Label the file upload field accurately, and include brief instructions on requirements like accepted file types or size limits, so users know exactly how to proceed. Use consistent language and formatting across all file upload interactions, ensuring users can easily recognise and understand the process.

    + +

    Adhering to these practices in usage supports a smooth, accessible experience and meets the necessary compliance standards.

    \ No newline at end of file diff --git a/src/components/filters/_guidance.hbs b/src/components/filters/_guidance.hbs index a78e67842..3a940f9f1 100644 --- a/src/components/filters/_guidance.hbs +++ b/src/components/filters/_guidance.hbs @@ -72,14 +72,29 @@ layout: blank-layout.hbs

    For batch updates:

      -
    • "Back" bar is sticky to top of screen and on selection closes filtering window with no updates to results.
      • -
    • "Apply filters" button is sticky to bottom of screen and on selection closes filtering window and displays updated results.
      • -
    • "Apply filters" is disabled if no filters are selected
      • -
    • When a filter is selected the icon changes to filled version and displays number of filters selected in brackets.
      • +
    • "Back" bar is sticky to top of screen and on selection closes filtering window with no updates to results.
      • +
    • "Apply filters" button is sticky to bottom of screen and on selection closes filtering window and displays updated results.
      • +
    • "Apply filters" is disabled if no filters are selected
      • +
    • When a filter is selected the icon changes to filled version and displays number of filters selected in brackets.

    For instant updates:

      -
    • For filters that open down, when a filter is selected the icon changes to filled version and displays number of filters selected in brackets
      • -
    \ No newline at end of file +
  • For filters that open down, when a filter is selected the icon changes to filled version and displays number of filters selected in brackets
    • + + +

    Accessibility

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    To ensure WCAG 2.2 AA compliance for a full array of filter components, correct usage and configuration are vital. While each component provides a foundation for accessibility, it's essential to minimise redundant entry by retaining previously selected or entered filter values if a user revisits the page or refines their search. Ensure all filter options are clearly labelled and provide instructions where needed, so users understand the available choices and input formats. Additionally, allow users to modify their filter selections easily without resetting other filters.

    + +

    Consistent help

    + +

    Ensure each input, whether it's a text field, checkbox, radio button, dropdown, or date input, is clearly labelled with descriptive text to communicate its purpose. Consistent error messaging and validation feedback are crucial; provide users with clear, actionable instructions if errors occur, without requiring them to re-enter data unnecessarily. Keyboard navigation should be maintained across all inputs, with each respective field focus indicator allowing users to move easily between fields clearly.

    + +

    Following these practices will help create accessible, user-friendly forms that offer a seamless experience across various input types.

    \ No newline at end of file diff --git a/src/components/footer/_guidance.hbs b/src/components/footer/_guidance.hbs index 9cf3fc423..e9b61520a 100644 --- a/src/components/footer/_guidance.hbs +++ b/src/components/footer/_guidance.hbs @@ -30,5 +30,5 @@ layout: blank-layout.hbs

    The copyright statement is required as it is applies to all pages of the site.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    \ No newline at end of file diff --git a/src/components/form/_guidance.hbs b/src/components/form/_guidance.hbs index 03ea59cc3..ca0206e15 100644 --- a/src/components/form/_guidance.hbs +++ b/src/components/form/_guidance.hbs @@ -49,4 +49,16 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    To ensure WCAG 2.2 AA compliance for a full array of filter components, correct usage and configuration are vital. While each component provides a foundation for accessibility, it's essential to minimise redundant entry by retaining previously selected or entered filter values if a user revisits the page or refines their search. Ensure all filter options are clearly labelled and provide instructions where needed, so users understand the available choices and input formats. Additionally, allow users to modify their filter selections easily without resetting other filters.

    + +

    Consistent help

    + +

    Ensure each input, whether it's a text field, checkbox, radio button, dropdown, or date input, is clearly labelled with descriptive text to communicate its purpose. Consistent error messaging and validation feedback are crucial; provide users with clear, actionable instructions if errors occur, without requiring them to re-enter data unnecessarily. Keyboard navigation should be maintained across all inputs, with each respective field focus indicator allowing users to move easily between fields clearly.

    + +

    Following these practices will help create accessible, user-friendly forms that offer a seamless experience across various input types.

    \ No newline at end of file diff --git a/src/components/global-alert/_guidance.hbs b/src/components/global-alert/_guidance.hbs index 101205fc8..8b41a0d99 100644 --- a/src/components/global-alert/_guidance.hbs +++ b/src/components/global-alert/_guidance.hbs @@ -30,4 +30,4 @@ layout: blank-layout.hbs

    Do not display in response to an action initiated by a user interaction or system event.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/header/_guidance.hbs b/src/components/header/_guidance.hbs index 88e98f9e0..b3558d370 100644 --- a/src/components/header/_guidance.hbs +++ b/src/components/header/_guidance.hbs @@ -38,4 +38,11 @@ layout: blank-layout.hbs

    The search displays on the right hand side and can be omitted if not required.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    To ensure WCAG 2.2 AA compliance for a header search component that opens upon clicking an always-visible icon, correct usage and configuration are essential. While the component is designed for accessibility, retaining any previous search entries can help reduce redundant input if a user revisits the search. The search input should have a clear, accessible label (often provided as aria-labels for screen readers) and guidance on how to use the search, such as placeholder text. Ensure the input maintains its easy-to-locate position to navigate back to, allowing users to correct or modify their query without losing previous entries.

    +

    Following these practices ensures a smooth, accessible experience that meets compliance standards.

    \ No newline at end of file diff --git a/src/components/hero-banner/_guidance.hbs b/src/components/hero-banner/_guidance.hbs index 31d12a038..ce8a040c9 100644 --- a/src/components/hero-banner/_guidance.hbs +++ b/src/components/hero-banner/_guidance.hbs @@ -30,4 +30,4 @@ layout: blank-layout.hbs

    Our base component shows example layouts, and are designed to adapt to your content. If these do not meet your user needs (ie. content type or layout), you can use the foundational elements of the design system to build your own in a similar style.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/hero-search/_guidance.hbs b/src/components/hero-search/_guidance.hbs index 46996d686..d1e511840 100644 --- a/src/components/hero-search/_guidance.hbs +++ b/src/components/hero-search/_guidance.hbs @@ -29,4 +29,13 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    To ensure WCAG 2.2 AA compliance for a hero site search input component, proper usage and configuration are key. While the component provides an accessible structure, it's essential to retain previously entered search terms or suggestions if a user returns to the page or refines their search. Ensure the input field maintains a clear label, along with guidance on how to effectively use the search function, such as placeholder text or assistive instructions. Users should be able to modify or correct their search query without needing to start over.

    +

    Adhering to these practices provides a seamless, accessible experience that aligns with WCAG standards.

    + + diff --git a/src/components/in-page-alert/_guidance.hbs b/src/components/in-page-alert/_guidance.hbs index 7c01625f6..ed10ef6b4 100644 --- a/src/components/in-page-alert/_guidance.hbs +++ b/src/components/in-page-alert/_guidance.hbs @@ -57,4 +57,10 @@ layout: blank-layout.hbs

    The alerts are not dismissible.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    + +

    Ensuring compliance through usage

    + +

    Consistent help

    +

    For in-page alerts in the design system, ensuring WCAG 2.2 AA compliance requires careful attention to consistency and accessibility. Alerts should be configured to deliver clear, actionable guidance without disrupting user flow. This means applying consistent language, formatting, and placement to make alerts easily recognisable across the interface. Ensure each alert is accessible, with clear labels and instructions that screen readers can interpret effectively. Additionally, users should be able to reference alert content without needing to re-trigger it.

    +

    Following these guidelines helps to create a cohesive, accessible experience, aligning with best practices for usability and accessibility in your design system.

    \ No newline at end of file diff --git a/src/components/in-page-nav/_guidance.hbs b/src/components/in-page-nav/_guidance.hbs index 2981ebb82..860f255eb 100644 --- a/src/components/in-page-nav/_guidance.hbs +++ b/src/components/in-page-nav/_guidance.hbs @@ -14,4 +14,4 @@ layout: blank-layout.hbs

    The lefthand highlight bar visually separates the component from the page content and groups the navigation.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/link-list/_guidance.hbs b/src/components/link-list/_guidance.hbs index 554587220..3a4e0f28f 100644 --- a/src/components/link-list/_guidance.hbs +++ b/src/components/link-list/_guidance.hbs @@ -19,6 +19,5 @@ layout: blank-layout.hbs
  • to link to content on the same page, consider in-page navigation
    • -

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/link/_guidance.hbs b/src/components/link/_guidance.hbs index 0da67c5d5..74ca43e09 100644 --- a/src/components/link/_guidance.hbs +++ b/src/components/link/_guidance.hbs @@ -51,6 +51,5 @@ layout: blank-layout.hbs
  • use end punctuation. If your link is at the very end of a sentence, make sure that the full stop is not part of the linked text
    • -

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/list-item/_guidance.hbs b/src/components/list-item/_guidance.hbs index 56aa8115e..75ad10969 100644 --- a/src/components/list-item/_guidance.hbs +++ b/src/components/list-item/_guidance.hbs @@ -30,3 +30,6 @@ layout: blank-layout.hbs
  • tips to improve or widen the results
  • contact information or other ways to navigate the site
    • + +

    Accessibility

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/loader/_guidance.hbs b/src/components/loader/_guidance.hbs index 57cd87ad0..d5bbfa69d 100644 --- a/src/components/loader/_guidance.hbs +++ b/src/components/loader/_guidance.hbs @@ -28,4 +28,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/main-nav/_guidance.hbs b/src/components/main-nav/_guidance.hbs index 9cfa6bf74..b5d019da4 100644 --- a/src/components/main-nav/_guidance.hbs +++ b/src/components/main-nav/_guidance.hbs @@ -14,4 +14,4 @@ layout: blank-layout.hbs

    On smaller devices, the main navigation displays as a hamburger menu, where all levels are available.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/masthead/_guidance.hbs b/src/components/masthead/_guidance.hbs index 44eb00dad..d31568309 100644 --- a/src/components/masthead/_guidance.hbs +++ b/src/components/masthead/_guidance.hbs @@ -23,4 +23,4 @@ layout: blank-layout.hbs

    The component becomes visible when in focus. To display it, press the Tab key (or swipe right if you've enabled the accessibility features of your phone).

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/media/_guidance.hbs b/src/components/media/_guidance.hbs index 2ecdca6bf..f279c5f0e 100644 --- a/src/components/media/_guidance.hbs +++ b/src/components/media/_guidance.hbs @@ -14,3 +14,6 @@ layout: blank-layout.hbs

    Captions

    Captions by default contain a coloured background to visually connect the text to the image or video. If your caption text would be better placed without a background, this option is also available.

    Read more about using captions.

    + +

    Accessibility

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/pagination/_guidance.hbs b/src/components/pagination/_guidance.hbs index 8d792739b..310016d5f 100644 --- a/src/components/pagination/_guidance.hbs +++ b/src/components/pagination/_guidance.hbs @@ -17,4 +17,4 @@ layout: blank-layout.hbs

    Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/popover/_guidance.hbs b/src/components/popover/_guidance.hbs index f8d16cc11..4d5b7b2fd 100644 --- a/src/components/popover/_guidance.hbs +++ b/src/components/popover/_guidance.hbs @@ -23,7 +23,7 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    Popover keyboard interaction and focus

    diff --git a/src/components/progress-indicator/_guidance.hbs b/src/components/progress-indicator/_guidance.hbs index fced8adf7..bc7b5486c 100644 --- a/src/components/progress-indicator/_guidance.hbs +++ b/src/components/progress-indicator/_guidance.hbs @@ -23,4 +23,4 @@ layout: blank-layout.hbs

    As a user progresses through the steps of a process, the Step position is updated and the progress bar highlights the correlating sections to reflect the steps completed. The Step _ of _ text can be use on it own (without the progress bar) when this alone communicates enough information to the user.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/results-bar/_guidance.hbs b/src/components/results-bar/_guidance.hbs index 4efb74e67..f1e8964e8 100644 --- a/src/components/results-bar/_guidance.hbs +++ b/src/components/results-bar/_guidance.hbs @@ -20,3 +20,6 @@ layout: blank-layout.hbs
  • tips to improve or widen the results
  • contact information or other ways to navigate the site
    • + +

    Accessibility

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/select/_guidance.hbs b/src/components/select/_guidance.hbs index 80cace144..59240f1da 100644 --- a/src/components/select/_guidance.hbs +++ b/src/components/select/_guidance.hbs @@ -27,4 +27,16 @@ layout: blank-layout.hbs

    Error messages inform the user when there is an issue with the data they have input. Provide helpful error messages to clearly explain to the user what the issue is and how they can effectively address the errors.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    + +

    Ensuring compliance through usage

    + +

    Redundant entry

    + +

    To ensure WCAG 2.2 AA compliance for a select component, it's essential to retain selected options if users revisit the form or make changes to other fields. This reduces redundant actions, allowing users to pick up where they left off. Ensure that users can adjust their selections without affecting other fields, supporting smooth navigation and a streamlined form experience.

    + +

    Consistent help

    + +

    For a seamless, accessible experience with the select component, focus on clear labelling and purpose-driven design, especially when combined with other inputs. Arrange options logically and in alignment with user needs to reduce cognitive load. If users are likely to revisit or adjust selections, aim to maintain their choices to prevent unnecessary re-selection. A consistently configured select component improves user interaction, supporting both accessibility and usability throughout the interface.

    + +

    Following these practices supports a more inclusive, accessible experience in forms and flows, meeting compliance requirements effectively.

    \ No newline at end of file diff --git a/src/components/side-nav/_guidance.hbs b/src/components/side-nav/_guidance.hbs index 052c15386..b76ee61f1 100644 --- a/src/components/side-nav/_guidance.hbs +++ b/src/components/side-nav/_guidance.hbs @@ -15,4 +15,4 @@ layout: blank-layout.hbs

    On mobile and smaller viewports, the side navigation is displayed through the main site navigation, otherwise called the hamburger menu.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/status-labels/_guidance.hbs b/src/components/status-labels/_guidance.hbs index 827da7b4c..72ccaa2ee 100644 --- a/src/components/status-labels/_guidance.hbs +++ b/src/components/status-labels/_guidance.hbs @@ -31,4 +31,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/steps/_guidance.hbs b/src/components/steps/_guidance.hbs index 493d55e12..c2aea192b 100644 --- a/src/components/steps/_guidance.hbs +++ b/src/components/steps/_guidance.hbs @@ -19,4 +19,4 @@ layout: blank-layout.hbs

    Do not use when content doesn't come together in sequential or linear order, consider bullets points instead.

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/support-list/_guidance.hbs b/src/components/support-list/_guidance.hbs index b25e7757c..fa97a41ae 100644 --- a/src/components/support-list/_guidance.hbs +++ b/src/components/support-list/_guidance.hbs @@ -63,4 +63,4 @@ layout: blank-layout.hbs

    The support logos should be 76px in height on large screens (โ‰ฅ 992px), and 48px in height on small screens (< 991px).

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/table/_guidance.hbs b/src/components/table/_guidance.hbs index 755fa4016..4eaee37f0 100644 --- a/src/components/table/_guidance.hbs +++ b/src/components/table/_guidance.hbs @@ -34,5 +34,5 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    \ No newline at end of file diff --git a/src/components/tabs/_guidance.hbs b/src/components/tabs/_guidance.hbs index 65fbd2240..b841d0d6a 100644 --- a/src/components/tabs/_guidance.hbs +++ b/src/components/tabs/_guidance.hbs @@ -27,4 +27,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    \ No newline at end of file +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/tag/_guidance.hbs b/src/components/tag/_guidance.hbs index 28c1d9e8d..7c2148de0 100644 --- a/src/components/tag/_guidance.hbs +++ b/src/components/tag/_guidance.hbs @@ -21,4 +21,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    diff --git a/src/components/tooltip/_guidance.hbs b/src/components/tooltip/_guidance.hbs index 6b2ed8a10..f53cbe6a8 100644 --- a/src/components/tooltip/_guidance.hbs +++ b/src/components/tooltip/_guidance.hbs @@ -44,7 +44,7 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    Tooltip keyboard interaction and focus

      diff --git a/src/components/utility-list/_guidance.hbs b/src/components/utility-list/_guidance.hbs index 4286cc9c6..f24a77f3a 100644 --- a/src/components/utility-list/_guidance.hbs +++ b/src/components/utility-list/_guidance.hbs @@ -49,7 +49,7 @@ layout: blank-layout.hbs

      Accessibility

      -

      All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

      +

      All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

      Utility list keyboard interaction and focus

      diff --git a/src/core/colour/index.hbs b/src/core/colour/index.hbs index cbc9f0a65..ab84a9841 100644 --- a/src/core/colour/index.hbs +++ b/src/core/colour/index.hbs @@ -229,7 +229,7 @@ meta-index: true

      Text colours

      -

      This set of text colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point) to met Web Content Accessibility Guidelines (WCAG 2.1).

      +

      This set of text colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point) to met Web Content Accessibility Guidelines (WCAG 2.2).

      diff --git a/src/docs/content/about/our-ecosystem.hbs b/src/docs/content/about/our-ecosystem.hbs index fbf3414ec..80d026281 100644 --- a/src/docs/content/about/our-ecosystem.hbs +++ b/src/docs/content/about/our-ecosystem.hbs @@ -15,7 +15,7 @@ meta-index: true

      Each element covers brand requirements and building consistent user experiences, ensuring you have:

        -
      • Built in accessibility: designed and tested to meet WCAG 2.1 AA web accessibility standards.
        • +
      • Built in accessibility: designed and tested to meet WCAG 2.2 AA web accessibility standards.
      • UX & content guidance: detailed usage and interaction guidance for creating consistent user experiences.
      • UI & code starter kits: foundations and pre-made components which can be used as a head-start on new projects for designers and developers.
      diff --git a/src/docs/content/about/supporting-different-roles.hbs b/src/docs/content/about/supporting-different-roles.hbs index c4fa6b6fe..6bdb97498 100644 --- a/src/docs/content/about/supporting-different-roles.hbs +++ b/src/docs/content/about/supporting-different-roles.hbs @@ -16,7 +16,7 @@ meta-index: true

      The NSW Design System:

      • Speeds up your design process
        • -
      • Takes the burden of accessibility compliance off you (WCAG 2.1 AA)
        • +
      • Takes the burden of accessibility compliance off you (WCAG 2.2 AA)
      • Ensures you're following NSW Government branding
      • Enables your designers and developers to work off a common base
      @@ -39,7 +39,7 @@ meta-index: true

      Our Figma kit:

      • Includes 30+ reusable components styled to responsive breakpoints
        • -
      • Meets brand and accessibility standards (WCAG 2.1 AA)
        • +
      • Meets brand and accessibility standards (WCAG 2.2 AA)
      • Provides state, colour, and content type variants
      • Features reusable page templates
      • Ensures consistency between design and code
        • @@ -57,7 +57,7 @@ meta-index: true

        Our code kits:

        • Include 30+ reusable components plus core and helper classes
          • -
        • Meets brand and accessibility standards (WCAG 2.1 AA)
          • +
        • Meets brand and accessibility standards (WCAG 2.2 AA)
        • Ensures cross-browser and cross device compatibility
        • Built using modular, clean and reusable code
        diff --git a/src/docs/content/about/what-is-design-system.hbs b/src/docs/content/about/what-is-design-system.hbs index 9456ae91c..c9f0fa881 100644 --- a/src/docs/content/about/what-is-design-system.hbs +++ b/src/docs/content/about/what-is-design-system.hbs @@ -17,7 +17,7 @@ meta-index: true

        Save time and money with an ecosystem that is made to work together. The design system features a library of styles, components and templates, and well as advice and guidance for how and when to use each one. Delivered in ready to go UI and code kits, say goodbye to building from scratch.

        Out-of-the-box brand and accessibility compliance

        -

        Understand, apply and meet brand standards, with features required for brand compliance indicated with a ๐Ÿ”น blue diamond. Supporting the NSW Government brand framework, the design system can be used by, and bring value to any brand classification. All components and styles are also built and tested to WCAG 2.1 AA standards.

        +

        Understand, apply and meet brand standards, with features required for brand compliance indicated with a ๐Ÿ”น blue diamond. Supporting the NSW Government brand framework, the design system can be used by, and bring value to any brand classification. All components and styles are also built and tested to WCAG 2.2 AA standards.

        Consistent code and design language

        When using our foundations, components and themes, get access to fully synchronised UI and code kits for both designers and developers. This means everyone uses the same atomic components, with extended guidance also bridging the gap to help avoid design drift.

        diff --git a/src/docs/content/contribute/contribution-criteria.hbs b/src/docs/content/contribute/contribution-criteria.hbs index 5d997bd0c..1e2173599 100644 --- a/src/docs/content/contribute/contribution-criteria.hbs +++ b/src/docs/content/contribute/contribution-criteria.hbs @@ -145,7 +145,7 @@ meta-index: true

        It's been tested and shown to work with a range of browsers, assistive technologies and devices.

        -

        Accessibility: A component on its own must be accessible to WCAG 2.1 level AA. Some documentation on how this has been checked, tested, or decisions made to support accessibility should be supplied.

        +

        Accessibility: A component on its own must be accessible to WCAG 2.2 level AA. Some documentation on how this has been checked, tested, or decisions made to support accessibility should be supplied.

        Browser and device tested: All components should meet our browser support requirements.

        No JavaScript fallbacks: All components must degrade gracefully when JavaScript is disabled. We expect that a user can still complete their task without JavaScript enabled, it just might not be beautiful. For example, accordions default to 'open' when JavaScript is disabled so that users can still use the content.

        diff --git a/src/docs/content/design/getting-started.hbs b/src/docs/content/design/getting-started.hbs index bb93626d1..f82e3f843 100644 --- a/src/docs/content/design/getting-started.hbs +++ b/src/docs/content/design/getting-started.hbs @@ -6,7 +6,7 @@ order: 10 meta-description: How designers can use the NSW Design System to create customer-centred digital products and services that meet branding and accessibility guidelines. meta-index: true --- -

        Use the NSW Design System to create customer-centred digital products and services that meet branding and WCAG 2.1 AA accessibility guidelines. It also helps you meet the Design Standards to design for user needs

        +

        Use the NSW Design System to create customer-centred digital products and services that meet branding and WCAG 2.2 AA accessibility guidelines. It also helps you meet the Design Standards to design for user needs

        The design system breaks down the NSW Government Brand to into an adaptable and expandable base that includes:

        • Core styles - foundations that communicate the NSW Government visual identity From f4030cedec6762dce791266901080139fee60649 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Tue, 5 Nov 2024 16:19:23 +1100 Subject: [PATCH 05/18] WCAG link update to 2.2 --- contribute.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contribute.md b/contribute.md index 352bf9f8e..ae701e228 100644 --- a/contribute.md +++ b/contribute.md @@ -152,7 +152,7 @@ New components must follow the system as closely as possible, particularly the s ### Tested -**Accessibility.** A component on its own must be accessible to [WCAG 2.2 level AA.](https://www.w3.org/TR/WCAG21/) Some documentation on how this has been checked, tested, or decisions made to support accessibility should be supplied. +**Accessibility.** A component on its own must be accessible to [WCAG 2.2 level AA.](https://www.w3.org/TR/WCAG22/) Some documentation on how this has been checked, tested, or decisions made to support accessibility should be supplied. **Browser and device tested.** All components should meet our [browser support requirements.](https://github.com/govau/design-system-components#browser-support) From 6fe5be52e33ded8f359be8cdd8e2c42ca5065e18 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Tue, 5 Nov 2024 16:20:59 +1100 Subject: [PATCH 06/18] Fix issue with typo variable on accordion styling --- src/components/accordion/_accordion.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index df8f69a28..09c7ed880 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -78,7 +78,7 @@ color: var(--nsw-text-light); &:focus { - outline-color: var(--nsw-wh paddite); + outline-color: var(--nsw-white); } } } From df1e4775560eba02e51fc39a6265eabf73fa7d63 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Wed, 6 Nov 2024 14:16:59 +1100 Subject: [PATCH 07/18] WCAG 2.2 AA component updates for breadcrumbs --- src/components/breadcrumbs/_breadcrumbs.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index dd9ba565e..b315eaa35 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -20,6 +20,8 @@ display: inline-block; position: relative; top: rem(6px); + right: rem(4px); + width: rem(11px); } @include breakpoint('md') { @@ -65,6 +67,15 @@ } } } + + a:not(.nsw-icon-button) { + line-height: 1.5; + padding: rem(8px) rem(24px); + + @include breakpoint('md') { + padding: rem(4px); + } + } } @supports (content: 'x' / 'y') { From dc20faf1460e5e08eb779e4181635f83bef7c7c1 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Wed, 6 Nov 2024 14:25:10 +1100 Subject: [PATCH 08/18] WCAG 2.2 AA component updates for breadcrumbs, first child --- src/components/breadcrumbs/_breadcrumbs.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index b315eaa35..cf5abe4d6 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -51,6 +51,14 @@ display: none; } } + + a:not(.nsw-icon-button) { + padding: rem(8px) rem(24px) rem(8px) 0; + + @include breakpoint('md') { + padding: rem(4px) rem(4px) rem(4px) 0; + } + } } } From 7d8205e24a87257766113a61aa7471a43c60a281 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Thu, 7 Nov 2024 10:44:56 +1100 Subject: [PATCH 09/18] WCAG 2.2 AA updates to revert Accordion styling updates --- src/components/accordion/_accordion.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 09c7ed880..1e1728e8e 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -39,7 +39,6 @@ display: flex; justify-content: flex-end; margin-bottom: rem(16px); - margin-right: rem(2px); button { @include font-size('sm'); @@ -48,6 +47,7 @@ text-decoration-skip-ink: auto; font-weight: var(--nsw-font-bold); border: 0; + padding: 0; background: none; &:hover:enabled { @@ -66,7 +66,7 @@ } &:first-child { - margin-right: rem(12px); + margin-right: rem(24px); } &:disabled { From 2f3103f2ef065602dd5e0cb12cc35def63c4389f Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Fri, 8 Nov 2024 15:12:56 +1100 Subject: [PATCH 10/18] WCAG 2.2 AA updates to standard statement --- src/components/accordion/_guidance.hbs | 2 +- src/components/back-to-top/_guidance.hbs | 2 +- src/components/breadcrumbs/_guidance.hbs | 2 +- src/components/button/_guidance.hbs | 2 +- src/components/callout/_guidance.hbs | 2 +- src/components/card-carousel/_guidance.hbs | 2 +- src/components/card/_guidance.hbs | 2 +- src/components/close-button/index.hbs | 2 +- src/components/content-block/_guidance.hbs | 2 +- src/components/date-input/_guidance.hbs | 2 +- src/components/date-picker/_guidance.hbs | 2 +- src/components/dialog/_guidance.hbs | 2 +- src/components/file-upload/_guidance.hbs | 2 +- src/components/filters/_guidance.hbs | 2 +- src/components/footer/_guidance.hbs | 2 +- src/components/form/_guidance.hbs | 2 +- src/components/global-alert/_guidance.hbs | 2 +- src/components/header/_guidance.hbs | 2 +- src/components/hero-banner/_guidance.hbs | 2 +- src/components/hero-search/_guidance.hbs | 2 +- src/components/in-page-alert/_guidance.hbs | 2 +- src/components/in-page-nav/_guidance.hbs | 2 +- src/components/link-list/_guidance.hbs | 2 +- src/components/link/_guidance.hbs | 2 +- src/components/list-item/_guidance.hbs | 2 +- src/components/loader/_guidance.hbs | 2 +- src/components/main-nav/_guidance.hbs | 2 +- src/components/masthead/_guidance.hbs | 2 +- src/components/media/_guidance.hbs | 2 +- src/components/pagination/_guidance.hbs | 2 +- src/components/popover/_guidance.hbs | 2 +- src/components/progress-indicator/_guidance.hbs | 2 +- src/components/results-bar/_guidance.hbs | 2 +- src/components/select/_guidance.hbs | 2 +- src/components/side-nav/_guidance.hbs | 2 +- src/components/status-labels/_guidance.hbs | 2 +- src/components/steps/_guidance.hbs | 2 +- src/components/support-list/_guidance.hbs | 2 +- src/components/table/_guidance.hbs | 2 +- src/components/tabs/_guidance.hbs | 2 +- src/components/tag/_guidance.hbs | 2 +- src/components/tooltip/_guidance.hbs | 2 +- src/components/utility-list/_guidance.hbs | 2 +- 43 files changed, 43 insertions(+), 43 deletions(-) diff --git a/src/components/accordion/_guidance.hbs b/src/components/accordion/_guidance.hbs index de4f93481..f70c89899 100644 --- a/src/components/accordion/_guidance.hbs +++ b/src/components/accordion/_guidance.hbs @@ -45,4 +45,4 @@ layout: blank-layout.hbs

          Consider tabs if the user would likely need to flick between content sections.

          Accessibility

          -

          All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

          +

          All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

          diff --git a/src/components/back-to-top/_guidance.hbs b/src/components/back-to-top/_guidance.hbs index 6eef5b012..4bf42438d 100644 --- a/src/components/back-to-top/_guidance.hbs +++ b/src/components/back-to-top/_guidance.hbs @@ -47,4 +47,4 @@ layout: blank-layout.hbs {{/_docs-code}}

          Accessibility

          -

          All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

          \ No newline at end of file +

          All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

          \ No newline at end of file diff --git a/src/components/breadcrumbs/_guidance.hbs b/src/components/breadcrumbs/_guidance.hbs index 96d104662..723bbc7bf 100644 --- a/src/components/breadcrumbs/_guidance.hbs +++ b/src/components/breadcrumbs/_guidance.hbs @@ -24,4 +24,4 @@ layout: blank-layout.hbs

          For mobile resolutions (under 768px), the breadcrumb shows a link to the immediate parent and current page only.

          Accessibility

          -

          All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

          \ No newline at end of file +

          All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

          \ No newline at end of file diff --git a/src/components/button/_guidance.hbs b/src/components/button/_guidance.hbs index 2428c7adc..d3b093c4b 100644 --- a/src/components/button/_guidance.hbs +++ b/src/components/button/_guidance.hbs @@ -36,4 +36,4 @@ layout: blank-layout.hbs

        Accessibility

        -

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

        \ No newline at end of file +

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

        \ No newline at end of file diff --git a/src/components/callout/_guidance.hbs b/src/components/callout/_guidance.hbs index a4e789b0e..ae8c992bb 100644 --- a/src/components/callout/_guidance.hbs +++ b/src/components/callout/_guidance.hbs @@ -25,4 +25,4 @@ layout: blank-layout.hbs

        Callouts can contain an icon, a title and a message. Callouts should be short, easy to scan, informative and clear.

        Accessibility

        -

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

        \ No newline at end of file +

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

        \ No newline at end of file diff --git a/src/components/card-carousel/_guidance.hbs b/src/components/card-carousel/_guidance.hbs index 3be28ab2d..a10a40103 100644 --- a/src/components/card-carousel/_guidance.hbs +++ b/src/components/card-carousel/_guidance.hbs @@ -59,7 +59,7 @@ layout: blank-layout.hbs

        If the carousel items number is smaller than the number of visible items, and you want them to be centered in the viewport, add a data-justify-content="on" to the .nsw-carousel item. By default items will be aligned to the left.

        Accessibility

        -

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

        +

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

        The card carousel conforms to the W3C Carousel Design Pattern and includes a Live Region that allows screen readers to read content whenever carousel slides change.

        diff --git a/src/components/card/_guidance.hbs b/src/components/card/_guidance.hbs index 79c55bddf..819dce7b7 100644 --- a/src/components/card/_guidance.hbs +++ b/src/components/card/_guidance.hbs @@ -69,4 +69,4 @@ layout: blank-layout.hbs

        When a user interacts with a card it inverts colour to indicate to the user which card they are currently focused on and reinforces the clickable area.

        Accessibility

        -

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

        \ No newline at end of file +

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

        \ No newline at end of file diff --git a/src/components/close-button/index.hbs b/src/components/close-button/index.hbs index 13fcf2546..d29dad9c1 100644 --- a/src/components/close-button/index.hbs +++ b/src/components/close-button/index.hbs @@ -30,7 +30,7 @@ meta-index: true {{/_docs-example}}

        Accessibility

        -

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

        +

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

        Do:

          diff --git a/src/components/content-block/_guidance.hbs b/src/components/content-block/_guidance.hbs index 5a5024c63..15634d385 100644 --- a/src/components/content-block/_guidance.hbs +++ b/src/components/content-block/_guidance.hbs @@ -53,4 +53,4 @@ layout: blank-layout.hbs

        Accessibility

        -

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

        +

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

        diff --git a/src/components/date-input/_guidance.hbs b/src/components/date-input/_guidance.hbs index 9cd2285dc..f58b7c1b5 100644 --- a/src/components/date-input/_guidance.hbs +++ b/src/components/date-input/_guidance.hbs @@ -44,7 +44,7 @@ layout: blank-layout.hbs

        The year input is set to accept only a four-digit number while the month and day inputs can accept up to a two-digit number.

        Accessibility

        -

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

        +

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

        Ensuring compliance through usage

        diff --git a/src/components/date-picker/_guidance.hbs b/src/components/date-picker/_guidance.hbs index da4a97af7..8fd2f9158 100644 --- a/src/components/date-picker/_guidance.hbs +++ b/src/components/date-picker/_guidance.hbs @@ -106,7 +106,7 @@ layout: blank-layout.hbs {{/_docs-code}}

        Accessibility

        -

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

        +

        All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

        The dialog contains a calendar that uses the grid pattern to present buttons that enable the user to choose a day from the calendar. Choosing a date from the calendar closes the dialog and populates the date input field. When the dialog is opened, if the input field is empty, or does not contain a valid date, then the current date is focused in the calendar. Otherwise, the focus is placed on the day in the calendar that matches the value of the date input field.

        diff --git a/src/components/dialog/_guidance.hbs b/src/components/dialog/_guidance.hbs index 26c01d153..aaf74bd4c 100644 --- a/src/components/dialog/_guidance.hbs +++ b/src/components/dialog/_guidance.hbs @@ -41,7 +41,7 @@ layout: blank-layout.hbs

      Accessibility

      -

      All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

      +

      All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

      Ensuring compliance through usage

      diff --git a/src/components/file-upload/_guidance.hbs b/src/components/file-upload/_guidance.hbs index 63feff84e..1680acffd 100644 --- a/src/components/file-upload/_guidance.hbs +++ b/src/components/file-upload/_guidance.hbs @@ -71,7 +71,7 @@ layout: blank-layout.hbs

      Error messages inform the user when there is an issue with the data they have input. Provide helpful error messages to clearly explain to the user what the issue is and how they can effectively address the errors. Check out GOV.UK Design System's error messages for file uploads for some best practice examples.

      Accessibility

      -

      All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

      +

      All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

      Ensuring compliance through usage

      diff --git a/src/components/filters/_guidance.hbs b/src/components/filters/_guidance.hbs index 3a940f9f1..ff8de926b 100644 --- a/src/components/filters/_guidance.hbs +++ b/src/components/filters/_guidance.hbs @@ -85,7 +85,7 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    Ensuring compliance through usage

    diff --git a/src/components/footer/_guidance.hbs b/src/components/footer/_guidance.hbs index e9b61520a..787f329a0 100644 --- a/src/components/footer/_guidance.hbs +++ b/src/components/footer/_guidance.hbs @@ -30,5 +30,5 @@ layout: blank-layout.hbs

    The copyright statement is required as it is applies to all pages of the site.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    \ No newline at end of file diff --git a/src/components/form/_guidance.hbs b/src/components/form/_guidance.hbs index ca0206e15..6229f1864 100644 --- a/src/components/form/_guidance.hbs +++ b/src/components/form/_guidance.hbs @@ -49,7 +49,7 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    Ensuring compliance through usage

    diff --git a/src/components/global-alert/_guidance.hbs b/src/components/global-alert/_guidance.hbs index 8b41a0d99..36d987edb 100644 --- a/src/components/global-alert/_guidance.hbs +++ b/src/components/global-alert/_guidance.hbs @@ -30,4 +30,4 @@ layout: blank-layout.hbs

    Do not display in response to an action initiated by a user interaction or system event.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/header/_guidance.hbs b/src/components/header/_guidance.hbs index b3558d370..6e801870e 100644 --- a/src/components/header/_guidance.hbs +++ b/src/components/header/_guidance.hbs @@ -38,7 +38,7 @@ layout: blank-layout.hbs

    The search displays on the right hand side and can be omitted if not required.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    Ensuring compliance through usage

    diff --git a/src/components/hero-banner/_guidance.hbs b/src/components/hero-banner/_guidance.hbs index ce8a040c9..23cbd2b0a 100644 --- a/src/components/hero-banner/_guidance.hbs +++ b/src/components/hero-banner/_guidance.hbs @@ -30,4 +30,4 @@ layout: blank-layout.hbs

    Our base component shows example layouts, and are designed to adapt to your content. If these do not meet your user needs (ie. content type or layout), you can use the foundational elements of the design system to build your own in a similar style.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/hero-search/_guidance.hbs b/src/components/hero-search/_guidance.hbs index d1e511840..fe678f741 100644 --- a/src/components/hero-search/_guidance.hbs +++ b/src/components/hero-search/_guidance.hbs @@ -29,7 +29,7 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    Ensuring compliance through usage

    diff --git a/src/components/in-page-alert/_guidance.hbs b/src/components/in-page-alert/_guidance.hbs index ed10ef6b4..4eb75580f 100644 --- a/src/components/in-page-alert/_guidance.hbs +++ b/src/components/in-page-alert/_guidance.hbs @@ -57,7 +57,7 @@ layout: blank-layout.hbs

    The alerts are not dismissible.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    Ensuring compliance through usage

    diff --git a/src/components/in-page-nav/_guidance.hbs b/src/components/in-page-nav/_guidance.hbs index 860f255eb..247e32c91 100644 --- a/src/components/in-page-nav/_guidance.hbs +++ b/src/components/in-page-nav/_guidance.hbs @@ -14,4 +14,4 @@ layout: blank-layout.hbs

    The lefthand highlight bar visually separates the component from the page content and groups the navigation.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/link-list/_guidance.hbs b/src/components/link-list/_guidance.hbs index 3a4e0f28f..54e782c28 100644 --- a/src/components/link-list/_guidance.hbs +++ b/src/components/link-list/_guidance.hbs @@ -20,4 +20,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/link/_guidance.hbs b/src/components/link/_guidance.hbs index 74ca43e09..70ad1089d 100644 --- a/src/components/link/_guidance.hbs +++ b/src/components/link/_guidance.hbs @@ -52,4 +52,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/list-item/_guidance.hbs b/src/components/list-item/_guidance.hbs index 75ad10969..ef80b61e1 100644 --- a/src/components/list-item/_guidance.hbs +++ b/src/components/list-item/_guidance.hbs @@ -32,4 +32,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/loader/_guidance.hbs b/src/components/loader/_guidance.hbs index d5bbfa69d..1803b8b00 100644 --- a/src/components/loader/_guidance.hbs +++ b/src/components/loader/_guidance.hbs @@ -28,4 +28,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/main-nav/_guidance.hbs b/src/components/main-nav/_guidance.hbs index b5d019da4..41e75ed27 100644 --- a/src/components/main-nav/_guidance.hbs +++ b/src/components/main-nav/_guidance.hbs @@ -14,4 +14,4 @@ layout: blank-layout.hbs

    On smaller devices, the main navigation displays as a hamburger menu, where all levels are available.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/masthead/_guidance.hbs b/src/components/masthead/_guidance.hbs index d31568309..64d62970f 100644 --- a/src/components/masthead/_guidance.hbs +++ b/src/components/masthead/_guidance.hbs @@ -23,4 +23,4 @@ layout: blank-layout.hbs

    The component becomes visible when in focus. To display it, press the Tab key (or swipe right if you've enabled the accessibility features of your phone).

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/media/_guidance.hbs b/src/components/media/_guidance.hbs index f279c5f0e..0ed0d0208 100644 --- a/src/components/media/_guidance.hbs +++ b/src/components/media/_guidance.hbs @@ -16,4 +16,4 @@ layout: blank-layout.hbs

    Read more about using captions.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/pagination/_guidance.hbs b/src/components/pagination/_guidance.hbs index 310016d5f..97b1718e8 100644 --- a/src/components/pagination/_guidance.hbs +++ b/src/components/pagination/_guidance.hbs @@ -17,4 +17,4 @@ layout: blank-layout.hbs

    Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/popover/_guidance.hbs b/src/components/popover/_guidance.hbs index 4d5b7b2fd..cf32dbba6 100644 --- a/src/components/popover/_guidance.hbs +++ b/src/components/popover/_guidance.hbs @@ -23,7 +23,7 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    Popover keyboard interaction and focus

    diff --git a/src/components/progress-indicator/_guidance.hbs b/src/components/progress-indicator/_guidance.hbs index bc7b5486c..fca529c15 100644 --- a/src/components/progress-indicator/_guidance.hbs +++ b/src/components/progress-indicator/_guidance.hbs @@ -23,4 +23,4 @@ layout: blank-layout.hbs

    As a user progresses through the steps of a process, the Step position is updated and the progress bar highlights the correlating sections to reflect the steps completed. The Step _ of _ text can be use on it own (without the progress bar) when this alone communicates enough information to the user.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/results-bar/_guidance.hbs b/src/components/results-bar/_guidance.hbs index f1e8964e8..5b9299d0f 100644 --- a/src/components/results-bar/_guidance.hbs +++ b/src/components/results-bar/_guidance.hbs @@ -22,4 +22,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/select/_guidance.hbs b/src/components/select/_guidance.hbs index 59240f1da..7fb8361f0 100644 --- a/src/components/select/_guidance.hbs +++ b/src/components/select/_guidance.hbs @@ -27,7 +27,7 @@ layout: blank-layout.hbs

    Error messages inform the user when there is an issue with the data they have input. Provide helpful error messages to clearly explain to the user what the issue is and how they can effectively address the errors.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    Ensuring compliance through usage

    diff --git a/src/components/side-nav/_guidance.hbs b/src/components/side-nav/_guidance.hbs index b76ee61f1..6f1253dda 100644 --- a/src/components/side-nav/_guidance.hbs +++ b/src/components/side-nav/_guidance.hbs @@ -15,4 +15,4 @@ layout: blank-layout.hbs

    On mobile and smaller viewports, the side navigation is displayed through the main site navigation, otherwise called the hamburger menu.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/status-labels/_guidance.hbs b/src/components/status-labels/_guidance.hbs index 72ccaa2ee..fa22bbbde 100644 --- a/src/components/status-labels/_guidance.hbs +++ b/src/components/status-labels/_guidance.hbs @@ -31,4 +31,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/steps/_guidance.hbs b/src/components/steps/_guidance.hbs index c2aea192b..7452d5eb2 100644 --- a/src/components/steps/_guidance.hbs +++ b/src/components/steps/_guidance.hbs @@ -19,4 +19,4 @@ layout: blank-layout.hbs

    Do not use when content doesn't come together in sequential or linear order, consider bullets points instead.

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/support-list/_guidance.hbs b/src/components/support-list/_guidance.hbs index fa97a41ae..184a66aec 100644 --- a/src/components/support-list/_guidance.hbs +++ b/src/components/support-list/_guidance.hbs @@ -63,4 +63,4 @@ layout: blank-layout.hbs

    The support logos should be 76px in height on large screens (โ‰ฅ 992px), and 48px in height on small screens (< 991px).

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/table/_guidance.hbs b/src/components/table/_guidance.hbs index 4eaee37f0..edaa94042 100644 --- a/src/components/table/_guidance.hbs +++ b/src/components/table/_guidance.hbs @@ -34,5 +34,5 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    \ No newline at end of file diff --git a/src/components/tabs/_guidance.hbs b/src/components/tabs/_guidance.hbs index b841d0d6a..f767d8011 100644 --- a/src/components/tabs/_guidance.hbs +++ b/src/components/tabs/_guidance.hbs @@ -27,4 +27,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/tag/_guidance.hbs b/src/components/tag/_guidance.hbs index 7c2148de0..24086955c 100644 --- a/src/components/tag/_guidance.hbs +++ b/src/components/tag/_guidance.hbs @@ -21,4 +21,4 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    diff --git a/src/components/tooltip/_guidance.hbs b/src/components/tooltip/_guidance.hbs index f53cbe6a8..b6e78b64b 100644 --- a/src/components/tooltip/_guidance.hbs +++ b/src/components/tooltip/_guidance.hbs @@ -44,7 +44,7 @@ layout: blank-layout.hbs

    Accessibility

    -

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

    +

    All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

    Tooltip keyboard interaction and focus

      diff --git a/src/components/utility-list/_guidance.hbs b/src/components/utility-list/_guidance.hbs index f24a77f3a..57816cc51 100644 --- a/src/components/utility-list/_guidance.hbs +++ b/src/components/utility-list/_guidance.hbs @@ -49,7 +49,7 @@ layout: blank-layout.hbs

      Accessibility

      -

      All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards, except where compliance is achieved through correct usage and configuration.

      +

      All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

      Utility list keyboard interaction and focus

      From 03eeff1c3e156b791025f2deb6f711927fc0a484 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Wed, 13 Nov 2024 10:34:48 +1100 Subject: [PATCH 11/18] WCAG 2.2 AA updates - breadcrumbs update to fascilitate ellipsis in future update --- src/components/breadcrumbs/_breadcrumbs.scss | 76 +++++++------------- 1 file changed, 24 insertions(+), 52 deletions(-) diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index cf5abe4d6..92c6c11d8 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -8,86 +8,58 @@ list-style: none; } - li { + li:not(:first-child):not(:last-child):not(:nth-last-child(2)) { display: none; - &::before { - @include material-icons; - content: 'keyboard_arrow_right'; - content: 'keyboard_arrow_right' / ''; - font-size: rem(map-get($nsw-icon-sizes, 20)); - line-height: rem(8px); - display: inline-block; - position: relative; - top: rem(6px); - right: rem(4px); - width: rem(11px); - } - @include breakpoint('md') { - display: inline; - } - - &:nth-last-child(2), - &:last-child { - display: inline; + display: inline-block; } + } - &:nth-last-child(2) { - &::before { - display: none; - - @include breakpoint('md') { - display: inline-block; - } - } - } + li { + display: inline-block; &:first-child { &::before { display: none; - - @include breakpoint('md') { - display: none; - } } + } - a:not(.nsw-icon-button) { - padding: rem(8px) rem(24px) rem(8px) 0; - - @include breakpoint('md') { - padding: rem(4px) rem(4px) rem(4px) 0; - } - } + &::before { + @include material-icons; + content: 'keyboard_arrow_right'; + font-size: rem(map-get($nsw-icon-sizes, 20)); + line-height: rem(8px); + display: inline-block; + position: relative; + top: rem(6px); } } + .nsw-breadcrumbs__show-all { + li:not(:first-child):not(:last-child):not(:nth-last-child(2)) { + display: inline-block; + } + } + a { font-weight: var(--nsw-font-normal); + padding: rem(3px) 0; &.current { text-decoration: none; pointer-events: none; color: var(--nsw-text-dark); - .nsw-section--invert & { + .nsw-section--invert & { color: var(--nsw-text-light); } } } - - a:not(.nsw-icon-button) { - line-height: 1.5; - padding: rem(8px) rem(24px); - - @include breakpoint('md') { - padding: rem(4px); - } - } } @supports (content: 'x' / 'y') { - .nsw-breadcrumbs { + .nsw-breadcrumbs { li { &::before { content: 'keyboard_arrow_right' / ''; @@ -97,7 +69,7 @@ } @media speech { - .nsw-breadcrumbs { + .nsw-breadcrumbs { li { &::before { display: none; From f99c764952cc5bafa97db25847e3a3afae30f8a1 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Wed, 13 Nov 2024 14:38:29 +1100 Subject: [PATCH 12/18] WCAG 2.2 - updates padding for breadcrumbs --- src/components/breadcrumbs/_breadcrumbs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index 92c6c11d8..3627a5406 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -44,7 +44,7 @@ a { font-weight: var(--nsw-font-normal); - padding: rem(3px) 0; + padding: rem(2px) 0; &.current { text-decoration: none; From 6d3bd2ea64f8226b5733ffad7496c423d8778d8b Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Wed, 13 Nov 2024 15:07:41 +1100 Subject: [PATCH 13/18] WCAG 2.2 AA - adjusts breadcrumbs line-height for min 24px clickable area --- src/components/breadcrumbs/_breadcrumbs.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index 3627a5406..b8cb6493b 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -43,8 +43,9 @@ } a { + display: inline-block; + line-height: 24px; font-weight: var(--nsw-font-normal); - padding: rem(2px) 0; &.current { text-decoration: none; From 430dc73fe81d6d8bf81c0b90624643c7415b6a90 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Fri, 22 Nov 2024 16:14:16 +1100 Subject: [PATCH 14/18] Updates What is the Design System page content --- .../content/about/what-is-design-system.hbs | 87 ++++++++++++++++++- 1 file changed, 86 insertions(+), 1 deletion(-) diff --git a/src/docs/content/about/what-is-design-system.hbs b/src/docs/content/about/what-is-design-system.hbs index c9f0fa881..5f1aba514 100644 --- a/src/docs/content/about/what-is-design-system.hbs +++ b/src/docs/content/about/what-is-design-system.hbs @@ -17,7 +17,92 @@ meta-index: true

      Save time and money with an ecosystem that is made to work together. The design system features a library of styles, components and templates, and well as advice and guidance for how and when to use each one. Delivered in ready to go UI and code kits, say goodbye to building from scratch.

      Out-of-the-box brand and accessibility compliance

      -

      Understand, apply and meet brand standards, with features required for brand compliance indicated with a ๐Ÿ”น blue diamond. Supporting the NSW Government brand framework, the design system can be used by, and bring value to any brand classification. All components and styles are also built and tested to WCAG 2.2 AA standards.

      +

      Understand, apply and meet brand standards, with features required for brand compliance indicated with a ๐Ÿ”น blue diamond. Supporting the NSW Government Brand Framework, the Design System can be used by (and bring value) to any brand classification. Our Design System has been updated to align with WCAG 2.2 level AA standards, providing components designed to support accessibility and inclusivity.

      +

      While these components are built to meet accessibility guidelines, achieving compliance for your product will depend on how they are integrated and used. Accessibility is influenced by your implementation choices including content creation, customisation and interaction design.

      + +

      To maximise compliance:

      +
        +
      • Adhere to accessibility best practices when implementing components.
        • +
      • Test your product with diverse users, including those with disabilities.
        • +
      • Regularly review and update your product to maintain accessibility.
        • +
      + +

      For additional support, explore our digital accessibility training resources. Alternatively, contact our team for implementation advice.

      + +

      Design System Updates for WCAG 2.2 Compliance

      +

      We've updated the components in the NSW Design System to achieve compliance with WCAG 2.2 Level AA. Please review your digital products to determine if adjustments are needed to align with these updates.

      +

      For detailed explanations of each WCAG 2.2 success criterion, visit the W3C website.

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      +

      Component

      +       		+

      Relevant WCAG 2.2 Criteria

      +
      +

      Accordion

      +       		+

      Target size (minimum)

      +
      +

      Breadcrumbs

      +       		+

      Target size (minimum)

      +
      +

      Card carousel

      +       		+

      Target size (minimum), Dragging Movements

      +
      +

      Footer

      +       		+

      Target size (minimum)

      +
      +

      Hero banner

      +       		+

      Target size (minimum)

      +
      +

      Hero search

      +       		+

      Target size (minimum), Redundant entry

      +
      +

      In-page navigation

      +       		+

      Target size (minimum)

      +
      + +

      Keep an eye on this page for more updates, and sign up to our mailing list to hear from us about future events and updates.

      Consistent code and design language

      When using our foundations, components and themes, get access to fully synchronised UI and code kits for both designers and developers. This means everyone uses the same atomic components, with extended guidance also bridging the gap to help avoid design drift.

      From 4cc58df9b673c27305fcc82a5db8906d18e7b2a6 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Fri, 22 Nov 2024 16:30:53 +1100 Subject: [PATCH 15/18] Whats Design System page content update --- src/docs/content/about/what-is-design-system.hbs | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/docs/content/about/what-is-design-system.hbs b/src/docs/content/about/what-is-design-system.hbs index 5f1aba514..e5954ca26 100644 --- a/src/docs/content/about/what-is-design-system.hbs +++ b/src/docs/content/about/what-is-design-system.hbs @@ -19,14 +19,12 @@ meta-index: true

      Out-of-the-box brand and accessibility compliance

      Understand, apply and meet brand standards, with features required for brand compliance indicated with a ๐Ÿ”น blue diamond. Supporting the NSW Government Brand Framework, the Design System can be used by (and bring value) to any brand classification. Our Design System has been updated to align with WCAG 2.2 level AA standards, providing components designed to support accessibility and inclusivity.

      While these components are built to meet accessibility guidelines, achieving compliance for your product will depend on how they are integrated and used. Accessibility is influenced by your implementation choices including content creation, customisation and interaction design.

      -

      To maximise compliance:

      • Adhere to accessibility best practices when implementing components.
      • Test your product with diverse users, including those with disabilities.
      • Regularly review and update your product to maintain accessibility.
      -

      For additional support, explore our digital accessibility training resources. Alternatively, contact our team for implementation advice.

      Design System Updates for WCAG 2.2 Compliance

      From ae6ec8f4edbde94bc12e5d91e5b6794a593a4c04 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Mon, 25 Nov 2024 08:21:41 +1100 Subject: [PATCH 16/18] Commit to resolve Snyk check issue --- src/docs/content/about/what-is-design-system.hbs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/docs/content/about/what-is-design-system.hbs b/src/docs/content/about/what-is-design-system.hbs index e5954ca26..5f1aba514 100644 --- a/src/docs/content/about/what-is-design-system.hbs +++ b/src/docs/content/about/what-is-design-system.hbs @@ -19,12 +19,14 @@ meta-index: true

      Out-of-the-box brand and accessibility compliance

      Understand, apply and meet brand standards, with features required for brand compliance indicated with a ๐Ÿ”น blue diamond. Supporting the NSW Government Brand Framework, the Design System can be used by (and bring value) to any brand classification. Our Design System has been updated to align with WCAG 2.2 level AA standards, providing components designed to support accessibility and inclusivity.

      While these components are built to meet accessibility guidelines, achieving compliance for your product will depend on how they are integrated and used. Accessibility is influenced by your implementation choices including content creation, customisation and interaction design.

      +

      To maximise compliance:

      • Adhere to accessibility best practices when implementing components.
      • Test your product with diverse users, including those with disabilities.
      • Regularly review and update your product to maintain accessibility.
      +

      For additional support, explore our digital accessibility training resources. Alternatively, contact our team for implementation advice.

      Design System Updates for WCAG 2.2 Compliance

      From ae3851075c96cf86bdfd08c598cd80ae14dc6ff4 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Mon, 25 Nov 2024 09:32:42 +1100 Subject: [PATCH 17/18] WCAG 2.2 AA formatting updates --- src/docs/content/about/what-is-design-system.hbs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/docs/content/about/what-is-design-system.hbs b/src/docs/content/about/what-is-design-system.hbs index 5f1aba514..f492d1f00 100644 --- a/src/docs/content/about/what-is-design-system.hbs +++ b/src/docs/content/about/what-is-design-system.hbs @@ -33,6 +33,8 @@ meta-index: true

      We've updated the components in the NSW Design System to achieve compliance with WCAG 2.2 Level AA. Please review your digital products to determine if adjustments are needed to align with these updates.

      For detailed explanations of each WCAG 2.2 success criterion, visit the W3C website.

      +
      +
      @@ -101,6 +103,8 @@ meta-index: true
      +
      +

      Keep an eye on this page for more updates, and sign up to our mailing list to hear from us about future events and updates.

      From 7eb86bb4e79b9314adb7504f7cc15439cd138133 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Mon, 25 Nov 2024 15:55:44 +1100 Subject: [PATCH 18/18] WCAG 2.2 AA updates to content and addition of aria labelling --- src/components/breadcrumbs/_guidance.hbs | 2 +- src/components/hero-banner/_guidance.hbs | 2 +- .../content/about/what-is-design-system.hbs | 30 +++++++++---------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/breadcrumbs/_guidance.hbs b/src/components/breadcrumbs/_guidance.hbs index af01fd3d7..544236a2f 100644 --- a/src/components/breadcrumbs/_guidance.hbs +++ b/src/components/breadcrumbs/_guidance.hbs @@ -11,7 +11,7 @@ layout: blank-layout.hbs
    • reflect the names of the parent-level pages ensuring you use the same labels and casing as the main IA
    -

    Parent page
    Starts with the "Home" page and links users to parent-level pages in the IA

    +

    Parent page
    Starts with the "Home" page and links users to parent-level pages in the IA.

    Icon
    The chevrons between the names shows the visual hierarchy between pages.

    Current page
    Indicates the current page the user is viewing.

    Ellipsis
    Provides a clickable option to expand and reveal the full breadcrumb path for mobile users.

    diff --git a/src/components/hero-banner/_guidance.hbs b/src/components/hero-banner/_guidance.hbs index 23cbd2b0a..7dfc0d7a5 100644 --- a/src/components/hero-banner/_guidance.hbs +++ b/src/components/hero-banner/_guidance.hbs @@ -22,7 +22,7 @@ layout: blank-layout.hbs

    Do not use:

    • to replace titles on content pages, instead use H1 typography styles
      • -
    • for sites or products where the primary navigation of your users is via search, consider Hero Search
      • +
    • for sites or products where the primary navigation of your users is via search, consider Hero Search

    Building heros

    diff --git a/src/docs/content/about/what-is-design-system.hbs b/src/docs/content/about/what-is-design-system.hbs index f492d1f00..1c1344986 100644 --- a/src/docs/content/about/what-is-design-system.hbs +++ b/src/docs/content/about/what-is-design-system.hbs @@ -8,16 +8,16 @@ meta-index: true ---

    The NSW Design System is a single source of truth for the design and development of digital products and services in NSW Government. Our mission is to help teams build products and services that meet user needs and deliver great user experiences.

    -

    Our design guidelines and development documentation guide you on how to use the NSW Design System. Embracing a code first approach, all parts of the design system have been built in alignment to deliver simple and consistent solutions.

    +

    Our design guidelines and development documentation guide you on how to use the NSW Design System. Embracing a code first approach, all parts of the design system have been built in alignment to deliver simple and consistent solutions.

    Building from a single, best practice base ensures consistency with how our users engage and interact with NSW Government digitally. Resulting in easy to use products and services.

    Benefits

    Build faster and at scale

    -

    Save time and money with an ecosystem that is made to work together. The design system features a library of styles, components and templates, and well as advice and guidance for how and when to use each one. Delivered in ready to go UI and code kits, say goodbye to building from scratch.

    +

    Save time and money with an ecosystem that is made to work together. The design system features a library of styles, components and templates, and well as advice and guidance for how and when to use each one. Delivered in ready to go UI and code kits, say goodbye to building from scratch.

    Out-of-the-box brand and accessibility compliance

    -

    Understand, apply and meet brand standards, with features required for brand compliance indicated with a ๐Ÿ”น blue diamond. Supporting the NSW Government Brand Framework, the Design System can be used by (and bring value) to any brand classification. Our Design System has been updated to align with WCAG 2.2 level AA standards, providing components designed to support accessibility and inclusivity.

    +

    Understand, apply and meet brand standards, with features required for brand compliance indicated with a ๐Ÿ”น blue diamond. Supporting the NSW Government Brand Framework, the Design System can be used by (and bring value) to any brand classification. Our Design System has been updated to align with WCAG 2.2 level AA standards, providing components designed to support accessibility and inclusivity.

    While these components are built to meet accessibility guidelines, achieving compliance for your product will depend on how they are integrated and used. Accessibility is influenced by your implementation choices including content creation, customisation and interaction design.

    To maximise compliance:

    @@ -27,11 +27,11 @@ meta-index: true
  • Regularly review and update your product to maintain accessibility.
    • -

    For additional support, explore our digital accessibility training resources. Alternatively, contact our team for implementation advice.

    +

    For additional support, explore our digital accessibility training resources. Alternatively, contact our team for implementation advice.

    Design System Updates for WCAG 2.2 Compliance

    We've updated the components in the NSW Design System to achieve compliance with WCAG 2.2 Level AA. Please review your digital products to determine if adjustments are needed to align with these updates.

    -

    For detailed explanations of each WCAG 2.2 success criterion, visit the W3C website.

    +

    For detailed explanations of each WCAG 2.2 success criterion, visit the W3C website.

    @@ -47,7 +47,7 @@ meta-index: true -

    Accordion

    +

    Accordion

    Target size (minimum)

    @@ -55,7 +55,7 @@ meta-index: true -

    Breadcrumbs

    +

    Breadcrumbs

    Target size (minimum)

    @@ -63,15 +63,15 @@ meta-index: true -

    Card carousel

    +

    Card carousel

    -

    Target size (minimum), Dragging Movements

    +

    Target size (minimum), Dragging movements

    -

    Footer

    +

    Footer

    Target size (minimum)

    @@ -79,7 +79,7 @@ meta-index: true -

    Hero banner

    +

    Hero banner

    Target size (minimum)

    @@ -87,7 +87,7 @@ meta-index: true -

    Hero search

    +

    Hero search

    Target size (minimum), Redundant entry

    @@ -95,7 +95,7 @@ meta-index: true -

    In-page navigation

    +

    In-page navigation

    Target size (minimum)

    @@ -106,7 +106,7 @@ meta-index: true
    -

    Keep an eye on this page for more updates, and sign up to our mailing list to hear from us about future events and updates.

    +

    Keep an eye on this page for more updates, and sign up to our mailing list to hear from us about future events and updates.

    Consistent code and design language

    When using our foundations, components and themes, get access to fully synchronised UI and code kits for both designers and developers. This means everyone uses the same atomic components, with extended guidance also bridging the gap to help avoid design drift.

    @@ -118,4 +118,4 @@ meta-index: true

    Questions

    If you have any questions or would like to chat to us further about using the NSW Design System reach out to us at digital@customerservice.nsw.gov.au.

    Report issues

    -

    View and raise issues and bugs through our Issues tracker on Github or via Report a bug on the Community.

    \ No newline at end of file +

    View and raise issues and bugs through our Issues tracker on Github or via Report a bug on the Community.

    \ No newline at end of file