Improve message component accessibility

.storybook/storybook-config.js

@@ -9,14 +9,16 @@ const enableRulesByTag = (tags = []) => {
   );
 };
 
-const checkWCAG21AAA = false;
+const checkAAA = false;
 export const a11yConfig = {
   rules: enableRulesByTag([
     "wcag2a",
     "wcag21a",
+    "wcag22a",
     "wcag2aa",
     "wcag21aa",
-    ...(checkWCAG21AAA ? ["wcag2aaa", "wcag21aaa"] : []),
+    "wcag22aa",
+    ...(checkAAA ? ["wcag2aaa", "wcag21aaa", "wcag22aaa"] : []),
     "best-practice",
   ]),
   axeOptions: {

CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.38...HEAD)
 
 ### Added
+
+- Automated AXE checks now include WCAG 2.2
+
 ### Changed
 
 - Changed spacing between navigation items in header
@@ -17,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Stopped logo from shrinking with longer straplines in headers
+- The message component has a header rather than an icon which provides a better page landmark
 
 ### Security
 

src/nationalarchives/components/message/fixtures.json

@@ -4,9 +4,10 @@
     {
       "name": "default",
       "options": {
+        "headingLevel": 2,
         "message": "Please note this page references hunger strikes and force feeding, which some people may find upsetting."
       },
-      "html": "<div class=\"tna-message \"><svg class=\"tna-message__icon\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 34 34\" width=\"40\" height=\"40\"><path fill=\"currentColor\" d=\"M15.33 8.67h3.34V12h-3.34V8.67Zm0 6.66h3.34v10h-3.34v-10ZM17 .33a16.67 16.67 0 1 0 .01 33.35A16.67 16.67 0 0 0 17 .33Zm0 30A13.35 13.35 0 0 1 3.67 17C3.67 9.65 9.65 3.67 17 3.67S30.33 9.65 30.33 17 24.35 30.33 17 30.33Z\"></path></svg><div class=\"tna-message__message\">Please note this page references hunger strikes and force feeding, which some people may find upsetting.</div></div>",
+      "html": "<div class=\"tna-message \"><h2 class=\"tna-message__heading\"><span class=\"tna-message__heading-icon\">I</span>mportant information</h2><div class=\"tna-message__message\">Please note this page references hunger strikes and force feeding, which some people may find upsetting.</div></div>",
       "hidden": false
     }
   ]

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

@@ -5,6 +5,12 @@
     "required": true,
     "description": ""
   },
+  {
+    "name": "headingLevel",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
   {
     "name": "classes",
     "type": "string",

src/nationalarchives/components/message/message.scss

@@ -1,29 +1,57 @@
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
+@use "../../tools/typography";
 @use "../../utilities";
 
 .tna-message {
   @include spacing.space-above;
   padding: 1rem;
 
   display: flex;
-  align-items: center;
+  gap: 1rem;
+  align-items: flex-start;
 
-  color: colour.brand-colour("black");
+  @include colour.accent-light;
 
   background-color: colour.brand-colour("cream");
 
   @include colour.colour-border("keyline-dark", 0.5rem, solid, left);
   border-left-color: colour.brand-colour("yellow");
 
-  &__icon {
-    margin-right: 1rem;
+  @include media.on-tiny {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__heading {
+    font-size: 0;
+  }
+
+  &__heading-icon {
+    width: 2rem;
+    height: 2rem;
 
-    flex: 0 0 2.5rem;
+    display: block;
+
+    @include colour.colour-font("font-dark");
+    @include typography.relative-font-size(24);
+    @include typography.main-font-weight-bold;
+    text-transform: lowercase;
+    text-align: center;
+    line-height: 2rem;
+
+    @include colour.colour-border("font-dark", 0.1875rem);
+    border-radius: 100%;
 
     @include media.on-mobile {
-      flex: 0 0 1.5rem;
+      width: 1.5rem;
+      height: 1.5rem;
+
+      @include typography.relative-font-size(19);
+      line-height: 1.5rem;
+
+      @include colour.colour-border("font-dark", 0.125rem);
     }
   }
 

src/nationalarchives/components/message/phase-banner.stories.js

@@ -3,6 +3,7 @@ import macroOptions from "./macro-options.json";
 
 const argTypes = {
   message: { control: "text" },
+  headingLevel: { control: { type: "number", min: 1, max: 6 } },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -18,10 +19,11 @@ export default {
   argTypes,
 };
 
-const Template = ({ message, classes, attributes }) =>
+const Template = ({ message, headingLevel, classes, attributes }) =>
   Message({
     params: {
       message,
+      headingLevel,
       classes,
       attributes,
     },
@@ -31,5 +33,6 @@ export const Standard = Template.bind({});
 Standard.args = {
   message:
     "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
+  headingLevel: 2,
   classes: "tna-messaage--demo",
 };

src/nationalarchives/components/message/template.njk

@@ -1,8 +1,8 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <div class="tna-message {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <svg class="tna-message__icon" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 34 34" width="40" height="40">
-    <path fill="currentColor" d="M15.33 8.67h3.34V12h-3.34V8.67Zm0 6.66h3.34v10h-3.34v-10ZM17 .33a16.67 16.67 0 1 0 .01 33.35A16.67 16.67 0 0 0 17 .33Zm0 30A13.35 13.35 0 0 1 3.67 17C3.67 9.65 9.65 3.67 17 3.67S30.33 9.65 30.33 17 24.35 30.33 17 30.33Z"></path>
-  </svg>
+  <h{{ params.headingLevel }} class="tna-message__heading">
+    <span class="tna-message__heading-icon">I</span>mportant information
+  </h{{ params.headingLevel }}>
   <div class="tna-message__message">
     {{ params.message | safe }}
   </div>