From e14ce38f615faab9715ad27d3c4cd861cf688196 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 28 Jan 2026 02:10:17 +0000
Subject: [PATCH] feat: add accessible required field indicators and alerts

- Add visual asterisk for required inputs in Input.tsx
- Add .required style in Input.module.css
- Update Contact form to use required props and noValidate
- Add role="alert" to Contact form success/error messages
- Add tests for required field rendering

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
---
 .jules/palette.md                          |  3 +++
 src/components/ui/Input.module.css         |  5 +++++
 src/components/ui/Input.tsx                | 10 +++++++++
 src/components/ui/__tests__/Input.test.tsx | 24 ++++++++++++++++++++++
 src/pages/Contact.tsx                      | 14 ++++++++++++-
 5 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..8c4d7fb
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-22 - Semantic Required Fields with Custom Validation
+**Learning:** To combine custom validation UI with semantic `required` attributes (vital for a11y), add `noValidate` to the `<form>`. This prevents native browser bubbles while keeping the accessibility benefits.
+**Action:** Use `noValidate` on forms when implementing custom validation but keep `required` attributes on inputs.
diff --git a/src/components/ui/Input.module.css b/src/components/ui/Input.module.css
index 6cb7aa9..3acc481 100644
--- a/src/components/ui/Input.module.css
+++ b/src/components/ui/Input.module.css
@@ -10,6 +10,11 @@
   color: var(--md-sys-color-on-surface);
 }
 
+.required {
+  color: var(--md-sys-color-error);
+  margin-left: 0.25rem;
+}
+
 .input {
   padding: var(--space-md);
   font-family: var(--md-sys-typescale-body-font);
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index b3d0c24..185bfbe 100644
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -15,6 +15,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
         <label htmlFor={inputId} className={styles.label}>
           {label}
+          {props.required && (
+            <span className={styles.required} aria-hidden="true">
+              *
+            </span>
+          )}
         </label>
         <input
           ref={ref}
@@ -46,6 +51,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       <div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
         <label htmlFor={inputId} className={styles.label}>
           {label}
+          {props.required && (
+            <span className={styles.required} aria-hidden="true">
+              *
+            </span>
+          )}
         </label>
         <textarea
           ref={ref}
diff --git a/src/components/ui/__tests__/Input.test.tsx b/src/components/ui/__tests__/Input.test.tsx
index dd09cdd..bc99ca3 100644
--- a/src/components/ui/__tests__/Input.test.tsx
+++ b/src/components/ui/__tests__/Input.test.tsx
@@ -32,6 +32,19 @@ describe('Input', () => {
     expect(input.getAttribute('aria-invalid')).toBe('false');
     expect(input.hasAttribute('aria-describedby')).toBe(false);
   });
+
+  it('renders required asterisk when required prop is passed', () => {
+    render(<Input label="Required Input" required />);
+
+    // We search for the asterisk specifically
+    // Note: getByText('*') matches the content of the span
+    const asterisk = screen.getByText('*');
+    expect(asterisk).toBeTruthy();
+    expect(asterisk.getAttribute('aria-hidden')).toBe('true');
+
+    const input = screen.getByRole('textbox', { name: /Required Input/i });
+    expect(input.hasAttribute('required')).toBe(true);
+  });
 });
 
 describe('Textarea', () => {
@@ -49,4 +62,15 @@ describe('Textarea', () => {
     expect(error.id).toBeDefined();
     expect(error.id).not.toBe('');
   });
+
+  it('renders required asterisk when required prop is passed', () => {
+    render(<Textarea label="Required Textarea" required />);
+
+    const asterisk = screen.getByText('*');
+    expect(asterisk).toBeTruthy();
+    expect(asterisk.getAttribute('aria-hidden')).toBe('true');
+
+    const textarea = screen.getByRole('textbox', { name: /Required Textarea/i });
+    expect(textarea.hasAttribute('required')).toBe(true);
+  });
 });
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 708d7c8..6747d4e 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -158,9 +158,14 @@ 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)}
@@ -170,6 +175,7 @@ export function Contact() {
                 <Input
                   label={t.contact.form.email}
                   type="email"
+                  required
                   placeholder={t.contact.form.emailPlaceholder}
                   value={formData.email}
                   onChange={(e) => handleChange("email", e.target.value)}
@@ -178,6 +184,7 @@ export function Contact() {
 
                 <Input
                   label={t.contact.form.subject}
+                  required
                   placeholder={t.contact.form.subjectPlaceholder}
                   value={formData.subject}
                   onChange={(e) => handleChange("subject", e.target.value)}
@@ -186,6 +193,7 @@ export function Contact() {
 
                 <Textarea
                   label={t.contact.form.message}
+                  required
                   placeholder={t.contact.form.messagePlaceholder}
                   value={formData.message}
                   onChange={(e) => handleChange("message", e.target.value)}
@@ -210,6 +218,8 @@ export function Contact() {
                     className={styles.success}
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
+                    role="alert"
+                    aria-live="polite"
                   >
                     {t.contact.form.success}
                   </motion.p>
@@ -220,6 +230,8 @@ export function Contact() {
                     className={styles.error}
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
+                    role="alert"
+                    aria-live="polite"
                   >
                     {t.contact.form.error}
                   </motion.p>