Fix missing elements using id="content" on the preview container

Fixes Skip link `href` target and various ARIA referenced elements
alphagov · Nov 1, 2023 · 3ed9d1f · 3ed9d1f
1 parent 345abcd
commit 3ed9d1f
Show file tree

Hide file tree

Showing 22 changed files with 65 additions and 77 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/button/accessibility.puppeteer.test.mjs b/packages/govuk-frontend/src/govuk/components/button/accessibility.puppeteer.test.mjs
@@ -2,25 +2,13 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/button', () => {
-  let axeRules
-
-  beforeAll(() => {
-    axeRules = {
-      /**
-       * Ignore 'Invalid ARIA attribute value: aria-controls="example-id"'
-       * for missing IDs
-       */
-      'aria-valid-attr-value': { enabled: false }
-    }
-  })
-
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('button')
 
       for (const exampleName in examples) {
         await render(page, 'button', examples[exampleName])
-        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
+        await expect(axe(page)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.yaml b/packages/govuk-frontend/src/govuk/components/button/button.yaml
@@ -186,23 +186,23 @@ examples:
       element: button
       text: Submit
       attributes:
-        aria-controls: example-id
+        aria-controls: content
         data-tracking-dimension: 123
   - name: link attributes
     hidden: true
     options:
       element: a
       text: Submit
       attributes:
-        aria-controls: example-id
+        aria-controls: content
         data-tracking-dimension: 123
   - name: input attributes
     hidden: true
     options:
       element: input
       text: Submit
       attributes:
-        aria-controls: example-id
+        aria-controls: content
         data-tracking-dimension: 123
   - name: classes
     hidden: true

diff --git a/packages/govuk-frontend/src/govuk/components/button/template.test.js b/packages/govuk-frontend/src/govuk/components/button/template.test.js
@@ -23,7 +23,7 @@ describe('Button', () => {
       const $ = render('button', examples.attributes)
 
       const $component = $('.govuk-button')
-      expect($component.attr('aria-controls')).toEqual('example-id')
+      expect($component.attr('aria-controls')).toEqual('content')
       expect($component.attr('data-tracking-dimension')).toEqual('123')
     })
 
@@ -123,7 +123,7 @@ describe('Button', () => {
       const $ = render('button', examples['link attributes'])
 
       const $component = $('.govuk-button')
-      expect($component.attr('aria-controls')).toEqual('example-id')
+      expect($component.attr('aria-controls')).toEqual('content')
       expect($component.attr('data-tracking-dimension')).toEqual('123')
     })
 
@@ -148,7 +148,7 @@ describe('Button', () => {
       const $ = render('button', examples['input attributes'])
 
       const $component = $('.govuk-button')
-      expect($component.attr('aria-controls')).toEqual('example-id')
+      expect($component.attr('aria-controls')).toEqual('content')
       expect($component.attr('data-tracking-dimension')).toEqual('123')
     })
 

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml
@@ -696,7 +696,7 @@ examples:
     options:
       name: example-name
       fieldset:
-        describedBy: some-id
+        describedBy: content
         legend:
           text: Which option?
       items:
@@ -804,7 +804,7 @@ examples:
       errorMessage:
         text: Please select an option
       fieldset:
-        describedBy: some-id
+        describedBy: content
         legend:
           text: What is your nationality?
       hint:
@@ -858,7 +858,7 @@ examples:
   - name: with single option set 'aria-describedby' on input, and describedBy
     hidden: true
     options:
-      describedBy: some-id
+      describedBy: content
       name: t-and-c
       errorMessage:
         text: Please accept the terms and conditions
@@ -868,7 +868,7 @@ examples:
   - name: with single option (and hint) set 'aria-describedby' on input, and describedBy
     hidden: true
     options:
-      describedBy: some-id
+      describedBy: content
       name: t-and-c-with-hint
       errorMessage:
         text: Please accept the terms and conditions
@@ -894,7 +894,7 @@ examples:
       errorMessage:
         text: Please select an option
       fieldset:
-        describedBy: some-id
+        describedBy: content
         legend:
           text: What is your nationality?
       items:

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js b/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js
@@ -82,7 +82,7 @@ describe('Checkboxes', () => {
     const $ = render('checkboxes', examples['with fieldset describedBy'])
 
     const $fieldset = $('.govuk-fieldset')
-    expect($fieldset.attr('aria-describedby')).toMatch('some-id')
+    expect($fieldset.attr('aria-describedby')).toMatch('content')
   })
 
   it('render attributes', () => {
@@ -404,7 +404,7 @@ describe('Checkboxes', () => {
       const errorMessageId = $('.govuk-error-message').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}some-id${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}content${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby')).toMatch(describedBy)
@@ -461,7 +461,7 @@ describe('Checkboxes', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}content${WHITESPACE}${hintId}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby')).toMatch(describedBy)
@@ -495,7 +495,7 @@ describe('Checkboxes', () => {
       const errorMessageId = $('.govuk-error-message').attr('id')
 
       const describedByCombined = new RegExp(
-        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}content${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby')).toMatch(describedByCombined)
@@ -548,7 +548,7 @@ describe('Checkboxes', () => {
       const $ = render('checkboxes', examples[exampleName])
       const $input = $('input')
 
-      expect($input.attr('aria-describedby')).toMatch('some-id t-and-c-error')
+      expect($input.attr('aria-describedby')).toMatch('content t-and-c-error')
     })
   })
 
@@ -573,7 +573,7 @@ describe('Checkboxes', () => {
       const $input = $('input')
 
       expect($input.attr('aria-describedby')).toMatch(
-        'some-id t-and-c-with-hint-error t-and-c-with-hint-item-hint'
+        'content t-and-c-with-hint-error t-and-c-with-hint-item-hint'
       )
     })
   })

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
@@ -349,7 +349,7 @@ examples:
     options:
       id: dob-errors
       fieldset:
-        describedBy: some-id
+        describedBy: content
         legend:
           text: What is your date of birth?
       hint:
@@ -359,7 +359,7 @@ examples:
     options:
       id: dob-errors
       fieldset:
-        describedBy: some-id
+        describedBy: content
         legend:
           text: What is your date of birth?
       errorMessage:

diff --git a/packages/govuk-frontend/src/govuk/components/date-input/template.test.js b/packages/govuk-frontend/src/govuk/components/date-input/template.test.js
@@ -206,7 +206,7 @@ describe('Date input', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}content${WHITESPACE}${hintId}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby')).toMatch(describedBy)
@@ -246,7 +246,7 @@ describe('Date input', () => {
       const $fieldset = $('.govuk-fieldset')
 
       expect($fieldset.attr('aria-describedby')).toMatch(
-        'some-id dob-errors-error'
+        'content dob-errors-error'
       )
     })
 

diff --git a/packages/govuk-frontend/src/govuk/components/fieldset/fieldset.yaml b/packages/govuk-frontend/src/govuk/components/fieldset/fieldset.yaml
@@ -113,7 +113,7 @@ examples:
   - name: with describedBy
     hidden: true
     options:
-      describedBy: some-id
+      describedBy: content
       legend:
         text: Which option?
   - name: html as text

diff --git a/packages/govuk-frontend/src/govuk/components/fieldset/template.test.js b/packages/govuk-frontend/src/govuk/components/fieldset/template.test.js
@@ -40,7 +40,7 @@ describe('fieldset', () => {
     const $ = render('fieldset', examples['with describedBy'])
 
     const $component = $('.govuk-fieldset')
-    expect($component.attr('aria-describedby')).toEqual('some-id')
+    expect($component.attr('aria-describedby')).toEqual('content')
   })
 
   it('escapes HTML in the text argument', () => {

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
@@ -126,15 +126,15 @@ examples:
       name: file-upload-describedby
       label:
         text: Upload a file
-      describedBy: some-id
+      describedBy: content
   - name: with hint and describedBy
     hidden: true
     options:
       id: file-upload-hint-describedby
       name: file-upload-hint-describedby
       label:
         text: Upload a file
-      describedBy: some-id
+      describedBy: content
       hint:
         text: Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
   - name: error
@@ -153,7 +153,7 @@ examples:
       name: file-upload-error-describedby
       label:
         text: Upload a file
-      describedBy: some-id
+      describedBy: content
       errorMessage:
         text: Error message
   - name: with error, describedBy and hint
@@ -163,7 +163,7 @@ examples:
       name: file-upload-error-describedby-hint
       label:
         text: Upload a file
-      describedBy: some-id
+      describedBy: content
       errorMessage:
         text: Error message
       hint:

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js
@@ -56,7 +56,7 @@ describe('File upload', () => {
       const $ = render('file-upload', examples['with describedBy'])
 
       const $component = $('.govuk-file-upload')
-      expect($component.attr('aria-describedby')).toMatch('some-id')
+      expect($component.attr('aria-describedby')).toMatch('content')
     })
 
     it('renders with attributes', () => {
@@ -104,7 +104,7 @@ describe('File upload', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}content${WHITESPACE}${hintId}${WORD_BOUNDARY}`
       )
 
       expect($component.attr('aria-describedby')).toMatch(describedBy)
@@ -138,7 +138,7 @@ describe('File upload', () => {
       const errorMessageId = $('.govuk-error-message').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}some-id${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}content${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($component.attr('aria-describedby')).toMatch(describedBy)
@@ -175,7 +175,7 @@ describe('File upload', () => {
     })
 
     it('associates the input as described by the hint, error message and parent fieldset', () => {
-      const describedById = 'some-id'
+      const describedById = 'content'
 
       const $ = render(
         'file-upload',

diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml
@@ -351,7 +351,7 @@ examples:
       name: with-describedby
       label:
         text: With describedBy
-      describedBy: some-id
+      describedBy: content
   - name: attributes
     hidden: true
     options:
@@ -368,7 +368,7 @@ examples:
       name: with-hint-describedby
       label:
         text: With hint describedBy
-      describedBy: some-id
+      describedBy: content
       hint:
         text: It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   - name: error with describedBy
@@ -378,7 +378,7 @@ examples:
       name: with-error-describedby
       label:
         text: With error describedBy
-      describedBy: some-id
+      describedBy: content
       errorMessage:
         text: Error message
   - name: with error and hint
@@ -403,7 +403,7 @@ examples:
         text: Error message
       hint:
         text: Hint
-      describedBy: some-id
+      describedBy: content
   - name: inputmode
     hidden: true
     options:

diff --git a/packages/govuk-frontend/src/govuk/components/input/template.test.js b/packages/govuk-frontend/src/govuk/components/input/template.test.js
@@ -75,7 +75,7 @@ describe('Input', () => {
       const $ = render('input', examples['with describedBy'])
 
       const $component = $('.govuk-input')
-      expect($component.attr('aria-describedby')).toMatch('some-id')
+      expect($component.attr('aria-describedby')).toMatch('content')
     })
 
     it('renders with attributes', () => {
@@ -127,7 +127,7 @@ describe('Input', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}content${WHITESPACE}${hintId}${WORD_BOUNDARY}`
       )
 
       expect($input.attr('aria-describedby')).toMatch(describedBy)
@@ -161,7 +161,7 @@ describe('Input', () => {
       const errorMessageId = $('.govuk-error-message').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}some-id${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}content${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($input.attr('aria-describedby')).toMatch(describedBy)
@@ -228,7 +228,7 @@ describe('Input', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const describedByCombined = new RegExp(
-        `${WORD_BOUNDARY}some-id${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}content${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($component.attr('aria-describedby')).toMatch(describedByCombined)

diff --git a/packages/govuk-frontend/src/govuk/components/label/label.yaml b/packages/govuk-frontend/src/govuk/components/label/label.yaml
@@ -93,7 +93,7 @@ examples:
   - name: for
     hidden: true
     options:
-      for: '#dummy-input'
+      for: content
       text: National Insurance number
   - name: attributes
     hidden: true

diff --git a/packages/govuk-frontend/src/govuk/components/label/template.test.js b/packages/govuk-frontend/src/govuk/components/label/template.test.js
@@ -58,7 +58,7 @@ describe('Label', () => {
       const $ = render('label', examples.for)
 
       const labelForAttr = $('.govuk-label').attr('for')
-      expect(labelForAttr).toEqual('#dummy-input')
+      expect(labelForAttr).toEqual('content')
     })
 
     it('can be nested inside an H1 using isPageHeading', () => {