Align error message with NHS.UK frontend

Author: colinrotherham

src/components/form-elements/checkboxes/__tests__/__snapshots__/Checkboxes.test.tsx.snap

@@ -264,8 +264,9 @@ exports[`Checkboxes matches snapshot with string error 1`] = `
         <span
           class="nhsuk-u-visually-hidden"
         >
-          Error: 
+          Error:
         </span>
+         
         Example error
       </span>
       <div

src/components/form-elements/error-message/ErrorMessage.tsx

@@ -2,20 +2,23 @@ import React, { FC, HTMLProps } from 'react';
 import classNames from 'classnames';
 
 export interface ErrorMessageProps extends HTMLProps<HTMLSpanElement> {
-  visuallyHiddenText?: false | string;
+  visuallyHiddenText?: string;
 }
 
 const ErrorMessageComponent: FC<ErrorMessageProps> = ({
   className,
-  visuallyHiddenText = 'Error: ',
+  visuallyHiddenText = 'Error',
   children,
   ...rest
 }) => (
   <span className={classNames('nhsuk-error-message', className)} {...rest}>
-    {visuallyHiddenText !== false ? (
-      <span className="nhsuk-u-visually-hidden">{visuallyHiddenText}</span>
-    ) : null}
-    {children}
+    {visuallyHiddenText ? (
+      <>
+        <span className="nhsuk-u-visually-hidden">{`${visuallyHiddenText}:`}</span> {children}
+      </>
+    ) : (
+      <>{children}</>
+    )}
   </span>
 );
 

src/components/form-elements/error-message/__tests__/ErrorMessage.test.tsx

@@ -12,18 +12,18 @@ describe('ErrorMessage', () => {
   it('has default visuallyHiddenText', () => {
     const { container } = render(<ErrorMessage>Error</ErrorMessage>);
 
-    expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toBe('Error: ');
+    expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toBe('Error:');
   });
 
-  it('has disabled visuallyHiddenText', () => {
-    const { container } = render(<ErrorMessage visuallyHiddenText={false}>Error</ErrorMessage>);
+  it('has custom visuallyHiddenText', () => {
+    const { container } = render(<ErrorMessage visuallyHiddenText="Custom">Error</ErrorMessage>);
 
-    expect(container.querySelector('.nhsuk-u-visually-hidden')).toBeFalsy();
+    expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toBe('Custom:');
   });
 
-  it('has custom visuallyHiddenText', () => {
-    const { container } = render(<ErrorMessage visuallyHiddenText="Custom">Error</ErrorMessage>);
+  it('has empty visuallyHiddenText', () => {
+    const { container } = render(<ErrorMessage visuallyHiddenText="">Error</ErrorMessage>);
 
-    expect(container.querySelector('.nhsuk-u-visually-hidden')?.textContent).toBe('Custom');
+    expect(container.querySelector('.nhsuk-u-visually-hidden')).toBeFalsy();
   });
 });

src/components/form-elements/error-message/__tests__/__snapshots__/ErrorMessage.test.tsx.snap

@@ -8,8 +8,9 @@ exports[`ErrorMessage matches snapshot: ErrorMessage 1`] = `
     <span
       class="nhsuk-u-visually-hidden"
     >
-      Error: 
+      Error:
     </span>
+     
     Error
   </span>
 </div>

stories/Form Elements/ErrorMessage.stories.tsx

@@ -6,7 +6,7 @@ import { Meta, StoryObj } from '@storybook/react';
  *
  * ## Implementation Notes
  *
- * The `ErrorMessage` component has a default `visuallyHiddenText` of "Error: ". This can be overriden, or disabled using `visuallyHiddenText={false}`.
+ * The `ErrorMessage` component has a default `visuallyHiddenText` of "Error: ". This can be overriden using `visuallyHiddenText`.
  *
  * ## Usage
  *
@@ -17,7 +17,7 @@ import { Meta, StoryObj } from '@storybook/react';
  *
  * const Element = () => {
  *     return (
- *         <ErrorMessage>Error!</ErrorMessage>
+ *         <ErrorMessage>Enter your full name</ErrorMessage>
  *     );
  * }
  * ```
@@ -26,7 +26,7 @@ const meta: Meta<typeof ErrorMessage> = {
   title: 'Form Elements/ErrorMessage',
   component: ErrorMessage,
   args: {
-    children: 'Error message about full name goes here',
+    children: 'Enter your full name',
   },
 };
 export default meta;
@@ -35,8 +35,13 @@ type Story = StoryObj<typeof ErrorMessage>;
 export const Standard: Story = {
   argTypes: { visuallyHiddenText: { control: false } },
 };
-export const NoVisuallyHiddenText: Story = {
-  args: { visuallyHiddenText: false },
+
+export const CustomVisuallyHiddenText: Story = {
+  args: { visuallyHiddenText: 'Custom' },
+  argTypes: { visuallyHiddenText: { control: false } },
+};
+
+export const EmptyVisuallyHiddenText: Story = {
+  args: { visuallyHiddenText: '' },
   argTypes: { visuallyHiddenText: { control: false } },
 };
-export const CustomVisuallyHiddenText: Story = { args: { visuallyHiddenText: 'Custom Text' } };