Merge pull request #11630 from bbc/WSTEAM1-1025-a11y-fixes

WSTEAM1-1025 UGC Form a11y fixes
bbc · May 20, 2024 · 26f5b4e · 26f5b4e
2 parents 0141e0d + 9fffd0c
commit 26f5b4e
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 120 deletions.
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx
@@ -25,7 +25,7 @@ export default function Form({
   privacyNotice,
 }: Props) {
   const { handleSubmit, submissionError, submitted } = useFormContext();
-
+  const translation = 'Our data policy';
   const formFields = fields?.map(({ id, label, htmlType }) => (
     <FormField key={id} id={id} label={label} htmlType={htmlType} />
   ));
@@ -45,12 +45,11 @@ export default function Form({
       <form onSubmit={handleSubmit} noValidate>
         {formFields}
 
-        <Heading // TODO: need translations for this, it doesn't come through from the api
-          level={3}
+        <strong // TODO: need translations for this, it doesn't come through from the api
           css={styles.privacyHeading}
         >
-          Our data policy
-        </Heading>
+          {translation}
+        </strong>
         <div
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: privacyNotice }}

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/Checkbox.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/Checkbox.tsx
@@ -30,6 +30,7 @@ export default ({
         })}
         {...(required && { 'aria-required': required })}
       />
+
       <Label id={id} css={[styles.checkboxLabel]}>
         {label}
       </Label>

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/EmailInput.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/EmailInput.tsx
@@ -17,19 +17,21 @@ export default ({
   return (
     <>
       <Label id={id}>{label}</Label>
-      <input
-        css={[styles.textField, styles.focusIndicator]}
-        id={id}
-        name={name}
-        type="email"
-        value={value as string}
-        onChange={e => handleChange(e.target.name, e.target.value)}
-        {...(hasAttemptedSubmit && {
-          ...(wasInvalid && { 'aria-invalid': !isValid }),
-          ...(required && { 'aria-required': required }),
-          ...(!isValid && { 'aria-describedby': describedBy }),
-        })}
-      />
+      <div>
+        <input
+          css={[styles.textField, styles.focusIndicator]}
+          id={id}
+          name={name}
+          type="email"
+          value={value as string}
+          onChange={e => handleChange(e.target.name, e.target.value)}
+          {...(hasAttemptedSubmit && {
+            ...(wasInvalid && { 'aria-invalid': !isValid }),
+            ...(required && { 'aria-required': required }),
+            ...(!isValid && { 'aria-describedby': describedBy }),
+          })}
+        />
+      </div>
     </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/FieldLabel.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/FieldLabel.tsx
@@ -9,7 +9,10 @@ export default ({
   id,
   children,
   className,
-}: PropsWithChildren<{ id: InputProps['id']; className?: string }>) => (
+}: PropsWithChildren<{
+  id: InputProps['id'];
+  className?: string;
+}>) => (
   <Text as="label" className={className} htmlFor={id} css={styles.fieldLabel}>
     {children}
   </Text>

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/File.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/File.tsx
@@ -14,18 +14,20 @@ export default ({
   return (
     <>
       <Label id={id}>{label}</Label>
-      <input
-        id={id}
-        name={name}
-        type="file"
-        onChange={e =>
-          e.target.files && handleChange(e.target.name, e.target.files)
-        }
-        multiple
-        aria-invalid={!isValid}
-        aria-required={required}
-        aria-describedby={describedBy}
-      />
+      <div>
+        <input
+          id={id}
+          name={name}
+          type="file"
+          onChange={e =>
+            e.target.files && handleChange(e.target.name, e.target.files)
+          }
+          multiple
+          aria-invalid={!isValid}
+          aria-required={required}
+          aria-describedby={describedBy}
+        />
+      </div>
     </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/Telephone.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/Telephone.tsx
@@ -17,19 +17,21 @@ export default ({
   return (
     <>
       <Label id={id}>{label}</Label>
-      <input
-        id={id}
-        css={[styles.textField, styles.focusIndicator]}
-        name={name}
-        type="tel"
-        value={value as string}
-        onChange={e => handleChange(e.target.name, e.target.value)}
-        {...(hasAttemptedSubmit && {
-          ...(wasInvalid && { 'aria-invalid': !isValid }),
-          ...(required && { 'aria-required': required }),
-          ...(!isValid && { 'aria-describedby': describedBy }),
-        })}
-      />
+      <div>
+        <input
+          id={id}
+          css={[styles.textField, styles.focusIndicator]}
+          name={name}
+          type="tel"
+          value={value as string}
+          onChange={e => handleChange(e.target.name, e.target.value)}
+          {...(hasAttemptedSubmit && {
+            ...(wasInvalid && { 'aria-invalid': !isValid }),
+            ...(required && { 'aria-required': required }),
+            ...(!isValid && { 'aria-describedby': describedBy }),
+          })}
+        />
+      </div>
     </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextArea.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextArea.tsx
@@ -1,5 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import Paragraph from '#app/components/Paragraph';
+import pixelsToRem from '#app/utilities/pixelsToRem';
 import { InputProps } from '../types';
 import Label from './FieldLabel';
 import styles from './styles';
@@ -14,10 +16,18 @@ export default ({
   hasAttemptedSubmit,
 }: InputProps) => {
   const { isValid, value = '', required, wasInvalid } = inputState ?? {};
+  const translation = 'Maximum 500 Words';
 
   return (
     <>
       <Label id={id}>{label}</Label>
+      <Paragraph
+        css={{ marginBottom: `${pixelsToRem(6)}rem` }}
+        fontVariant="sansRegular"
+        size="brevier"
+      >
+        {translation}
+      </Paragraph>
       <textarea
         id={id}
         css={[styles.textField, styles.textArea, styles.focusIndicator]}

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextInput.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextInput.tsx
@@ -18,19 +18,21 @@ export default ({
   return (
     <>
       <Label id={id}>{label}</Label>
-      <input
-        css={[styles.textField, styles.focusIndicator]}
-        id={id}
-        name={name}
-        type="text"
-        value={value as string}
-        onChange={e => handleChange(e.target.name, e.target.value)}
-        {...(hasAttemptedSubmit && {
-          ...(wasInvalid && { 'aria-invalid': !isValid }),
-          ...(required && { 'aria-required': required }),
-          ...(!isValid && { 'aria-describedby': describedBy }),
-        })}
-      />
+      <div>
+        <input
+          css={[styles.textField, styles.focusIndicator]}
+          id={id}
+          name={name}
+          type="text"
+          value={value as string}
+          onChange={e => handleChange(e.target.name, e.target.value)}
+          {...(hasAttemptedSubmit && {
+            ...(wasInvalid && { 'aria-invalid': !isValid }),
+            ...(required && { 'aria-required': required }),
+            ...(!isValid && { 'aria-describedby': describedBy }),
+          })}
+        />
+      </div>
     </>
   );
 };