fix: contact page accessibility problems (#792)

* fix: made error color contrast AA compliant * fix: contact form error messages more clear * fix: made honeypot fields aria-invisible * feat: add placeholders to contact form * feat: add aria-lable to google maps link * fix: netlify build error fix * fix: removed redundant aria-hidden * feat: add aria-hidden to mandatory note at the bottom of the contact field because screen reader says what is mandatory * fix: put in example.com in form placeholder * chore: remove placeholders * fix: format fix * Fix: map not focusable with VoiceOver ctrl+alt+arrow key commands (still in the tab order) --------- Co-authored-by: noa.santo <noa.santo@satellytes.com>
satellytes · Feb 6, 2024 · 5f49f4c · 5f49f4c
1 parent 00f8324
commit 5f49f4c
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 17 deletions.
diff --git a/src/assets/locales/de/translations.json b/src/assets/locales/de/translations.json
@@ -51,10 +51,10 @@
   "contact.email": "E-Mail Adresse",
   "contact.message": "Deine Nachricht an uns",
   "contact.mandatory-field": "Pflichtfeld",
-  "contact.error.name": "Dein Name fehlt",
-  "contact.error.message": "Deine Nachricht fehlt",
-  "contact.error.email": "Deine E-Mail fehlt",
-  "contact.error.email-undefined": "Irgendwas stimmt an dieser E-Mail nicht",
+  "contact.error.name": "Das Feld Name ist nicht ausgefüllt. Bitte fülle es aus um die Nachricht senden zu können",
+  "contact.error.message": "Das Feld Nachricht ist nicht ausgefüllt. Bitte fülle es aus um die Nachricht senden zu können",
+  "contact.error.email": "Das Feld E-Mail ist nicht ausgefüllt. Bitte fülle es aus um die Nachricht senden zu können",
+  "contact.error.email-undefined": "Irgendwas stimmt an dieser E-Mail nicht. Bitte überprüfe sie und versuche es noch einmal",
   "contact.action.again-text": "Leider gab es einen Fehler. Bitte versuche es noch einmal. Klappt das nicht, schicke deine Nachricht bitte direkt an",
   "contact.action.missing": "Bitte fülle alle benötigten Felder aus",
   "contact.action.send": "Senden",

diff --git a/src/assets/locales/en/translations.json b/src/assets/locales/en/translations.json
@@ -51,11 +51,11 @@
   "contact.email": "E-mail address",
   "contact.message": "Your message to us",
   "contact.mandatory-field": "Mandatory field",
-  "contact.error.name": "Your name is missing",
-  "contact.error.message": "Your message is missing",
-  "contact.error.email": "Your email is missing",
-  "contact.error.email-undefined": "Something is wrong with this email",
-  "contact.action.again-text": "Unfortunately, there was a mistake. Please try again. If this does not work, please send your message directly to",
+  "contact.error.name": "The field name is not filled in. Please fill in the field name to send the message.",
+  "contact.error.message": "The field message is not filled in. Please fill in the field message to send the message.",
+  "contact.error.email": "The field email is not filled in. Please fill in the field email to send the message.",
+  "contact.error.email-undefined": "Something is wrong with this email. Please check the email address and try again.",
+  "contact.action.again-text": "Unfortunately, there was a error. Please try again. If this does not work, please send your message directly to",
   "contact.action.missing": "Please fill in all required fields",
   "contact.action.send": "Send",
   "contact.action.again": "Send again",

diff --git a/src/components/forms/text-area/text-area.tsx b/src/components/forms/text-area/text-area.tsx
@@ -29,7 +29,10 @@ const StyledTextArea = styled.textarea<{ $hasError?: boolean }>`
 `;
 
 export const TextArea = (
-  props: UseControllerProps<FormDataProps> & { label: string },
+  props: UseControllerProps<FormDataProps> & {
+    label: string;
+    placeholder?: string;
+  },
 ) => {
   const { field, fieldState, formState } = useController(props);
   const errorMessage = fieldState?.error?.message;
@@ -50,6 +53,7 @@ export const TextArea = (
         value={(field?.value as string) || ''}
         name={props.name}
         id={props.name}
+        placeholder={props.placeholder}
       />
 
       {errorMessage && <StyledErrorMessage>{errorMessage}</StyledErrorMessage>}

diff --git a/src/components/forms/text-input/text-input.tsx b/src/components/forms/text-input/text-input.tsx
@@ -47,7 +47,10 @@ export const StyledErrorMessage = styled.span`
 `;
 
 export const TextInput = (
-  props: UseControllerProps<FormDataProps> & { label: string },
+  props: UseControllerProps<FormDataProps> & {
+    label: string;
+    placeholder?: string;
+  },
 ) => {
   const { field, fieldState, formState } = useController(props);
   const errorMessage = fieldState?.error?.message;
@@ -66,6 +69,7 @@ export const TextInput = (
         $hasError={Boolean(errorMessage)}
         disabled={formState.isSubmitting}
         id={props.name}
+        placeholder={props.placeholder}
         {...field}
         value={(field?.value as string) || ''}
       />

diff --git a/src/components/layout/theme.tsx b/src/components/layout/theme.tsx
@@ -19,7 +19,7 @@ export const theme: DefaultTheme = {
       secondary: 'rgba(32,40,64,0.5)',
       topline: '#3E61EE',
       timestamp: 'rgba(0, 0, 0, 0.65)',
-      errorMessage: '#FF0D35',
+      errorMessage: '#EB0027',
       header: {
         default: '#FFFFFF',
         light: '#3E61EE',

diff --git a/src/components/pages/contact/address.tsx b/src/components/pages/contact/address.tsx
@@ -29,7 +29,10 @@ export const Address = () => {
       80331 München
       <br />
       <br />
-      <StyledLink to="https://g.page/satellytes?share">
+      <StyledLink
+        to="https://g.page/satellytes?share"
+        aria-label={'Open Satellytes Google Maps profile in a new tab'}
+      >
         Google Maps &gt;
       </StyledLink>
     </SectionHeader>

diff --git a/src/components/pages/contact/contact-page.tsx b/src/components/pages/contact/contact-page.tsx
@@ -6,7 +6,15 @@ import { ContentBlockContainer } from '../../layout/content-block-container';
 import { Layout } from '../../layout/layout';
 
 export const ContactPage = () => (
-  <Layout transparentHeader={true} light={true} hero={<Leaflet />}>
+  <Layout
+    transparentHeader={true}
+    light={true}
+    hero={
+      <div aria-hidden={true} tabIndex={-1}>
+        <Leaflet />
+      </div>
+    }
+  >
     <ContentBlockContainer>
       <Address />
     </ContentBlockContainer>

diff --git a/src/components/pages/contact/form.tsx b/src/components/pages/contact/form.tsx
@@ -95,7 +95,9 @@ export const Form = ({ onSuccess }: { onSuccess: () => any }) => {
       <HoneypotField name="firstName" label="First Name" control={control} />
       <HoneypotField name="phone" label="Phone" control={control} />
 
-      <MandatoryNotes>* {t('contact.mandatory-field')}</MandatoryNotes>
+      <MandatoryNotes aria-hidden={true}>
+        * {t('contact.mandatory-field')}
+      </MandatoryNotes>
       <Submit disabled={requestStatus === 'submitting'} type={'submit'}>
         {t('contact.action.send')}
       </Submit>

diff --git a/src/components/pages/contact/honeypot.tsx b/src/components/pages/contact/honeypot.tsx
@@ -14,7 +14,7 @@ export const HoneypotField = (
   const { field } = useController(props);
   return (
     <HoneypotFieldContainer>
-      <label>
+      <label aria-hidden={true}>
         {props.label}
         <input
           id={props.name}

diff --git a/src/components/pages/contact/leaflet/leaflet.tsx b/src/components/pages/contact/leaflet/leaflet.tsx
@@ -130,7 +130,7 @@ export const Leaflet = () => {
         Lost?{' '}
         <span
           role={'img'}
-          aria-label={"see no evil monkey emoji, because it's embarassing"}
+          aria-label={"see no evil monkey emoji, because it's embarrassing"}
         >
           🙈
         </span>{' '}