From 4e0bd6175520d9a9bdce50f2c1188676b118e217 Mon Sep 17 00:00:00 2001
From: Patrick Nguyen <patrick.nguyen2011@gmail.com>
Date: Mon, 23 Sep 2024 11:55:42 +0200
Subject: [PATCH 1/3] chore: Input - wrapped error message within live region

---
 src/Input.tsx | 53 +++++++++++++++++++++++++++++----------------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 4aa21beb..22622f02 100644
--- 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>
         );
     })

From 33632d519a5c4ee7f98d4c88649a47aaf4c62081 Mon Sep 17 00:00:00 2001
From: Patrick Nguyen <patrick.nguyen2011@gmail.com>
Date: Mon, 23 Sep 2024 13:51:00 +0200
Subject: [PATCH 2/3] chore: input aria-live changed from assertive to polite

---
 src/Input.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 22622f02..ea2b5f71 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -183,11 +183,7 @@ export const Input = memo(
                         nativeInputOrTextArea
                     );
                 })()}
-                <div
-                    id={messagesGroupId}
-                    className={fr.cx("fr-messages-group")}
-                    aria-live="assertive"
-                >
+                <div id={messagesGroupId} className={fr.cx("fr-messages-group")} aria-live="polite">
                     {state !== "default" && (
                         <p
                             id={messageId}

From 638fefaad367463a35de8cb7dce2bf12e8cb0946 Mon Sep 17 00:00:00 2001
From: Patrick Nguyen <patrick.nguyen2011@gmail.com>
Date: Mon, 23 Sep 2024 13:51:31 +0200
Subject: [PATCH 3/3] chore: Select component, added support for aria-live

---
 src/Select.tsx | 39 +++++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/Select.tsx b/src/Select.tsx
index d860c034..cece5bfe 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -64,6 +64,7 @@ export const Select = memo(
         })();
 
         const stateDescriptionId = `select-${useId()}-desc`;
+        const messagesGroupId = `${selectId}-messages-group`;
 
         return (
             <div
@@ -107,24 +108,26 @@ export const Select = memo(
                 >
                     {children}
                 </select>
-                {state !== "default" && (
-                    <p
-                        id={stateDescriptionId}
-                        className={fr.cx(
-                            (() => {
-                                switch (state) {
-                                    case "error":
-                                        return "fr-error-text";
-                                    case "success":
-                                        return "fr-valid-text";
-                                }
-                                assert<Equals<typeof state, never>>(false);
-                            })()
-                        )}
-                    >
-                        {stateRelatedMessage}
-                    </p>
-                )}
+                <div id={messagesGroupId} className={fr.cx("fr-messages-group")} aria-live="polite">
+                    {state !== "default" && (
+                        <p
+                            id={stateDescriptionId}
+                            className={fr.cx(
+                                (() => {
+                                    switch (state) {
+                                        case "error":
+                                            return "fr-error-text";
+                                        case "success":
+                                            return "fr-valid-text";
+                                    }
+                                    assert<Equals<typeof state, never>>(false);
+                                })()
+                            )}
+                        >
+                            {stateRelatedMessage}
+                        </p>
+                    )}
+                </div>
             </div>
         );
     })