fix: contact page accessibility problems

src/assets/locales/de/translations.json

@@ -48,13 +48,16 @@
   "contact.info-link": "<0>Nutzen Sie unser Kontaktformular oder schreiben Sie uns eine E-Mail an <1>[email protected]</1></0>",
   "contact.info": "Nutzen Sie unser Kontaktformular oder schreiben Sie uns eine E-Mail an [email protected]",
   "contact.name": "Name",
+  "contact.name-placeholder": "z.B. Max Mustermann",
   "contact.email": "E-Mail Adresse",
+  "contact.email-placeholder": "z.B. [email protected]",
   "contact.message": "Deine Nachricht an uns",
+  "contact.message-placeholder": "z.B. Hallo Satellytes, ...",
   "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",

src/assets/locales/en/translations.json

@@ -48,14 +48,17 @@
   "contact.info-link": "<0>Please use our contact form or send us an email to <1>[email protected]</1></0>",
   "contact.info": "Please use our contact form or send us an email to [email protected]",
   "contact.name": "Name",
+  "contact.name-placeholder": "e.g. John Doe",
   "contact.email": "E-mail address",
+  "contact.email-placeholder": "e.g. [email protected]",
   "contact.message": "Your message to us",
+  "contact.message-placeholder": "e.g. Hello Satellytes, ...",
   "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",

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>}

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) || ''}
       />

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.5)',
-      errorMessage: '#FF0D35',
+      errorMessage: '#EB0027',
       header: {
         default: '#FFFFFF',
         light: '#3E61EE',

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>

src/components/pages/contact/form-fields.tsx

@@ -21,6 +21,7 @@ export const FirstName = ({ control }) => {
       <TextInput
         name={'first_name'}
         label={t('contact.name')}
+        placeholder={t('contact.name-placeholder')}
         control={control}
         rules={{ required: t('contact.error.name') }}
       />
@@ -35,6 +36,7 @@ export const Email = ({ control }) => {
       <TextInput
         name={'email'}
         label={t('contact.email')}
+        placeholder={t('contact.email-placeholder')}
         control={control}
         rules={{
           required: t('contact.error.email'),
@@ -59,6 +61,7 @@ export const MessageArea = ({ control }) => {
       <TextArea
         name={'message'}
         label={t('contact.message')}
+        placeholder={t('contact.message-placeholder')}
         control={control}
         rules={{ required: t('contact.error.message') }}
       />

src/components/pages/contact/honeypot.tsx

@@ -6,6 +6,7 @@ import { FormData } from './form';
 
 const HoneypotFieldContainer = styled.div`
   ${hideVisually()}
+  aria-hidden: true;
 `;
 
 export const HoneypotField = (
@@ -14,14 +15,15 @@ export const HoneypotField = (
   const { field } = useController(props);
   return (
     <HoneypotFieldContainer>
-      <label>
+      <label aria-hidden={true}>
         {props.label}
         <input
           id={props.name}
           type="text"
           {...field}
           tabIndex={-1}
           autoComplete="false"
+          aria-hidden={true}
         />
       </label>
     </HoneypotFieldContainer>

src/templates/blog-post.tsx

@@ -46,7 +46,10 @@ export const Head = ({
   const { author, seoMetaText, title, publicationDate, heroImage } =
     data.contentfulBlogPost;
 
-  const shareImagePath = heroImage.shareImage.resize.src;
+  let shareImagePath = '';
+  if (heroImage && heroImage.shareImage && heroImage.shareImage.resize) {
+    shareImagePath = heroImage.shareImage.resize.src;
+  }
 
   /*
    * SEO Notes: