Add hidden "Error:" prefix to error messages

We've standardised on using a simpler, more 'instructional' language for our messages, but this means that most error messages are less explicit about the fact that the field is in an error state.

I think we are therefore relying slightly more on the visual presentation of the error message to help the user understand that they have 'done something wrong'.

Thinking specifically about the way that a screen-reader user would encounter an error message:

> National Insurance number, text field. It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Enter a National Insurance number in the right format. You are currently inside a text field. To enter text in this field, type.

I don't think it's entirely clear that "Enter a National Insurance number in the right format" is an error.

This attempts to counter that by adding a visually hidden "Error:" prefix to the error message:

> National Insurance number, text field. It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Enter a National Insurance number in the right format. You are currently inside a text field. To enter text in this field, type.

src/components/error-message/error-message.yaml

@@ -19,6 +19,9 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the error message span tag
+- name: visuallyHiddenText
+  type: string
+  description: A visually hidden prefix used before the error message. Defaults to "Error".
 
 accessibilityCriteria: |
   When used with a single input, the error message MUST:

src/components/error-message/template.njk

@@ -1,3 +1,6 @@
+{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
+
 <span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {% if visuallyHiddenText %}<span class="govuk-visually-hidden">{{ visuallyHiddenText }}:</span> {% endif -%}
   {{ params.html | safe if params.html else params.text }}
 </span>

src/components/error-message/template.test.js

@@ -29,7 +29,7 @@ describe('Error message', () => {
     })
 
     const content = $('.govuk-error-message').html().trim()
-    expect(content).toEqual('Unexpected > in body')
+    expect(content).toContain('Unexpected > in body')
   })
 
   it('allows summary HTML to be passed un-escaped', () => {
@@ -38,7 +38,7 @@ describe('Error message', () => {
     })
 
     const content = $('.govuk-error-message').html().trim()
-    expect(content).toEqual('Unexpected <b>bold text</b> in body copy')
+    expect(content).toContain('Unexpected <b>bold text</b> in body copy')
   })
 
   it('allows additional attributes to be specified', () => {
@@ -53,4 +53,33 @@ describe('Error message', () => {
     expect($component.attr('data-test')).toEqual('attribute')
     expect($component.attr('id')).toEqual('my-error-message')
   })
+
+  it('includes a visually hidden "Error" prefix by default', () => {
+    const $ = render('error-message', {
+      text: 'Enter your full name'
+    })
+
+    const $component = $('.govuk-error-message')
+    expect($component.text().trim()).toEqual('Error: Enter your full name')
+  })
+
+  it('allows the visually hidden prefix to be customised', () => {
+    const $ = render('error-message', {
+      text: 'Rhowch eich enw llawn',
+      visuallyHiddenText: 'Gwall'
+    })
+
+    const $component = $('.govuk-error-message')
+    expect($component.text().trim()).toEqual('Gwall: Rhowch eich enw llawn')
+  })
+
+  it('allows the visually hidden prefix to be removed', () => {
+    const $ = render('error-message', {
+      text: 'There is an error on line 42',
+      visuallyHiddenText: false
+    })
+
+    const $component = $('.govuk-error-message')
+    expect($component.text().trim()).toEqual('There is an error on line 42')
+  })
 })