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 1e1728e8..df8f69a2 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 1c2c86ff..7bc982f3 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 2f403ea2..6973ab7e 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 b95f54e8..716b5c7b 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 246801c8..276316d7 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 6973ab7e..61302705 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 57a5a8f6..9870607c 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 19e8a897..9d2fca0f 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 dbc6d110..a4e789b0 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 855512e5..3be28ab2 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 e6061270..79c55bdd 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 e8d286b5..13fcf254 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 4e7da05d..5a5024c6 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 632ebd1c..9cd2285d 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 d13cfc33..da4a97af 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 3f8dd260..26c01d15 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 d473fa6a..63feff84 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 a78e6784..3a940f9f 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 9cf3fc42..e9b61520 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 03ea59cc..ca0206e1 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 101205fc..8b41a0d9 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 88e98f9e..b3558d37 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 31d12a03..ce8a040c 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 46996d68..d1e51184 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 7c01625f..ed10ef6b 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 2981ebb8..860f255e 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 55458722..3a4e0f28 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 0da67c5d..74ca43e0 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 56aa8115..75ad1096 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 57cd87ad..d5bbfa69 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 9cfa6bf7..b5d019da 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 44eb00da..d3156830 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 2ecdca6b..f279c5f0 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 8d792739..310016d5 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 f8d16cc1..4d5b7b2f 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 fced8adf..bc7b5486 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 4efb74e6..f1e8964e 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 80cace14..59240f1d 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 052c1538..b76ee61f 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 827da7b4..72ccaa2e 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 493d55e1..c2aea192 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 b25e7757..fa97a41a 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 755fa401..4eaee37f 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 65fbd224..b841d0d6 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 28c1d9e8..7c2148de 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 6b2ed8a1..f53cbe6a 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 4286cc9c..f24a77f3 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 cbc9f0a6..ab84a984 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 fbf3414e..80d02628 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 c4fa6b6f..6bdb9749 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 9456ae91..c9f0fa88 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 5d997bd0..1e217359 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 bb93626d..f82e3f84 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 352bf9f8..ae701e22 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 df8f69a2..09c7ed88 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 dd9ba565..b315eaa3 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 b315eaa3..cf5abe4d 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 09c7ed88..1e1728e8 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 de4f9348..f70c8989 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 6eef5b01..4bf42438 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 96d10466..723bbc7b 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 2428c7ad..d3b093c4 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 a4e789b0..ae8c992b 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 3be28ab2..a10a4010 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 79c55bdd..819dce7b 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 13fcf254..d29dad9c 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 5a5024c6..15634d38 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 9cd2285d..f58b7c1b 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 da4a97af..8fd2f915 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 26c01d15..aaf74bd4 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 63feff84..1680acff 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 3a940f9f..ff8de926 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 e9b61520..787f329a 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 ca0206e1..6229f186 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 8b41a0d9..36d987ed 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 b3558d37..6e801870 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 ce8a040c..23cbd2b0 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 d1e51184..fe678f74 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 ed10ef6b..4eb75580 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 860f255e..247e32c9 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 3a4e0f28..54e782c2 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 74ca43e0..70ad1089 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 75ad1096..ef80b61e 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 d5bbfa69..1803b8b0 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 b5d019da..41e75ed2 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 d3156830..64d62970 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 f279c5f0..0ed0d020 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 310016d5..97b1718e 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 4d5b7b2f..cf32dbba 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 bc7b5486..fca529c1 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 f1e8964e..5b9299d0 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 59240f1d..7fb8361f 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 b76ee61f..6f1253dd 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 72ccaa2e..fa22bbbd 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 c2aea192..7452d5eb 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 fa97a41a..184a66ae 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 4eaee37f..edaa9404 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 b841d0d6..f767d801 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 7c2148de..24086955 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 f53cbe6a..b6e78b64 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 f24a77f3..57816cc5 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 cf5abe4d..92c6c11d 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 92c6c11d..3627a540 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 3627a540..b8cb6493 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 c9f0fa88..5f1aba51 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 5f1aba51..e5954ca2 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 e5954ca2..5f1aba51 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 5f1aba51..f492d1f0 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 af01fd3d..544236a2 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 23cbd2b0..7dfc0d7a 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 f492d1f0..1c134498 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