Merge pull request #31 from ragusa-it/palette/required-fields-a11y-7470820225000300564

🎨 Palette: Add accessible required field indicators

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

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);

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}

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);
+  });
 });

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>