HTML validation (#59)

* Fix existing HTML issues

* Lint and fix CI

* Add more fixtures

* Add more fixtures

* Lint

* Add extra story options

.github/actions/tests/action.yml

@@ -13,6 +13,9 @@ runs:
     - name: Install dependencies
       run: npm ci
       shell: bash
+    - name: Validate HTML
+      run: mkdir temp && npm run validatehtml
+      shell: bash
     - name: Build Storybook
       run: npm run build
       shell: bash

.gitignore

@@ -9,4 +9,5 @@ storybook
 build-storybook.log
 chromatic.config.json
 chromatic.log
-RELEASE_NOTES.txt
+RELEASE_NOTES.txt
+temp

.htmlvalidate.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["html-validate:recommended"],
+
+  "rules": {
+    "close-order": "error",
+    "form-dup-name": 0,
+    "no-inline-style": 0,
+    "no-redundant-role": 0,
+    "no-trailing-whitespace": 0,
+    "void-style": 0
+  }
+}

CHANGELOG.md

@@ -8,10 +8,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.27-prerelease...HEAD)
 
 ### Added
+
+- Buttons can now have `buttonType` which sets the `type` attribute for `<button>` elements
+
 ### Changed
+
+- Changed style of filters element to match with accent colour
+
 ### Deprecated
 ### Removed
+
+- Removed `title` attribute from tabs and `aria-label` from HTML
+
 ### Fixed
+
+- Fixed HTML validation errors
+
 ### Security
 
 ## [0.1.27-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.26-prerelease...v0.1.27-prerelease) - 2023-11-29

package.json

@@ -9,7 +9,8 @@
     "lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
     "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
     "package:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
-    "package:scripts": "webpack"
+    "package:scripts": "webpack",
+    "validatehtml": "node tasks/generate-fixture-html.js && html-validate temp"
   },
   "repository": {
     "type": "git",
@@ -64,6 +65,7 @@
     "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.6.15",
     "glob": "^10.3.10",
+    "html-validate": "^8.7.3",
     "jest-environment-jsdom": "^29.7.0",
     "mdx-mermaid": "^2.0.0",
     "node-self": "^1.0.2",

src/nationalarchives/components/button/button.stories.js

@@ -14,6 +14,7 @@ const argTypes = {
   iconOnlyOnMobile: { control: "boolean" },
   rightAlignIcon: { control: "boolean" },
   buttonElement: { control: "boolean" },
+  buttonType: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -42,6 +43,7 @@ const Template = ({
   iconOnlyOnMobile,
   rightAlignIcon,
   buttonElement,
+  buttonType,
   classes,
   attributes,
 }) =>
@@ -59,6 +61,7 @@ const Template = ({
       iconOnlyOnMobile,
       rightAlignIcon,
       buttonElement,
+      buttonType,
       classes,
       attributes,
     },

src/nationalarchives/components/button/fixtures.json

@@ -7,7 +7,7 @@
         "text": "Log in",
         "href": "#"
       },
-      "html": "<a href=\"#\" class=\"tna-button \" role=\"button\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button \">Log in</a>",
       "hidden": false
     },
     {
@@ -17,7 +17,7 @@
         "href": "#",
         "title": "Log in to the service"
       },
-      "html": "<a href=\"#\" class=\"tna-button \" role=\"button\" title=\"Log in to the service\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" title=\"Log in to the service\">Log in</a>",
       "hidden": false
     },
     {
@@ -27,7 +27,7 @@
         "href": "#",
         "accent": true
       },
-      "html": "<a href=\"#\" class=\"tna-button tna-button--accent\" role=\"button\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button tna-button--accent\">Log in</a>",
       "hidden": false
     },
     {
@@ -37,7 +37,7 @@
         "href": "#",
         "classes": "button__test-class"
       },
-      "html": "<a href=\"#\" class=\"tna-button button__test-class\" role=\"button\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button button__test-class\">Log in</a>",
       "hidden": false
     },
     {
@@ -49,7 +49,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<a href=\"#\" class=\"tna-button \" role=\"button\" data-testattribute=\"foobar\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">Log in</a>",
       "hidden": false
     }
   ]

src/nationalarchives/components/button/macro-options.json

@@ -71,6 +71,12 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "buttonType",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "classes",
     "type": "string",

src/nationalarchives/components/button/template.njk

@@ -17,7 +17,7 @@
 {%- if params.rightAlignIcon -%}
   {%- set buttonClasses = buttonClasses.concat('tna-button--icon-right') -%}
 {%- endif -%}
-<{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if not params.buttonElement %} role="button"{%- endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if params.buttonElement %} type="{{ params.buttonType or 'button' }}"{% endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- if params.brandIcon %}
   <i class="fa-brands fa-fw fa-{{ params.brandIcon }}" aria-hidden="true"></i>
   {%- elseif params.icon %}

src/nationalarchives/components/card/fixtures.json

@@ -151,7 +151,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\" title=\"Go and do the action\">Card action</a></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" title=\"Go and do the action\">Card action</a></div></div></div>",
       "hidden": false
     },
     {