From 8df8a9c39d20a3db11b0265d1751db013ecc8040 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 24 Oct 2024 09:34:43 +0100 Subject: [PATCH 1/3] Fix broken external links in yml docs --- .../govuk/components/character-count/character-count.yaml | 8 ++++---- .../src/govuk/components/date-input/date-input.yaml | 2 +- .../govuk-frontend/src/govuk/components/input/input.yaml | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml index 32f907ba31..2111ff0439 100644 --- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml +++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml @@ -109,7 +109,7 @@ params: - name: charactersUnderLimitText type: object required: false - description: Message displayed when the number of characters is under the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining characters. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend). + description: Message displayed when the number of characters is under the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining characters. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/). - name: charactersAtLimitText type: string required: false @@ -117,11 +117,11 @@ params: - name: charactersOverLimitText type: object required: false - description: Message displayed when the number of characters is over the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend). + description: Message displayed when the number of characters is over the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/). - name: wordsUnderLimitText type: object required: false - description: Message displayed when the number of words is under the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining words. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend). + description: Message displayed when the number of words is under the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining words. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/). - name: wordsAtLimitText type: string required: false @@ -129,7 +129,7 @@ params: - name: wordsOverLimitText type: object required: false - description: Message displayed when the number of words is over the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend). + description: Message displayed when the number of words is over the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/). examples: - name: default diff --git a/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml b/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml index 870d000cae..f4634f0a06 100644 --- a/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml +++ b/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml @@ -35,7 +35,7 @@ params: - name: pattern type: string required: false - description: Attribute to [provide a regular expression pattern](https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value. + description: Attribute to [provide a regular expression pattern](https://html.spec.whatwg.org/multipage/input.html#the-pattern-attribute), used to match allowed character combinations for the input value. - name: classes type: string required: false diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml index 997b81d40c..dc171ea404 100644 --- a/packages/govuk-frontend/src/govuk/components/input/input.yaml +++ b/packages/govuk-frontend/src/govuk/components/input/input.yaml @@ -134,7 +134,7 @@ params: - name: pattern type: string required: false - description: Attribute to [provide a regular expression pattern](https://html.spec.whatwg.org/multipage/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value. + description: Attribute to [provide a regular expression pattern](https://html.spec.whatwg.org/multipage/input.html#the-pattern-attribute), used to match allowed character combinations for the input value. - name: spellcheck type: boolean required: false From 16f71d52676a0c4a9d39863ccbd27b88ea3697f9 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 21 Nov 2024 11:39:32 +0000 Subject: [PATCH 2/3] Make yaml link text clearer --- .../govuk/components/character-count/character-count.yaml | 8 ++++---- .../src/govuk/components/date-input/date-input.yaml | 2 +- .../govuk-frontend/src/govuk/components/input/input.yaml | 6 +++--- .../govuk/components/password-input/password-input.yaml | 2 +- .../src/govuk/components/textarea/textarea.yaml | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml index 2111ff0439..cd7369e179 100644 --- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml +++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml @@ -109,7 +109,7 @@ params: - name: charactersUnderLimitText type: object required: false - description: Message displayed when the number of characters is under the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining characters. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/). + description: Message displayed when the number of characters is under the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining characters. [Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules). - name: charactersAtLimitText type: string required: false @@ -117,11 +117,11 @@ params: - name: charactersOverLimitText type: object required: false - description: Message displayed when the number of characters is over the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/). + description: Message displayed when the number of characters is over the configured maximum, `maxlength`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum.[Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules). - name: wordsUnderLimitText type: object required: false - description: Message displayed when the number of words is under the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining words. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/). + description: Message displayed when the number of words is under the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining words. [Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules). - name: wordsAtLimitText type: string required: false @@ -129,7 +129,7 @@ params: - name: wordsOverLimitText type: object required: false - description: Message displayed when the number of words is over the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/). + description: Message displayed when the number of words is over the configured maximum, `maxwords`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of characters above the maximum. [Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules). examples: - name: default diff --git a/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml b/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml index f4634f0a06..121306be54 100644 --- a/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml +++ b/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml @@ -31,7 +31,7 @@ params: - name: autocomplete type: string required: false - description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance `"bday-day"`. See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used. + description: 'Attribute to meet [WCAG success criterion 1.3.5: Identify input purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html), for instance `"bday-day"`. See the [Autofill section in the HTML standard](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) section in the HTML standard for full list of attributes that can be used.' - name: pattern type: string required: false diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml index dc171ea404..bfe5a807c2 100644 --- a/packages/govuk-frontend/src/govuk/components/input/input.yaml +++ b/packages/govuk-frontend/src/govuk/components/input/input.yaml @@ -14,7 +14,7 @@ params: - name: inputmode type: string required: false - description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode). + description: Optional value for [the inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode). - name: value type: string required: false @@ -130,7 +130,7 @@ params: - name: autocomplete type: string required: false - description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used. + description: 'Attribute to meet [WCAG success criterion 1.3.5: Identify input purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html), for instance `"bday-day"`. See the [Autofill section in the HTML standard](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) section in the HTML standard for full list of attributes that can be used.' - name: pattern type: string required: false @@ -142,7 +142,7 @@ params: - name: autocapitalize type: string required: false - description: Optional field to enable or disable autocapitalisation of user input. See [autocapitalization](https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization) for a full list of values that can be used. + description: Optional field to enable or disable autocapitalisation of user input. [See the Autocapitalization section in the HTML spec](https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization) for a full list of values that can be used. - name: inputWrapper type: object required: false diff --git a/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml b/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml index 80a4d546bd..33e6d92be2 100644 --- a/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml +++ b/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml @@ -80,7 +80,7 @@ params: - name: autocomplete type: string required: false - description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html). See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of values that can be used. Default is `"current-password"`. + description: 'Attribute to meet [WCAG success criterion 1.3.5: Identify input purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html). See the [Autofill section in the HTML standard](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used. Default is `"current-password"`.' - name: attributes type: object required: false diff --git a/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml b/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml index b2ce89b96e..69edca64fb 100644 --- a/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml +++ b/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml @@ -88,7 +88,7 @@ params: - name: autocomplete type: string required: false - description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for example `"street-address"`. See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used. + description: 'Attribute to meet [WCAG success criterion 1.3.5: Identify input purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html), for instance `"bday-day"`. See the [Autofill section in the HTML standard](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) section in the HTML standard for full list of attributes that can be used.' - name: attributes type: object required: false From 3ceb9f45a932a52d1212792bf3dfed333a770ed8 Mon Sep 17 00:00:00 2001 From: Owen Jones Date: Thu, 21 Nov 2024 11:40:02 +0000 Subject: [PATCH 3/3] Replace remaining instances of WCAG 2.1 links with 2.2 --- ...test-components-using-accessibility-acceptance-criteria.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/contributing/test-components-using-accessibility-acceptance-criteria.md b/docs/contributing/test-components-using-accessibility-acceptance-criteria.md index 2acb3fdc50..9c09d44e6a 100644 --- a/docs/contributing/test-components-using-accessibility-acceptance-criteria.md +++ b/docs/contributing/test-components-using-accessibility-acceptance-criteria.md @@ -18,7 +18,7 @@ You should also [test your component with disabled people](https://www.gov.uk/se ## How the GOV.UK Design System's accessibility acceptance criteria relate to WCAG -The GOV.UK Design System accessibility acceptance criteria are a combination of the [WCAG (Web Content Accessibility Guidelines)](https://www.w3.org/TR/WCAG21/) and the general accessibility requirements that components need to meet. +The GOV.UK Design System accessibility acceptance criteria are a combination of the [WCAG (Web Content Accessibility Guidelines)](https://www.w3.org/TR/WCAG22/) and the general accessibility requirements that components need to meet. The GOV.UK Design System’s accessibility acceptance criteria are complementary to WCAG and do not replace it. @@ -44,7 +44,7 @@ To show clearly to users, components should: - not depend on colour alone to communicate information - not move (for example, flash or blink) - be visually distinct from other elements on the page -- use [semantic markup](https://www.w3.org/WAI/WCAG21/Techniques/general/G115.html) +- use [semantic markup](https://www.w3.org/WAI/WCAG22/Techniques/general/G115.html) - if necessary, hide and display content consistently for both screen reader users and sighted users - [learn more about hiding and displaying content](https://webaim.org/techniques/css/invisiblecontent/#intro) To make sure users can use them, components should at least be operable with: