chore: Input - wrapped error message within live region

codegouvfr · Sep 23, 2024 · 4e0bd61 · 4e0bd61
1 parent 44243e3
commit 4e0bd61
Showing 1 changed file with 30 additions and 23 deletions.
diff --git a/src/Input.tsx b/src/Input.tsx
@@ -101,6 +101,7 @@ export const Input = memo(
         })();
 
         const messageId = `${inputId}-desc-error`;
+        const messagesGroupId = `${inputId}-messages-group`;
 
         return (
             <div
@@ -182,29 +183,35 @@ export const Input = memo(
                         nativeInputOrTextArea
                     );
                 })()}
-                {state !== "default" && (
-                    <p
-                        id={messageId}
-                        className={cx(
-                            fr.cx(
-                                (() => {
-                                    switch (state) {
-                                        case "error":
-                                            return "fr-error-text";
-                                        case "success":
-                                            return "fr-valid-text";
-                                        case "info":
-                                            return "fr-info-text";
-                                    }
-                                    assert<Equals<typeof state, never>>();
-                                })()
-                            ),
-                            classes.message
-                        )}
-                    >
-                        {stateRelatedMessage}
-                    </p>
-                )}
+                <div
+                    id={messagesGroupId}
+                    className={fr.cx("fr-messages-group")}
+                    aria-live="assertive"
+                >
+                    {state !== "default" && (
+                        <p
+                            id={messageId}
+                            className={cx(
+                                fr.cx(
+                                    (() => {
+                                        switch (state) {
+                                            case "error":
+                                                return "fr-error-text";
+                                            case "success":
+                                                return "fr-valid-text";
+                                            case "info":
+                                                return "fr-info-text";
+                                        }
+                                        assert<Equals<typeof state, never>>();
+                                    })()
+                                ),
+                                classes.message
+                            )}
+                        >
+                            {stateRelatedMessage}
+                        </p>
+                    )}
+                </div>
             </div>
         );
     })