Improve message component accessibility

CHANGELOG.md

@@ -17,6 +17,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/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,14 +1,16 @@
 @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");
 
@@ -17,13 +19,38 @@
   @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);
+    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>