Remove support for error lines without error messages

Author: colinrotherham

docs/upgrade-to-6.0.md

@@ -54,6 +54,21 @@ You must make the following changes to `<Fieldset.Legend>` components:
   </Fieldset>
 ```
 
+### Make sure error message text is added
+
+For accessibility reasons and to align with NHS.UK frontend, the boolean `error: true` prop must be replaced with an error message string:
+
+```patch
+  <TextInput
+    label="What is your NHS number?"
+    labelProps={{ isPageHeading: true, size: 'l' }}
+-   error
++   error="Enter NHS number"
+  />
+```
+
+Read about [our guidance on error messages](https://service-manual.nhs.uk/design-system/components/error-message) on the design system in the NHS digital service manual.
+
 ### Make sure heading levels are lowercase
 
 If you are using the `headingLevel` prop you will need to update any uppercase values to lowercase:
@@ -298,7 +313,7 @@ After:
 To align with NHS.UK frontend, the radios component automatically renders its own fieldset, legend and associated ARIA attributes. You must also rename the `Radios.Radio` component to `Radios.Item` as shown:
 
 ```patch
-- <Fieldset>
+- <Fieldset disableErrorLine="false">
 -   <Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
 -   <Radios>
 +   <Radios legend="Have you changed your name?">
@@ -310,12 +325,14 @@ To align with NHS.UK frontend, the radios component automatically renders its ow
 - </Fieldset>
 ```
 
+The prop `disableErrorLine` is no longer necessary.
+
 ### Checkboxes
 
 To align with NHS.UK frontend, the checkboxes component automatically renders its own fieldset, legend and associated ARIA attributes. You must also rename the `Checkboxes.Box` component to `Checkboxes.Item` as shown:
 
 ```patch
-- <Fieldset>
+- <Fieldset disableErrorLine="false">
 -   <Fieldset.Legend>What is your nationality?</Fieldset.Legend>
 -   <Checkboxes>
 +   <Checkboxes legend="What is your nationality?">
@@ -336,6 +353,8 @@ You must also rename the `Checkboxes.Item` prop `inputRef` to `ref` for consiste
 + <Checkboxes.Item ref={ref}>Example</Checkboxes.Item>
 ```
 
+The prop `disableErrorLine` is no longer necessary.
+
 ### Error summary
 
 To align with NHS.UK frontend, the error summary component is automatically alerted to screen readers by focusing itself on render. You will need to make the following changes:

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

@@ -16,7 +16,7 @@ describe('Checkboxes', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('matches snapshot with string error', async () => {
+  it('matches snapshot with error message', async () => {
     const { container } = await renderClient(
       <Checkboxes id="example" name="example" error="Example error">
         <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
@@ -29,19 +29,6 @@ describe('Checkboxes', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('matches snapshot with boolean error', async () => {
-    const { container } = await renderClient(
-      <Checkboxes id="example" name="example" error={true}>
-        <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
-        <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
-        <Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
-      </Checkboxes>,
-      { moduleName: 'nhsuk-checkboxes' },
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
   it('matches snapshot with an exclusive checkbox', async () => {
     const { container } = await renderClient(
       <Checkboxes id="example" name="example">

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

@@ -316,81 +316,7 @@ exports[`Checkboxes matches snapshot with an exclusive checkbox 1`] = `
 </div>
 `;
 
-exports[`Checkboxes matches snapshot with boolean error 1`] = `
-<div>
-  <div
-    class="nhsuk-form-group nhsuk-form-group--error"
-  >
-    <div
-      aria-describedby="example--error-message"
-      class="nhsuk-checkboxes"
-      data-module="nhsuk-checkboxes"
-      data-nhsuk-checkboxes-init=""
-      id="example"
-    >
-      <div
-        class="nhsuk-checkboxes__item"
-      >
-        <input
-          class="nhsuk-checkboxes__input"
-          data-checkbox-exclusive-group="example"
-          id="example-1"
-          name="example"
-          type="checkbox"
-          value="animal"
-        />
-        <label
-          class="nhsuk-label nhsuk-checkboxes__label"
-          for="example-1"
-          id="example-1--label"
-        >
-          Waste from animal carcasses
-        </label>
-      </div>
-      <div
-        class="nhsuk-checkboxes__item"
-      >
-        <input
-          class="nhsuk-checkboxes__input"
-          data-checkbox-exclusive-group="example"
-          id="example-2"
-          name="example"
-          type="checkbox"
-          value="mines"
-        />
-        <label
-          class="nhsuk-label nhsuk-checkboxes__label"
-          for="example-2"
-          id="example-2--label"
-        >
-          Waste from mines or quarries
-        </label>
-      </div>
-      <div
-        class="nhsuk-checkboxes__item"
-      >
-        <input
-          class="nhsuk-checkboxes__input"
-          data-checkbox-exclusive-group="example"
-          id="example-3"
-          name="example"
-          type="checkbox"
-          value="farm"
-        />
-        <label
-          class="nhsuk-label nhsuk-checkboxes__label"
-          for="example-3"
-          id="example-3--label"
-        >
-          Farm or agricultural waste
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Checkboxes matches snapshot with string error 1`] = `
+exports[`Checkboxes matches snapshot with error message 1`] = `
 <div>
   <div
     class="nhsuk-form-group nhsuk-form-group--error"

src/components/form-elements/date-input/DateInputContext.ts

@@ -3,7 +3,7 @@ import { createContext, ChangeEvent } from 'react';
 export type IDateInputContext = {
   id: string;
   name: string;
-  error: string | boolean | undefined;
+  error: string | undefined;
   value?: { day?: string; month?: string; year?: string };
   defaultValue?: { day?: string; month?: string; year?: string };
   handleChange: (inputType: 'day' | 'month' | 'year', event: ChangeEvent<HTMLInputElement>) => void;

src/components/form-elements/date-input/__tests__/DateInput.test.tsx

@@ -18,6 +18,21 @@ describe('DateInput', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('matches snapshot with error message', async () => {
+    const { container } = await renderClient(
+      <DateInput
+        hint="For example, 15 3 1984"
+        legend="What is your date of birth?"
+        legendProps={{ size: 'l' }}
+        id="date-input"
+        error="Date of birth must include a day"
+      />,
+      { className: 'nhsuk-date-input' },
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
   it('matches snapshot with custom date fields', async () => {
     const { container } = await renderClient(
       <DateInput
@@ -36,6 +51,25 @@ describe('DateInput', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('matches snapshot with custom date fields and error message', async () => {
+    const { container } = await renderClient(
+      <DateInput
+        hint="For example, 15 3 1984"
+        legend="What is your date of birth?"
+        legendProps={{ size: 'l' }}
+        id="date-input"
+        error="Date of birth must include a day"
+      >
+        <DateInput.Day />
+        <DateInput.Month defaultValue="3" error={false} />
+        <DateInput.Year defaultValue="1984" error={false} />
+      </DateInput>,
+      { className: 'nhsuk-date-input' },
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
   it('matches snapshot (via server)', async () => {
     const { container, element } = await renderServer(
       <DateInput