Add HTML validation rules for missing elements

[colinrotherham]

This PR enables extra HTML validation rules:

1. input-missing-label – Require input to have a label
2. no-missing-references – Require all form field and ARIA references to exist

But also adds the HTML validation preset html-validate:document for testing govuk/template.njk

The good news is we’re fully valid already, but we’d be extra safe 😅

Missing elements

To resolve missing elements, we could use render() renderPreview() to render the entire page

But instead I've taken the id="content" wrapper like we did for Skip link accessibility tests in #4346 and updated it with @36degrees's idea to use a dummy element instead:

  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>
  `

This passes validation for examples that add aria-describedby etc such as in fieldset.yaml

  - name: with describedBy
    hidden: true
    options:
-     describedBy: content
+     describedBy: test-target-element
      legend:
        text: Which option?

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-5.0.0-beta.1.min.css	114 KiB
dist/govuk-frontend-5.0.0-beta.1.min.js	37.93 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	77.02 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	72.35 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.8 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.53 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	37.94 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.3 KiB

Modules

File	Size
all.mjs	68.67 KiB
components/accordion/accordion.mjs	21.37 KiB
components/button/button.mjs	4.48 KiB
components/character-count/character-count.mjs	20.78 KiB
components/checkboxes/checkboxes.mjs	5.61 KiB
components/error-summary/error-summary.mjs	5.79 KiB
components/exit-this-page/exit-this-page.mjs	15.79 KiB
components/header/header.mjs	3.68 KiB
components/notification-banner/notification-banner.mjs	4.32 KiB
components/radios/radios.mjs	4.6 KiB
components/skip-link/skip-link.mjs	3.6 KiB
components/tabs/tabs.mjs	9.33 KiB

View stats and visualisations on the review app

---

Action run for f4f16a0

[36degrees]

I think this could be slightly misleading because this looks very much like one of our main wrapper elements, which I don't think is something you'd ever associate with a component using aria-describedby.

Can we make it clearer what this is for by:

• adding the extra element after the rendered component
• changing the ID to something like test-target-element (and in the corresponding examples)
• adding a comment to explain what it's for

Suggested change

	const html = outdent`
	<div id="content" class="govuk-width-container">
	${render(componentName, {
	context: fixture.options,
	fixture
	})}
	</div>
	`
	const html = outdent`
	${render(componentName, {
	context: fixture.options,
	fixture
	})}
	<div id="test-target-element">
	<!-- Target for references in examples (e.g. aria-describedby) so no-missing-references can pass -->
	</div>
	`

[colinrotherham]

@36degrees Mind if I tag @romaricpascal in?

I thought the same as you but we agreed it was acceptable for the Skip link accessibility tests

I'd like to make your suggestion there too

[36degrees]

Not sure I follow, sorry – how is the skip link involved here?

[colinrotherham]

Ah I'll explain, it was covered in dev catch-up after your holiday

E.g. Skip link failed Accessibility tests (JavaScript error) without a target element

So we decided that a dummy element ID was acceptable for now, but due to hard-coded defaults like default("#content", true) we added id="content" to the component preview wrapper just like in this PR

I like your suggestion so perhaps we can annotate the test ID in both wrappers?

[colinrotherham]

Here's the existing component preview wrapper with id="content" added in 3ed9d1f

govuk-frontend/shared/lib/components.js

Lines 209 to 211 in 3ed9d1f

	<div id="content" class="govuk-width-container">
	${render(componentName, options)}
	</div>

[36degrees]

Thanks, that's helpful context 👍🏻

I think annotating the test ID in both wrappers sounds like a good solution.

[colinrotherham]

Morning 👋

I've swapped all the #content references in 3ed9d1f to test-target-element

Whilst the HTML validation tests lack the <div id="content"> wrapper, it's still needed by:

npx jest --selectProjects "Accessibility tests"
npx jest --selectProjects "JavaScript component tests"

But that's only because it's hard coded in href="{{ params.href | default("#content", true) }}"

Without it we'll see JavaScript warnings for every Skip link example:

  console.warn
    Initialising `new SkipLink()` with example 'no href' threw:
     ElementError: Skip link: Target content (`id="content"`) not found

Think we're looking good now, ready for review again 👍

[36degrees]

Looks great, thanks for making that change 👍🏻 Think it's a lot clearer what's going on now.

[colinrotherham]

Looks great, thanks for making that change 👍🏻 Think it's a lot clearer what's going on now.

Totally agree. Thanks for pushing for it