Merge branch 'main' into palette-contact-a11y-2847648259567731202

src/pages/Contact.tsx

@@ -9,6 +9,7 @@ import { sanitizeInput, isValidEmail } from "../utils/security";
 import styles from "./Contact.module.css";
 
 const NAME_MAX_LENGTH = 100;
+const EMAIL_MAX_LENGTH = 254;
 const SUBJECT_MAX_LENGTH = 200;
 const MESSAGE_MAX_LENGTH = 5000;
 
@@ -53,6 +54,8 @@ export function Contact() {
 
     if (!formData.email.trim()) {
       newErrors.email = "Required";
+    } else if (formData.email.length > EMAIL_MAX_LENGTH) {
+      newErrors.email = `Max ${EMAIL_MAX_LENGTH} characters`;
     } else if (!isValidEmail(formData.email)) {
       newErrors.email = "Invalid email";
     }
@@ -158,39 +161,51 @@ export function Contact() {
             >
               <p className={styles.intro}>{t.contact.intro}</p>
 
-              <form onSubmit={handleSubmit} className={styles.form}>
+              <form
+                onSubmit={handleSubmit}
+                className={styles.form}
+                noValidate
+              >
                 <Input
                   label={t.contact.form.name}
+                  required
                   placeholder={t.contact.form.namePlaceholder}
                   value={formData.name}
                   onChange={(e) => handleChange("name", e.target.value)}
                   error={errors.name}
+                  maxLength={NAME_MAX_LENGTH}
                 />
 
                 <Input
                   label={t.contact.form.email}
                   type="email"
+                  required
                   placeholder={t.contact.form.emailPlaceholder}
                   value={formData.email}
                   onChange={(e) => handleChange("email", e.target.value)}
                   error={errors.email}
+                  maxLength={EMAIL_MAX_LENGTH}
                 />
 
                 <Input
                   label={t.contact.form.subject}
+                  required
                   placeholder={t.contact.form.subjectPlaceholder}
                   value={formData.subject}
                   onChange={(e) => handleChange("subject", e.target.value)}
                   error={errors.subject}
+                  maxLength={SUBJECT_MAX_LENGTH}
                 />
 
                 <Textarea
                   label={t.contact.form.message}
+                  required
                   placeholder={t.contact.form.messagePlaceholder}
                   value={formData.message}
                   onChange={(e) => handleChange("message", e.target.value)}
                   error={errors.message}
                   rows={6}
+                  maxLength={MESSAGE_MAX_LENGTH}
                 />
 
                 <Button