From efc40f15786697b20e9d652347f964ed57755d3f Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Tue, 9 Jan 2024 17:31:51 +0100 Subject: [PATCH 01/12] fix: made error color contrast AA compliant --- src/components/layout/theme.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/theme.tsx b/src/components/layout/theme.tsx index 9ba15dc25..7c1f27d1f 100644 --- 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.5)', - errorMessage: '#FF0D35', + errorMessage: '#EB0027', header: { default: '#FFFFFF', light: '#3E61EE', From 7c87e913aa16c23fe6b3553090acfed21b042e33 Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Tue, 9 Jan 2024 17:34:53 +0100 Subject: [PATCH 02/12] fix: contact form error messages more clear --- src/assets/locales/de/translations.json | 8 ++++---- src/assets/locales/en/translations.json | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/assets/locales/de/translations.json b/src/assets/locales/de/translations.json index c66972f42..9cb644177 100644 --- 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 index 248018667..b4914c614 100644 --- 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", From b8dd47b52baa3a334a6bf2976c95f43b8e90476f Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Tue, 9 Jan 2024 17:36:37 +0100 Subject: [PATCH 03/12] fix: made honeypot fields aria-invisible --- src/components/pages/contact/honeypot.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/pages/contact/honeypot.tsx b/src/components/pages/contact/honeypot.tsx index 2a01cf9b0..354a40fa4 100644 --- a/src/components/pages/contact/honeypot.tsx +++ b/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,7 +15,7 @@ export const HoneypotField = ( const { field } = useController(props); return ( - From fb65953801497a2dbc174c47bed2b1a0d5ed46c6 Mon Sep 17 00:00:00 2001 From: "noa.santo" Date: Tue, 9 Jan 2024 17:41:47 +0100 Subject: [PATCH 04/12] feat: add placeholders to contact form --- src/assets/locales/de/translations.json | 3 +++ src/assets/locales/en/translations.json | 3 +++ src/components/forms/text-area/text-area.tsx | 6 +++++- src/components/forms/text-input/text-input.tsx | 6 +++++- src/components/pages/contact/form-fields.tsx | 3 +++ 5 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/assets/locales/de/translations.json b/src/assets/locales/de/translations.json index 9cb644177..f33d9a7e3 100644 --- a/src/assets/locales/de/translations.json +++ b/src/assets/locales/de/translations.json @@ -48,8 +48,11 @@ "contact.info-link": "<0>Nutzen Sie unser Kontaktformular oder schreiben Sie uns eine E-Mail an <1>info@satellytes.com", "contact.info": "Nutzen Sie unser Kontaktformular oder schreiben Sie uns eine E-Mail an beep@satellytes.com", "contact.name": "Name", + "contact.name-placeholder": "z.B. Max Mustermann", "contact.email": "E-Mail Adresse", + "contact.email-placeholder": "z.B. deine-email@adresse.com", "contact.message": "Deine Nachricht an uns", + "contact.message-placeholder": "z.B. Hallo Satellytes, ...", "contact.mandatory-field": "Pflichtfeld", "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", diff --git a/src/assets/locales/en/translations.json b/src/assets/locales/en/translations.json index b4914c614..48f3025c7 100644 --- a/src/assets/locales/en/translations.json +++ b/src/assets/locales/en/translations.json @@ -48,8 +48,11 @@ "contact.info-link": "<0>Please use our contact form or send us an email to <1>info@satellytes.com", "contact.info": "Please use our contact form or send us an email to beep@satellytes.com", "contact.name": "Name", + "contact.name-placeholder": "e.g. John Doe", "contact.email": "E-mail address", + "contact.email-placeholder": "e.g. your-email@adress.com", "contact.message": "Your message to us", + "contact.message-placeholder": "e.g. Hello Satellytes, ...", "contact.mandatory-field": "Mandatory field", "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.", diff --git a/src/components/forms/text-area/text-area.tsx b/src/components/forms/text-area/text-area.tsx index baea48f8d..181dc5f3a 100644 --- 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 & { label: string }, + props: UseControllerProps & { + 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 && {errorMessage}} diff --git a/src/components/forms/text-input/text-input.tsx b/src/components/forms/text-input/text-input.tsx index 31bb907f5..db7451bc7 100644 --- 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 & { label: string }, + props: UseControllerProps & { + 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/pages/contact/form-fields.tsx b/src/components/pages/contact/form-fields.tsx index bd8c6e475..4ca74b6b8 100644 --- a/src/components/pages/contact/form-fields.tsx +++ b/src/components/pages/contact/form-fields.tsx @@ -21,6 +21,7 @@ export const FirstName = ({ control }) => { @@ -35,6 +36,7 @@ export const Email = ({ control }) => { {