[Accessibility] Input/Select - wrapped error message within live regi…

…on (#312) * chore: Input - wrapped error message within live region * chore: input aria-live changed from assertive to polite * chore: Select component, added support for aria-live
codegouvfr · Sep 23, 2024 · 296de45 · 296de45
1 parent 44243e3
commit 296de45
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 41 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,31 @@ 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="polite">
+                    {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>
         );
     })

diff --git 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>
         );
     })