@comicrelief/component-library 8.35.0 → 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/MarketingPreferencesDS/MarketingPreferencesDS.style.js

@@ -25,12 +25,7 @@ const OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withCo
 const TopCopyWrapper = exports.TopCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__TopCopyWrapper",
   componentId: "sc-68n85q-1"
-})(["margin:", " 0;display:flex;width:100%;@media ", "{padding:10px;}"], (0, _spacing.default)('l'), _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.allBreakpoints('M');
-});
+})(["margin:", " 0;display:flex;width:100%;"], (0, _spacing.default)('l'));
 const BottomCopyWrapper = exports.BottomCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__BottomCopyWrapper",
   componentId: "sc-68n85q-2"
@@ -46,94 +41,94 @@ const AssociatedFieldsName = exports.AssociatedFieldsName = _styledComponents.de
 const FormField = exports.FormField = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__FormField",
   componentId: "sc-68n85q-5"
-})(["", ""], _ref2 => {
+})(["", ""], _ref => {
   let {
     theme,
     isError
-  } = _ref2;
+  } = _ref;
   return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";width:100%;display:flex;flex-direction:column;padding:", ";background-color:", ";transition:background-color 0.3s,color 0.3s;border-radius:0.5rem;border:1px solid ", ";&.selected{background-color:", ";&:hover{background-color:", ";border-color:", ";}span.icon-mp_permissionEmail{background-image:url(", ");}span.icon-mp_permissionPhone{background-image:url(", ");}span.icon-mp_permissionPost{background-image:url(", ");}span.icon-mp_permissionSMS{background-image:url(", ");}> div{label,> span{color:", ";}}}label{position:relative;margin-bottom:0;width:100%;color:", ";font-weight:600;display:flex;justify-content:space-between;}h3{position:relative;margin-bottom:", ";&:before{position:absolute;top:0;left:0;width:24px;height:24px;content:'';}}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), theme.color('grey_light'), theme.color('grey'), isError ? theme.color('red') : theme.color('blue_donate'), isError ? theme.color('red_dark') : theme.color('blue_donate'), theme.color('grey_4'), _EmailWhite.default, _PhoneWhite.default, _PostWhite.default, _TextWhite.default, theme.color('white'), theme.color('black'), (0, _spacing.default)('md'));
 });
 const CheckContainer = exports.CheckContainer = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckContainer",
   componentId: "sc-68n85q-6"
-})(["", ""], _ref3 => {
+})(["", ""], _ref2 => {
   let {
     theme
-  } = _ref3;
+  } = _ref2;
   return (0, _styledComponents.css)(["width:100%;display:flex;justify-content:space-between;font-size:", ";font-family:", ";"], theme.fontSize('md'), theme.fontFamilies(theme.font.regular));
 });
 const CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckLabel",
   componentId: "sc-68n85q-7"
-})(["", ""], _ref4 => {
+})(["", ""], _ref3 => {
   let {
     theme
-  } = _ref4;
+  } = _ref3;
   return (0, _styledComponents.css)(["display:flex;align-items:center;font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('xs'), theme.allBreakpoints('M'), theme.fontSize('s'));
 });
 const CheckInput = exports.CheckInput = _styledComponents.default.input.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckInput",
   componentId: "sc-68n85q-8"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:0.5rem;}:checked + span{background:url(", ") no-repeat center ", ";background-size:contain;}"], _ref5 => {
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:0.5rem;}:checked + span{background:url(", ") no-repeat center ", ";background-size:contain;}"], _ref4 => {
   let {
     theme
-  } = _ref5;
+  } = _ref4;
   return theme.fontSize('sm');
-}, _ref6 => {
+}, _ref5 => {
   let {
     theme
-  } = _ref6;
+  } = _ref5;
   return theme.color('grey');
-}, _ref7 => {
+}, _ref6 => {
   let {
     theme
-  } = _ref7;
+  } = _ref6;
   return theme.color('white');
-}, _ref8 => {
+}, _ref7 => {
   let {
     theme
-  } = _ref8;
+  } = _ref7;
   return theme.color('grey');
-}, _CR_Tick_black.default, _ref9 => {
+}, _CR_Tick_black.default, _ref8 => {
   let {
     theme
-  } = _ref9;
+  } = _ref8;
   return theme.color('white');
 });
 const ShowHideInputWrapper = exports.ShowHideInputWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__ShowHideInputWrapper",
   componentId: "sc-68n85q-9"
-})(["display:", ";width:100%;label{width:100%;border:none;padding:0;}"], _ref10 => {
+})(["display:", ";width:100%;label{width:100%;border:none;padding:0;}"], _ref9 => {
   let {
     show
-  } = _ref10;
+  } = _ref9;
   return show ? 'block' : 'none';
 });
 const ExtraInfo = exports.ExtraInfo = _styledComponents.default.span.withConfig({
   displayName: "MarketingPreferencesDSstyle__ExtraInfo",
   componentId: "sc-68n85q-10"
-})(["display:block;width:100%;font-size:1rem;text-transform:inherit;font-weight:normal;line-height:normal;font-family:'Montserrat',Helvetica,Arial,sans-serif;margin-bottom:0rem;margin-top:1rem;color:", ";+ label{margin-top:", ";margin-bottom:0;&[for=\"mp_email\"],&[for=\"mp_mobile\"],&[for=\"mp_phone\"]{> span:first-child{position:absolute;margin:-1px;padding:0;width:1px;height:1px;border:0;overflow:hidden;clip:rect(1px 1px 1px 1px);word-wrap:normal;}}"], _ref11 => {
+})(["display:block;width:100%;font-size:1rem;text-transform:inherit;font-weight:normal;line-height:normal;font-family:'Montserrat',Helvetica,Arial,sans-serif;margin-bottom:0rem;margin-top:1rem;color:", ";+ label{margin-top:", ";margin-bottom:0;&[for=\"mp_email\"],&[for=\"mp_mobile\"],&[for=\"mp_phone\"]{> span:first-child{position:absolute;margin:-1px;padding:0;width:1px;height:1px;border:0;overflow:hidden;clip:rect(1px 1px 1px 1px);word-wrap:normal;}}"], _ref10 => {
   let {
     theme
-  } = _ref11;
+  } = _ref10;
   return theme.color('black');
 }, (0, _spacing.default)('md'));
 const MPTextInput = exports.MPTextInput = (0, _styledComponents.default)(_TextInput.default).withConfig({
   displayName: "MarketingPreferencesDSstyle__MPTextInput",
   componentId: "sc-68n85q-11"
-})(["input{border:1px solid  ", ";background-color:", ";@media ", "{max-width:none;}}span{color:white;}"], _ref12 => {
+})(["input{border:1px solid  ", ";background-color:", ";@media ", "{max-width:none;}}span{color:white;}"], _ref11 => {
   let {
     theme
-  } = _ref12;
+  } = _ref11;
   return theme.color('black');
-}, _ref13 => {
+}, _ref12 => {
   let {
     theme
-  } = _ref13;
+  } = _ref12;
   return theme.color('white');
-}, _ref14 => {
+}, _ref13 => {
   let {
     theme
-  } = _ref14;
+  } = _ref13;
   return theme.allBreakpoints('M');
 });

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.0",
+  "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/MarketingPreferencesDS/MarketingPreferencesDS.style.js

@@ -35,10 +35,6 @@ const TopCopyWrapper = styled.div`
   margin: ${spacing('l')} 0;
   display: flex;
   width: 100%;
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    padding: 10px;
-  }
 `;
 
 const BottomCopyWrapper = styled.div`

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"