Fix aria attributes on error messages

NHSDigital · Jun 10, 2024 · 130eac1 · 130eac1
1 parent 28e322c
commit 130eac1
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/src/components/form-elements/checkboxes/__tests__/__snapshots__/Checkboxes.test.tsx.snap b/src/components/form-elements/checkboxes/__tests__/__snapshots__/Checkboxes.test.tsx.snap
@@ -178,6 +178,7 @@ exports[`Checkboxes matches snapshot with boolean error 1`] = `
       class="nhsuk-form-group nhsuk-form-group--error"
     >
       <div
+        aria-labelledby="example--error-message"
         class="nhsuk-checkboxes"
         id="example"
       >
@@ -262,6 +263,7 @@ exports[`Checkboxes matches snapshot with string error 1`] = `
         Example error
       </span>
       <div
+        aria-labelledby="example--error-message"
         class="nhsuk-checkboxes"
         id="example"
       >

diff --git a/src/util/FormGroup.tsx b/src/util/FormGroup.tsx
@@ -64,7 +64,7 @@ const FormGroup = <T extends BaseFormElementRenderProps>(props: FormGroupProps<T
 
   const childProps = {
     'aria-describedby': hint ? hintID : undefined,
-    'aria-labelledby': label ? labelID : undefined,
+    'aria-labelledby': error ? errorID : undefined,
     error,
     name: name || elementID,
     id: elementID,

diff --git a/src/util/__tests__/FormGroup.test.tsx b/src/util/__tests__/FormGroup.test.tsx
@@ -108,9 +108,6 @@ describe('FormGroup', () => {
     expect(renderProps!.id).toHaveLength(11);
     expect(renderProps!.id).toContain('input');
 
-    expect(container.querySelector('input')?.getAttribute('aria-labelledby')).toBe(
-      `${renderProps!.id}--label`,
-    );
     expect(container.querySelector('.nhsuk-label')?.getAttribute('id')).toBe(
       `${renderProps!.id}--label`,
     );
@@ -133,7 +130,6 @@ describe('FormGroup', () => {
     expect(renderProps).not.toBe(null);
     expect(renderProps!.id).toBe('testID');
 
-    expect(container.querySelector('input')?.getAttribute('aria-labelledby')).toBe('testID--label');
     expect(container.querySelector('.nhsuk-label')?.getAttribute('id')).toBe('testID--label');
     expect(container.querySelector('.nhsuk-label')?.getAttribute('for')).toBe('testID');
     expect(container.querySelector('.nhsuk-label')?.textContent).toBe('This is a test label');
@@ -155,6 +151,7 @@ describe('FormGroup', () => {
     expect(renderProps).not.toBe(null);
     expect(renderProps!.id).toHaveLength(11);
     expect(renderProps!.id).toContain('input');
+    expect(renderProps!['aria-labelledby']).toBe(`${renderProps!.id}--error-message`);
 
     expect(container.querySelector('.nhsuk-error-message')?.getAttribute('id')).toBe(
       `${renderProps!.id}--error-message`,
@@ -182,6 +179,8 @@ describe('FormGroup', () => {
 
     expect(renderProps).not.toBe(null);
     expect(renderProps!.id).toBe('testID');
+    expect(renderProps!['aria-labelledby']).toBe(`testID--error-message`);
+
 
     expect(container.querySelector('.nhsuk-error-message')?.getAttribute('id')).toBe(
       'testID--error-message',