Switch to HTML-validate for validation

.htmlvalidate.js

@@ -0,0 +1,49 @@
+const { defineConfig } = require('html-validate')
+
+/**
+ * HTML validation config
+ *
+ * {@link https://html-validate.org/rules/}
+ */
+module.exports = defineConfig({
+  extends: ['html-validate:recommended', 'html-validate:document'],
+  rules: {
+    // Allow components to set boolean attributes with empty values
+    // e.g. using `disabled: true` for <button disabled="disabled">
+    'attribute-boolean-style': 'off',
+
+    // Allow for multiple buttons in the same form to have the same name
+    'form-dup-name': ['error', { shared: ['radio', 'checkbox', 'submit'] }],
+
+    // Allow inline styles for testing purposes
+    'no-inline-style': 'off',
+
+    // Allow long page titles with appended "- NHS.UK frontend"
+    'long-title': 'off',
+
+    // Allow implicit type="button" (without attribute):
+    'no-implicit-button-type': 'off',
+
+    // Allow headings to begin from <h2> etc rather than <h1>
+    'heading-level': 'off',
+
+    // Allow for explicit roles on regions that have implicit roles
+    // We do this to better support AT with older versions of IE that
+    // have partial support for HTML5 semantic elements
+    'no-redundant-role': 'off',
+
+    // More hassle than it's worth 👾
+    'no-trailing-whitespace': 'off',
+
+    // Allow use of roles where there are native elements that would give
+    // us that role automatically, e.g. <button> instead of
+    // <a href="/" draggable="false" role="button">
+    'prefer-native-element': 'off',
+
+    // Allow optional subresource integrity (SRI)
+    'require-sri': 'off',
+
+    // Allow optional submit buttons in <form> wrapped examples
+    'wcag/h32': 'off'
+  }
+})

app/components/all.njk

@@ -260,43 +260,43 @@
   {{ details({
     "classes": "nhsuk-expander",
     "text": "Opening times",
-    "HTML": "
+    "HTML": '
     <table>
       <tbody>
         <tr>
-          <th><strong>Day of the week</strong></th>
-          <th><strong>Opening hours</strong></th>
+          <th scope="col"><strong>Day of the week</strong></th>
+          <th scope="col"><strong>Opening hours</strong></th>
         </tr>
         <tr>
-          <th>Monday</th>
+          <th scope="row">Monday</th>
           <td>9am to 6pm</td>
         </tr>
         <tr>
-          <th>Tuesday</th>
+          <th scope="row">Tuesday</th>
           <td>9am to 6pm</td>
         </tr>
         <tr>
-          <th>Wednesday</th>
+          <th scope="row">Wednesday</th>
           <td>9am to 6pm</td>
         </tr>
         <tr>
-          <th>Thursday</th>
+          <th scope="row">Thursday</th>
           <td>9am to 6pm</td>
         </tr>
         <tr>
-          <th>Friday</th>
+          <th scope="row">Friday</th>
           <td>9am to 6pm</td>
         </tr>
         <tr>
-          <th>Saturday</th>
+          <th scope="row">Saturday</th>
           <td>9am to 1pm</td>
         </tr>
         <tr>
-          <th>Sunday</th>
+          <th scope="row">Sunday</th>
           <td>Closed</td>
         </tr>
       </tbody>
-    </table>"
+    </table>'
   }) }}
 
   <div class="nhsuk-expander-group">

app/components/checkboxes/none-of-the-above.njk

@@ -62,7 +62,6 @@
                 {
                   "value": "email",
                   "text": "Email",
-                  "name": "email",
                   "exclusiveGroup": "communication-preferences",
                   "conditional": {
                     "html": emailHtml
@@ -71,7 +70,6 @@
                 {
                   "value": "phone",
                   "text": "Phone",
-                  "name": "phone",
                   "exclusiveGroup": "communication-preferences",
                   "conditional": {
                     "html": phoneHtml
@@ -80,7 +78,6 @@
                 {
                   "value": "text",
                   "text": "Text message",
-                  "name": "text",
                   "exclusiveGroup": "communication-preferences",
                   "conditional": {
                     "html": mobileHtml
@@ -92,7 +89,6 @@
                 {
                   "value": "none",
                   "text": "None of the above",
-                  "name": "none",
                   "exclusive": true,
                   "exclusiveGroup": "communication-preferences"
                 }

app/components/details/expander.njk

@@ -13,43 +13,43 @@
         {{ details({
           "classes": "nhsuk-expander",
           "text": "Opening times",
-          "HTML": "
+          "HTML": '
           <table>
             <tbody>
               <tr>
-                <th><strong>Day of the week</strong></th>
-                <th><strong>Opening hours</strong></th>
+                <th scope="col"><strong>Day of the week</strong></th>
+                <th scope="col"><strong>Opening hours</strong></th>
               </tr>
               <tr>
-                <th>Monday</th>
+                <th scope="row">Monday</th>
                 <td>9am to 6pm</td>
               </tr>
               <tr>
-                <th>Tuesday</th>
+                <th scope="row">Tuesday</th>
                 <td>9am to 6pm</td>
               </tr>
               <tr>
-                <th>Wednesday</th>
+                <th scope="row">Wednesday</th>
                 <td>9am to 6pm</td>
               </tr>
               <tr>
-                <th>Thursday</th>
+                <th scope="row">Thursday</th>
                 <td>9am to 6pm</td>
               </tr>
               <tr>
-                <th>Friday</th>
+                <th scope="row">Friday</th>
                 <td>9am to 6pm</td>
               </tr>
               <tr>
-                <th>Saturday</th>
+                <th scope="row">Saturday</th>
                 <td>9am to 1pm</td>
               </tr>
               <tr>
-                <th>Sunday</th>
+                <th scope="row">Sunday</th>
                 <td>Closed</td>
               </tr>
             </tbody>
-          </table>"
+          </table>'
         }) }}
       </div>
     </div>

docs/contributing/tooling.md

@@ -23,8 +23,9 @@ To run a gulp task, run `./node_modules/.bin/gulp <task_name>` on the command li
 | `build`      | Compiles CSS and JS                                                    |
 | `bundle`     | Creates distributable CSS and JS files in `dist/`                      |
 | `zip`        | Creates a distributable zip file in `dist/`                            |
-| `watch`      | Recompile documentation and distributables when there are changes      |
+| `watch`      | Recompile distributables when there are changes                        |
 | `docs:build` | Recompile documentation                                                |
+| `docs:watch` | Recompile documentation when there are changes                         |
 | `docs:serve` | Serve documentation on port 3000                                       |
 
 ---

gulpfile.js

@@ -6,7 +6,6 @@ const postcss = require('gulp-postcss')
 const rename = require('gulp-rename')
 const gulpSass = require('gulp-sass')
 const terser = require('gulp-terser')
-const zip = require('gulp-zip')
 const dartSass = require('sass')
 const webpack = require('webpack-stream')
 
@@ -157,7 +156,9 @@ function cssFolder() {
   return gulp.src('dist/*.min.css').pipe(clean()).pipe(gulp.dest('dist/css/'))
 }
 
-function createZip() {
+async function createZip() {
+  const zip = await import('gulp-zip')
+
   return gulp
     .src(
       [
@@ -179,14 +180,6 @@ function createZip() {
  * Development tasks
  */
 
-/* Recompile CSS, JS and docs when there are any changes */
-function watch() {
-  gulp.watch(
-    ['packages/**/*', 'app/**/*'],
-    gulp.series(['build', 'docs:build'])
-  )
-}
-
 gulp.task('clean', cleanDist)
 
 gulp.task('style', compileCSS)
@@ -203,12 +196,22 @@ gulp.task(
   gulp.series(['bundle', assets, jsFolder, cssFolder, createZip])
 )
 
-gulp.task('watch', watch)
+gulp.task('watch', () =>
+  Promise.all([
+    gulp.watch(['packages/**/*.scss'], compileCSS),
+    gulp.watch(['packages/**/*.js'], webpackJS)
+  ])
+)
 
 /**
  * The default task is to build everything, serve the docs and watch for changes
  */
 gulp.task(
   'default',
-  gulp.series([cleanDist, 'build', gulp.parallel(['docs:serve', watch])])
+  gulp.series([
+    cleanDist,
+    'build',
+    'docs:build',
+    gulp.parallel(['docs:serve', 'docs:watch', 'watch'])
+  ])
 )