@comicrelief/component-library 8.35.1 → 8.36.0

package/dist/components/Atoms/Input/Input.js

@@ -70,14 +70,22 @@ const Prefix = _styledComponents.default.div.withConfig({
   } = _ref6;
   return theme.color('grey_dark');
 });
-const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const DescriptionWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Input__DescriptionWrapper",
+  componentId: "sc-bcqy1o-5"
+})(["margin-bottom:0.5rem;*{font-size:", ";}"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.fontSize('xs');
+});
+const Input = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     errorMsg = '',
     id,
     label,
     showLabel = true,
     type,
-    hasAria = true,
     className = '',
     placeholder = '',
     labelProps = {},
@@ -85,8 +93,9 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     optional = null,
     maxPxWidthMediumBreakpoint,
     maxPxWidthLargeBreakpoint,
+    description = null,
     ...rest
-  } = _ref7;
+  } = _ref8;
   return /*#__PURE__*/_react.default.createElement(_Label.default, Object.assign({
     className: className,
     htmlFor: id,
@@ -94,7 +103,9 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     hideLabel: !showLabel,
     errorMsg: errorMsg,
     optional: optional
-  }, labelProps), /*#__PURE__*/_react.default.createElement(InputWrapper, {
+  }, labelProps), description && /*#__PURE__*/_react.default.createElement(DescriptionWrapper, {
+    id: `${id}-description`
+  }, description), /*#__PURE__*/_react.default.createElement(InputWrapper, {
     error: Boolean(errorMsg)
   }, prefix && /*#__PURE__*/_react.default.createElement(Prefix, {
     length: prefix.length
@@ -107,7 +118,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     type: type,
     placeholder: placeholder,
     error: Boolean(errorMsg),
-    "aria-describedby": hasAria ? id : undefined,
+    "aria-describedby": description ? `${id}-description` : undefined,
     ref: ref,
     prefixLength: prefix.length,
     required: optional === false
@@ -126,7 +137,6 @@ Input.propTypes = {
   // don't want to display a label, it should be present for screen readers).
   // todo: convert this to 'hideLabel' to make it consistent with other components
   showLabel: _propTypes.default.bool,
-  hasAria: _propTypes.default.bool,
   id: _propTypes.default.string.isRequired,
   /** text, email, number, date, search, tel, url, password */
   type: _propTypes.default.string.isRequired,
@@ -137,6 +147,7 @@ Input.propTypes = {
   prefix: _propTypes.default.string,
   optional: _propTypes.default.bool,
   maxPxWidthMediumBreakpoint: _propTypes.default.number,
-  maxPxWidthLargeBreakpoint: _propTypes.default.number
+  maxPxWidthLargeBreakpoint: _propTypes.default.number,
+  description: _propTypes.default.node
 };
 var _default = exports.default = Input;

package/dist/components/Atoms/Input/Input.md

@@ -130,3 +130,22 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
     id="input-example-8"
   />
 ```
+
+```js
+  import Text from '../../Atoms/Text/Text';
+
+  const exampleDescription = (
+    <Text>Here's a description with some <b>formatting</b></Text>
+  );
+  
+  <>
+    <h4>Input with Description:</h4>
+    <Input
+      placeholder="I have a description"
+      type="text"
+      label="My Great Input"
+      id="input-example-9"
+      description={exampleDescription}
+    />
+  </>
+```

package/dist/components/Atoms/Input/input.test.js

@@ -117,7 +117,6 @@ it('renders correctly', () => {
           className="c4"
         >
           <input
-            aria-describedby="Accessibility info go here"
             className="c5"
             id="Accessibility info go here"
             name="fullname"
@@ -249,7 +248,6 @@ it('renders with responsive max widths correctly', () => {
           className="c4"
         >
           <input
-            aria-describedby="input-example-7"
             className="c5"
             id="input-example-7"
             name="responsive-width"

package/dist/components/Atoms/TextArea/TextArea.js

@@ -43,6 +43,7 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     placeholder: placeholder,
     rows: rows,
     error: !!errorMsg,
+    id: id,
     "aria-describedby": id,
     ref: ref
   })), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {

package/dist/components/Atoms/TextArea/TextArea.test.js

@@ -97,6 +97,7 @@ it('renders correctly', () => {
       <textarea
         aria-describedby="Please leave your comment here"
         className="c3"
+        id="Please leave your comment here"
         name="description"
         placeholder="This is text area"
         rows={5}

package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap

@@ -111,7 +111,6 @@ exports[`renders correctly with no value and no options 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="text-input-with-dropdown"
           autoComplete="off"
           className="c6"
           id="text-input-with-dropdown"
@@ -241,7 +240,6 @@ exports[`renders correctly with value and no options 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="text-input-with-dropdown"
           autoComplete="off"
           className="c6"
           id="text-input-with-dropdown"
@@ -410,7 +408,6 @@ exports[`renders correctly with value and options 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="text-input-with-dropdown"
           autoComplete="off"
           className="c6"
           id="text-input-with-dropdown"

package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -111,7 +111,6 @@ exports[`renders correctly 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="school-lookup"
           autoComplete="off"
           className="c6"
           defaultValue=""

package/dist/components/Molecules/SearchInput/SearchInput.test.js

@@ -182,7 +182,6 @@ it('renders correctly', () => {
                   className="c9"
                 >
                   <input
-                    aria-describedby="search"
                     className="c10"
                     id="search"
                     name="search"

package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap

@@ -111,7 +111,6 @@ exports[`renders correctly 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="typeahead-test"
           autoComplete="off"
           className="c6"
           defaultValue=""

package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -647,7 +647,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
                   className="c23"
                 >
                   <input
-                    aria-describedby="mship-4--MoneyBuy-userInput"
                     aria-label="Input a different amount"
                     className="c24"
                     id="mship-4--MoneyBuy-userInput"
@@ -1314,7 +1313,6 @@ exports[`Monthly donation renders correctly 1`] = `
                   className="c24"
                 >
                   <input
-                    aria-describedby="mship-1--MoneyBuy-userInput"
                     aria-label="Input a different amount"
                     className="c25"
                     id="mship-1--MoneyBuy-userInput"
@@ -1949,7 +1947,6 @@ exports[`Single donation renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--moneyBuy-box1"
                     aria-label="£10"
                     className="c18"
                     id="mship-1--moneyBuy-box1"
@@ -1987,7 +1984,6 @@ exports[`Single donation renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--moneyBuy-box2"
                     aria-label="£20"
                     className="c18"
                     id="mship-1--moneyBuy-box2"
@@ -2025,7 +2021,6 @@ exports[`Single donation renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--moneyBuy-box3"
                     aria-label="£30"
                     className="c18"
                     id="mship-1--moneyBuy-box3"
@@ -2074,7 +2069,6 @@ exports[`Single donation renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--MoneyBuy-userInput"
                     aria-label="Input a different amount"
                     className="c18"
                     id="mship-1--MoneyBuy-userInput"
@@ -2571,7 +2565,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--MoneyBuy-userInput"
                     aria-label="Input a different amount"
                     className="c18"
                     id="mship-1--MoneyBuy-userInput"

package/dist/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -321,7 +321,6 @@ exports[`renders correctly 1`] = `
               className="c12"
             >
               <input
-                aria-describedby="first-name"
                 aria-required={true}
                 className="c13"
                 id="first-name"
@@ -359,7 +358,6 @@ exports[`renders correctly 1`] = `
               className="c12"
             >
               <input
-                aria-describedby="last-name"
                 aria-required={true}
                 className="c13"
                 id="last-name"
@@ -398,7 +396,6 @@ exports[`renders correctly 1`] = `
             className="c12"
           >
             <input
-              aria-describedby="email"
               aria-required={true}
               className="c13"
               id="email"

package/dist/components/Organisms/Membership/Membership.test.js

@@ -487,7 +487,6 @@ it('renders correctly', () => {
                       className="c18"
                     >
                       <input
-                        aria-describedby="mship-1--moneyBuy-box1"
                         aria-label="£5"
                         className="c19"
                         id="mship-1--moneyBuy-box1"
@@ -525,7 +524,6 @@ it('renders correctly', () => {
                       className="c18"
                     >
                       <input
-                        aria-describedby="mship-1--moneyBuy-box2"
                         aria-label="£10"
                         className="c19"
                         id="mship-1--moneyBuy-box2"
@@ -563,7 +561,6 @@ it('renders correctly', () => {
                       className="c18"
                     >
                       <input
-                        aria-describedby="mship-1--moneyBuy-box3"
                         aria-label="£20"
                         className="c19"
                         id="mship-1--moneyBuy-box3"
@@ -612,7 +609,6 @@ it('renders correctly', () => {
                       className="c18"
                     >
                       <input
-                        aria-describedby="mship-1--MoneyBuy-userInput"
                         aria-label="Input a different amount"
                         className="c19"
                         id="mship-1--MoneyBuy-userInput"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.35.1",
+  "version": "8.36.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/playwright/components/atoms/input.spec.js

@@ -2,14 +2,13 @@ const { test, expect } = require('@playwright/test');
 
 test.describe('input component', () => {
   test('input required with label and hint', async ({ page }) => {
-
     await page.goto('/#input');
 
     // input required with label and hint
     const specificElement = page.locator('input#input-example-1');
     await expect(specificElement).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="input-example-1"]');
+    const inputElement = page.locator('#input-example-1');
 
     // Get the placeholder attribute
     const placeholderText = await inputElement.getAttribute('placeholder');
@@ -23,14 +22,13 @@ test.describe('input component', () => {
   });
 
   test('input with error message', async ({ page }) => {
-
     await page.goto('/#input');
 
     // input required with label and hint
     const specificElement = page.locator('input#input-example-2');
     await expect(specificElement).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="input-example-2"]');
+    const inputElement = page.locator('#input-example-2');
 
     // Get the placeholder attribute
     const placeholderText = await inputElement.getAttribute('placeholder');
@@ -47,14 +45,13 @@ test.describe('input component', () => {
   });
 
   test('Simple input (optional)', async ({ page }) => {
-
     await page.goto('/#input');
 
     // input required with label and hint
     const specificElement = page.locator('input#input-example-3');
     await expect(specificElement).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="input-example-3"]');
+    const inputElement = page.locator('#input-example-3');
 
     // Get the 'name' attribute
     const nameAttribute = await inputElement.getAttribute('name');
@@ -68,14 +65,13 @@ test.describe('input component', () => {
   });
 
   test('Simple input (required)', async ({ page }) => {
-
     await page.goto('/#input');
 
     // input required with label and hint
     const specificElement = page.locator('input#input-example-4');
     await expect(specificElement).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="input-example-4"]');
+    const inputElement = page.locator('#input-example-4');
 
     // Get the 'name' attribute
     const nameAttribute = await inputElement.getAttribute('name');
@@ -89,14 +85,13 @@ test.describe('input component', () => {
   });
 
   test('Input Label with markup', async ({ page }) => {
-
     await page.goto('/#input');
 
     // input required with label and hint
     const specificElement = page.locator('input#input-example-5');
     await expect(specificElement).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="input-example-5"]');
+    const inputElement = page.locator('#input-example-5');
 
     // Get the 'name' attribute
     const nameAttribute = await inputElement.getAttribute('name');
@@ -110,14 +105,13 @@ test.describe('input component', () => {
   });
 
   test('Input label as React element', async ({ page }) => {
-
     await page.goto('/#input');
 
     // input required with label and hint
     const specificElement = page.locator('input#input-example-6');
     await expect(specificElement).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="input-example-6"]');
+    const inputElement = page.locator('#input-example-6');
 
     // Get the 'name' attribute
     const nameAttribute = await inputElement.getAttribute('name');
@@ -131,14 +125,13 @@ test.describe('input component', () => {
   });
 
   test('Input with prefix', async ({ page }) => {
-
     await page.goto('/#input');
 
     // input required with label and hint
     const specificElement = page.locator('#price');
     await expect(specificElement).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="price"]');
+    const inputElement = page.locator('#price');
 
     // Get the 'name' attribute
     const nameAttribute = await inputElement.getAttribute('name');

package/playwright/components/atoms/textArea.spec.js

@@ -2,14 +2,13 @@ const { test, expect } = require('@playwright/test');
 
 test.describe('text area component', () => {
   test('text area - Long copy/Message field', async ({ page }) => {
-
     await page.goto('/#textarea');
 
     // input required with label and hint
     const specificElement = page.locator('[data-testid="TextArea-example-1"]');
     await expect(specificElement).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="textarea-test"]');
+    const inputElement = page.locator('#textarea-test');
 
     // Get the placeholder attribute
     const placeholderText = await inputElement.getAttribute('placeholder');
@@ -17,22 +16,21 @@ test.describe('text area component', () => {
     // Verify the placeholder text
     expect(placeholderText).toBe('This is a placeholder');
 
-    await page.locator('[aria-describedby="textarea-test"]').type('This is test text for textarea field');
+    await page.locator('#textarea-test').type('This is test text for textarea field');
 
     await page.close();
   });
 
   test('text area - Long copy/Message field with error message', async ({ page }) => {
-
     await page.goto('/#textarea');
 
     const specificElement = page.locator('[data-testid="TextArea-example-1"]');
     await expect(specificElement).toBeVisible();
 
-    await page.locator('[aria-describedby="textarea-test-2"]').type('This is test text for textarea field');
+    await page.locator('#textarea-test-2').type('This is test text for textarea field');
 
     // error message should be visible
-    await expect(page.locator('[aria-describedby="textarea-test-2"] ~ span[data-test="error-message"]')).toBeVisible();
+    await expect(page.locator('#textarea-test-2 ~ span[data-test="error-message"]')).toBeVisible();
 
     await page.close();
   });

package/playwright/components/molecules/schoolLookup.spec.js

@@ -2,14 +2,13 @@ const { test, expect } = require('@playwright/test');
 
 test.describe('school lookup component', () => {
   test('school lookup', async ({ page, context }) => {
-
     await page.goto('/#schoollookup');
 
     // school lookup elements should be visible
     await expect(page.locator('[data-testid="SchoolLookup-example-1"]')).toBeVisible();
     await expect(page.locator('[data-preview="SchoolLookup"]')).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="school-lookup"]');
+    const inputElement = page.locator('#school-lookup');
 
     // Get the 'placeholder' attribute
     const placeholderAttribute = await inputElement.getAttribute('placeholder');

package/playwright/components/molecules/searchInput.spec.js

@@ -2,14 +2,13 @@ const { test, expect } = require('@playwright/test');
 
 test.describe('search input component', () => {
   test('search input', async ({ page, context }) => {
-
     await page.goto('/#searchinput');
 
     // accordian elements should be visible
     await expect(page.locator('[data-testid="SearchInput-example-1"]')).toBeVisible();
     await expect(page.locator('[data-preview="SearchInput"]')).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="school-lookup"]');
+    const inputElement = page.locator('#school-lookup');
 
     // Get the 'placeholder' attribute
     const placeholderAttribute = await inputElement.getAttribute('placeholder');

package/playwright/components/molecules/simpleSchoolLookUp.spec.js

@@ -2,14 +2,13 @@ const { test, expect } = require('@playwright/test');
 
 test.describe('simple school lookup component', () => {
   test('simple school lookup', async ({ page, context }) => {
-
     await page.goto('/#simpleschoollookup');
 
     // simple school lookup elements should be visible
     await expect(page.locator('[data-testid="SimpleSchoolLookup-example-0"]')).toBeVisible();
     await expect(page.locator('[data-preview="SimpleSchoolLookup"]')).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="school_lookup"]');
+    const inputElement = page.locator('#school_lookup');
 
     // Get the 'placeholder' attribute
     const placeholderAttribute = await inputElement.getAttribute('placeholder');

package/playwright/components/molecules/typeahead.spec.js

@@ -2,14 +2,13 @@ const { test, expect } = require('@playwright/test');
 
 test.describe('typeahead component', () => {
   test('typeahead', async ({ page }) => {
-
     await page.goto('/#typeahead');
 
     await expect(page.locator('[data-testid="Typeahead-example-1"]')).toBeVisible();
 
     await expect(page.locator('[data-preview="Typeahead"]')).toBeVisible();
 
-    const inputElement = page.locator('[aria-describedby="typeahead-test"]');
+    const inputElement = page.locator('#typeahead-test');
 
     // Get the 'placeholder' attribute
     const placeholderAttribute = await inputElement.getAttribute('placeholder');

package/playwright/components/organisms/emailSignUpForm.spec.js

@@ -10,7 +10,7 @@ test.describe('Email Signup Form component', () => {
     await expect(page.locator('[data-testid="EmailSignUpForm-example-1"] #email')).toBeVisible();
 
     // firstname field
-    const firstnamePlaceholder = page.locator('[aria-describedby="first-name"]');
+    const firstnamePlaceholder = page.locator('#first-name');
 
     // Get the 'placeholder' attribute
     const placeholderAttribute = await firstnamePlaceholder.getAttribute('placeholder');
@@ -37,7 +37,7 @@ test.describe('Email Signup Form component', () => {
     await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').fill('');
 
     // lastname
-    const lastnamePlaceholder = page.locator('[aria-describedby="last-name"]');
+    const lastnamePlaceholder = page.locator('#last-name');
 
     // Get the 'placeholder' attribute
     const lastnamePlaceholderAttribute = await lastnamePlaceholder.getAttribute('placeholder');
@@ -64,7 +64,7 @@ test.describe('Email Signup Form component', () => {
     await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').fill('');
 
     // email
-    const emailPlaceholder = page.locator('[aria-describedby="email"]');
+    const emailPlaceholder = page.locator('#email');
 
     // Get the 'placeholder' attribute
     const emailPlaceholderAttribute = await emailPlaceholder.getAttribute('placeholder');

package/src/components/Atoms/Input/Input.js

@@ -82,6 +82,14 @@ const Prefix = styled.div`
   margin-left: 2px; // Just doesn't look quite right without this.
 `;
 
+const DescriptionWrapper = styled.div`
+  margin-bottom: 0.5rem;
+
+  * {
+    font-size: ${({ theme }) => theme.fontSize('xs')};
+  }
+`;
+
 const Input = React.forwardRef(
   (
     {
@@ -90,7 +98,6 @@ const Input = React.forwardRef(
       label,
       showLabel = true,
       type,
-      hasAria = true,
       className = '',
       placeholder = '',
       labelProps = {},
@@ -98,6 +105,7 @@ const Input = React.forwardRef(
       optional = null,
       maxPxWidthMediumBreakpoint,
       maxPxWidthLargeBreakpoint,
+      description = null,
       ...rest
     },
     ref
@@ -111,6 +119,11 @@ const Input = React.forwardRef(
       optional={optional}
       {...labelProps}
     >
+      {description && (
+      <DescriptionWrapper id={`${id}-description`}>
+        {description}
+      </DescriptionWrapper>
+      )}
       <InputWrapper error={Boolean(errorMsg)}>
         {prefix && <Prefix length={prefix.length}>{prefix}</Prefix>}
         <InputFieldContainer
@@ -123,7 +136,7 @@ const Input = React.forwardRef(
             type={type}
             placeholder={placeholder}
             error={Boolean(errorMsg)}
-            aria-describedby={hasAria ? id : undefined}
+            aria-describedby={description ? `${id}-description` : undefined}
             ref={ref}
             prefixLength={prefix.length}
             required={optional === false}
@@ -158,7 +171,6 @@ Input.propTypes = {
   // don't want to display a label, it should be present for screen readers).
   // todo: convert this to 'hideLabel' to make it consistent with other components
   showLabel: PropTypes.bool,
-  hasAria: PropTypes.bool,
   id: PropTypes.string.isRequired,
   /** text, email, number, date, search, tel, url, password */
   type: PropTypes.string.isRequired,
@@ -169,7 +181,8 @@ Input.propTypes = {
   prefix: PropTypes.string,
   optional: PropTypes.bool,
   maxPxWidthMediumBreakpoint: PropTypes.number,
-  maxPxWidthLargeBreakpoint: PropTypes.number
+  maxPxWidthLargeBreakpoint: PropTypes.number,
+  description: PropTypes.node
 };
 
 export default Input;

package/src/components/Atoms/Input/Input.md

@@ -130,3 +130,22 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
     id="input-example-8"
   />
 ```
+
+```js
+  import Text from '../../Atoms/Text/Text';
+
+  const exampleDescription = (
+    <Text>Here's a description with some <b>formatting</b></Text>
+  );
+  
+  <>
+    <h4>Input with Description:</h4>
+    <Input
+      placeholder="I have a description"
+      type="text"
+      label="My Great Input"
+      id="input-example-9"
+      description={exampleDescription}
+    />
+  </>
+```

package/src/components/Atoms/Input/input.test.js

@@ -118,7 +118,6 @@ it('renders correctly', () => {
           className="c4"
         >
           <input
-            aria-describedby="Accessibility info go here"
             className="c5"
             id="Accessibility info go here"
             name="fullname"
@@ -254,7 +253,6 @@ it('renders with responsive max widths correctly', () => {
           className="c4"
         >
           <input
-            aria-describedby="input-example-7"
             className="c5"
             id="input-example-7"
             name="responsive-width"

package/src/components/Atoms/TextArea/TextArea.js

@@ -46,6 +46,7 @@ const TextArea = React.forwardRef(({
       placeholder={placeholder}
       rows={rows}
       error={!!errorMsg}
+      id={id}
       aria-describedby={id}
       ref={ref}
     />

package/src/components/Atoms/TextArea/TextArea.test.js

@@ -98,6 +98,7 @@ it('renders correctly', () => {
       <textarea
         aria-describedby="Please leave your comment here"
         className="c3"
+        id="Please leave your comment here"
         name="description"
         placeholder="This is text area"
         rows={5}

package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap

@@ -111,7 +111,6 @@ exports[`renders correctly with no value and no options 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="text-input-with-dropdown"
           autoComplete="off"
           className="c6"
           id="text-input-with-dropdown"
@@ -241,7 +240,6 @@ exports[`renders correctly with value and no options 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="text-input-with-dropdown"
           autoComplete="off"
           className="c6"
           id="text-input-with-dropdown"
@@ -410,7 +408,6 @@ exports[`renders correctly with value and options 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="text-input-with-dropdown"
           autoComplete="off"
           className="c6"
           id="text-input-with-dropdown"

package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -111,7 +111,6 @@ exports[`renders correctly 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="school-lookup"
           autoComplete="off"
           className="c6"
           defaultValue=""

package/src/components/Molecules/SearchInput/SearchInput.test.js

@@ -183,7 +183,6 @@ it('renders correctly', () => {
                   className="c9"
                 >
                   <input
-                    aria-describedby="search"
                     className="c10"
                     id="search"
                     name="search"

package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap

@@ -111,7 +111,6 @@ exports[`renders correctly 1`] = `
         className="c5"
       >
         <input
-          aria-describedby="typeahead-test"
           autoComplete="off"
           className="c6"
           defaultValue=""

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -647,7 +647,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
                   className="c23"
                 >
                   <input
-                    aria-describedby="mship-4--MoneyBuy-userInput"
                     aria-label="Input a different amount"
                     className="c24"
                     id="mship-4--MoneyBuy-userInput"
@@ -1314,7 +1313,6 @@ exports[`Monthly donation renders correctly 1`] = `
                   className="c24"
                 >
                   <input
-                    aria-describedby="mship-1--MoneyBuy-userInput"
                     aria-label="Input a different amount"
                     className="c25"
                     id="mship-1--MoneyBuy-userInput"
@@ -1949,7 +1947,6 @@ exports[`Single donation renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--moneyBuy-box1"
                     aria-label="£10"
                     className="c18"
                     id="mship-1--moneyBuy-box1"
@@ -1987,7 +1984,6 @@ exports[`Single donation renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--moneyBuy-box2"
                     aria-label="£20"
                     className="c18"
                     id="mship-1--moneyBuy-box2"
@@ -2025,7 +2021,6 @@ exports[`Single donation renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--moneyBuy-box3"
                     aria-label="£30"
                     className="c18"
                     id="mship-1--moneyBuy-box3"
@@ -2074,7 +2069,6 @@ exports[`Single donation renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--MoneyBuy-userInput"
                     aria-label="Input a different amount"
                     className="c18"
                     id="mship-1--MoneyBuy-userInput"
@@ -2571,7 +2565,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
                   className="c17"
                 >
                   <input
-                    aria-describedby="mship-1--MoneyBuy-userInput"
                     aria-label="Input a different amount"
                     className="c18"
                     id="mship-1--MoneyBuy-userInput"

package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -321,7 +321,6 @@ exports[`renders correctly 1`] = `
               className="c12"
             >
               <input
-                aria-describedby="first-name"
                 aria-required={true}
                 className="c13"
                 id="first-name"
@@ -359,7 +358,6 @@ exports[`renders correctly 1`] = `
               className="c12"
             >
               <input
-                aria-describedby="last-name"
                 aria-required={true}
                 className="c13"
                 id="last-name"
@@ -398,7 +396,6 @@ exports[`renders correctly 1`] = `
             className="c12"
           >
             <input
-              aria-describedby="email"
               aria-required={true}
               className="c13"
               id="email"

package/src/components/Organisms/Membership/Membership.test.js

@@ -489,7 +489,6 @@ it('renders correctly', () => {
                       className="c18"
                     >
                       <input
-                        aria-describedby="mship-1--moneyBuy-box1"
                         aria-label="£5"
                         className="c19"
                         id="mship-1--moneyBuy-box1"
@@ -527,7 +526,6 @@ it('renders correctly', () => {
                       className="c18"
                     >
                       <input
-                        aria-describedby="mship-1--moneyBuy-box2"
                         aria-label="£10"
                         className="c19"
                         id="mship-1--moneyBuy-box2"
@@ -565,7 +563,6 @@ it('renders correctly', () => {
                       className="c18"
                     >
                       <input
-                        aria-describedby="mship-1--moneyBuy-box3"
                         aria-label="£20"
                         className="c19"
                         id="mship-1--moneyBuy-box3"
@@ -614,7 +611,6 @@ it('renders correctly', () => {
                       className="c18"
                     >
                       <input
-                        aria-describedby="mship-1--MoneyBuy-userInput"
                         aria-label="Input a different amount"
                         className="c19"
                         id="mship-1--MoneyBuy-userInput"