Add HTML validation rules for missing elements

packages/govuk-frontend/.htmlvalidate.js

@@ -15,9 +15,15 @@ module.exports = {
     // Allow pattern attribute on input type="number"
     'input-attributes': 'off',
 
+    // Require input to have a label
+    'input-missing-label': 'error',
+
     // Allow inline styles for testing purposes
     'no-inline-style': 'off',
 
+    // Require all form field and ARIA references to exist
+    'no-missing-references': 'error',
+
     // Allow for explicit roles on regions that have implict roles
     // We do this to better support AT with older versions of IE that
     // have partial support for HTML5 semantic elements

packages/govuk-frontend/src/govuk/components/button/button.yaml

@@ -186,23 +186,23 @@ examples:
       element: button
       text: Submit
       attributes:
-        aria-controls: content
+        aria-controls: test-target-element
         data-tracking-dimension: 123
   - name: link attributes
     hidden: true
     options:
       element: a
       text: Submit
       attributes:
-        aria-controls: content
+        aria-controls: test-target-element
         data-tracking-dimension: 123
   - name: input attributes
     hidden: true
     options:
       element: input
       text: Submit
       attributes:
-        aria-controls: content
+        aria-controls: test-target-element
         data-tracking-dimension: 123
   - name: classes
     hidden: true

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('content')
+      expect($component.attr('aria-controls')).toEqual('test-target-element')
       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('content')
+      expect($component.attr('aria-controls')).toEqual('test-target-element')
       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('content')
+      expect($component.attr('aria-controls')).toEqual('test-target-element')
       expect($component.attr('data-tracking-dimension')).toEqual('123')
     })
 

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml

@@ -696,7 +696,7 @@ examples:
     options:
       name: example-name
       fieldset:
-        describedBy: content
+        describedBy: test-target-element
         legend:
           text: Which option?
       items:
@@ -804,7 +804,7 @@ examples:
       errorMessage:
         text: Please select an option
       fieldset:
-        describedBy: content
+        describedBy: test-target-element
         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: content
+      describedBy: test-target-element
       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: content
+      describedBy: test-target-element
       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: content
+        describedBy: test-target-element
         legend:
           text: What is your nationality?
       items:

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('content')
+    expect($fieldset.attr('aria-describedby')).toMatch('test-target-element')
   })
 
   it('render attributes', () => {
@@ -404,7 +404,7 @@ describe('Checkboxes', () => {
       const errorMessageId = $('.govuk-error-message').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}content${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}test-target-element${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}content${WHITESPACE}${hintId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}test-target-element${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}content${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}test-target-element${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($fieldset.attr('aria-describedby')).toMatch(describedByCombined)
@@ -548,7 +548,9 @@ describe('Checkboxes', () => {
       const $ = render('checkboxes', examples[exampleName])
       const $input = $('input')
 
-      expect($input.attr('aria-describedby')).toMatch('content t-and-c-error')
+      expect($input.attr('aria-describedby')).toMatch(
+        'test-target-element t-and-c-error'
+      )
     })
   })
 
@@ -573,7 +575,7 @@ describe('Checkboxes', () => {
       const $input = $('input')
 
       expect($input.attr('aria-describedby')).toMatch(
-        'content t-and-c-with-hint-error t-and-c-with-hint-item-hint'
+        'test-target-element t-and-c-with-hint-error t-and-c-with-hint-item-hint'
       )
     })
   })

packages/govuk-frontend/src/govuk/components/components.template.test.js

@@ -9,6 +9,7 @@ const {
 } = require('@govuk-frontend/lib/components')
 const validatorConfig = require('govuk-frontend/.htmlvalidate.js')
 const { HtmlValidate } = require('html-validate')
+const { outdent } = require('outdent')
 
 describe('Components', () => {
   let nunjucksEnvCustom
@@ -65,10 +66,18 @@ describe('Components', () => {
       // Validate component examples
       for (const { component: componentName, fixtures } of componentsFixtures) {
         const fixtureTasks = fixtures.map(async (fixture) => {
-          const html = render(componentName, {
-            context: fixture.options,
-            fixture
-          })
+          const html = outdent`
+            ${render(componentName, {
+              context: fixture.options,
+              fixture
+            })}
+
+            <!--
+              Target for references in examples (e.g. aria-controls)
+              https://html-validate.org/rules/no-missing-references.html
+            -->
+            <div id="test-target-element"></div>
+          `
 
           // Validate HTML
           return expect({

packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml

@@ -349,7 +349,7 @@ examples:
     options:
       id: dob-errors
       fieldset:
-        describedBy: content
+        describedBy: test-target-element
         legend:
           text: What is your date of birth?
       hint:
@@ -359,7 +359,7 @@ examples:
     options:
       id: dob-errors
       fieldset:
-        describedBy: content
+        describedBy: test-target-element
         legend:
           text: What is your date of birth?
       errorMessage:

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}content${WHITESPACE}${hintId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}test-target-element${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(
-        'content dob-errors-error'
+        'test-target-element dob-errors-error'
       )
     })
 

packages/govuk-frontend/src/govuk/components/fieldset/fieldset.yaml

@@ -113,7 +113,7 @@ examples:
   - name: with describedBy
     hidden: true
     options:
-      describedBy: content
+      describedBy: test-target-element
       legend:
         text: Which option?
   - name: html as text

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('content')
+    expect($component.attr('aria-describedby')).toEqual('test-target-element')
   })
 
   it('escapes HTML in the text argument', () => {

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: content
+      describedBy: test-target-element
   - name: with hint and describedBy
     hidden: true
     options:
       id: file-upload-hint-describedby
       name: file-upload-hint-describedby
       label:
         text: Upload a file
-      describedBy: content
+      describedBy: test-target-element
       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: content
+      describedBy: test-target-element
       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: content
+      describedBy: test-target-element
       errorMessage:
         text: Error message
       hint:

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('content')
+      expect($component.attr('aria-describedby')).toMatch('test-target-element')
     })
 
     it('renders with attributes', () => {
@@ -104,7 +104,7 @@ describe('File upload', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}content${WHITESPACE}${hintId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}test-target-element${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}content${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}test-target-element${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 = 'content'
+      const describedById = 'test-target-element'
 
       const $ = render(
         'file-upload',

packages/govuk-frontend/src/govuk/components/input/input.yaml

@@ -351,7 +351,7 @@ examples:
       name: with-describedby
       label:
         text: With describedBy
-      describedBy: content
+      describedBy: test-target-element
   - name: attributes
     hidden: true
     options:
@@ -368,7 +368,7 @@ examples:
       name: with-hint-describedby
       label:
         text: With hint describedBy
-      describedBy: content
+      describedBy: test-target-element
       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: content
+      describedBy: test-target-element
       errorMessage:
         text: Error message
   - name: with error and hint
@@ -403,7 +403,7 @@ examples:
         text: Error message
       hint:
         text: Hint
-      describedBy: content
+      describedBy: test-target-element
   - name: inputmode
     hidden: true
     options:

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('content')
+      expect($component.attr('aria-describedby')).toMatch('test-target-element')
     })
 
     it('renders with attributes', () => {
@@ -127,7 +127,7 @@ describe('Input', () => {
       const hintId = $('.govuk-hint').attr('id')
 
       const describedBy = new RegExp(
-        `${WORD_BOUNDARY}content${WHITESPACE}${hintId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}test-target-element${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}content${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}test-target-element${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}content${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
+        `${WORD_BOUNDARY}test-target-element${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
       )
 
       expect($component.attr('aria-describedby')).toMatch(describedByCombined)