(fix): accessibility on Select, aria-described-by of <select> should be defined when state is different of default

Author: MBrandone

src/Select.tsx

@@ -63,9 +63,16 @@ export const Select = memo(
             return `select-${id}`;
         })();
 
-        const stateDescriptionId = `select-${useId()}-desc`;
         const messagesGroupId = `${selectId}-messages-group`;
 
+        const selectStateDescriptionId = useId();
+        const stateIsDefault = state === "default";
+
+        const stateDescriptionId = getStateDescriptionId(stateIsDefault, selectStateDescriptionId);
+        const nativeDescription = getSelectNativeDescription(nativeSelectProps["aria-describedby"]);
+
+        const selectAriaDescribedBy = `${stateDescriptionId} ${nativeDescription}`.trim();
+
         return (
             <div
                 id={id}
@@ -104,17 +111,13 @@ export const Select = memo(
                     {...nativeSelectProps}
                     className={cx(fr.cx("fr-select"), nativeSelectProps.className)}
                     id={selectId}
-                    aria-describedby={
-                        nativeSelectProps["aria-describedby"] !== undefined
-                            ? `${stateDescriptionId} ${nativeSelectProps["aria-describedby"]}`
-                            : stateDescriptionId
-                    }
+                    aria-describedby={selectAriaDescribedBy}
                     disabled={disabled}
                 >
                     {children}
                 </select>
                 <div id={messagesGroupId} className={fr.cx("fr-messages-group")} aria-live="polite">
-                    {state !== "default" && (
+                    {!stateIsDefault && (
                         <p
                             id={stateDescriptionId}
                             className={fr.cx(
@@ -140,6 +143,16 @@ export const Select = memo(
     })
 );
 
+function getStateDescriptionId(stateIsDefault: boolean, selectStateDescriptionId: string) {
+    return stateIsDefault ? "" : `select-${selectStateDescriptionId}-desc`;
+}
+
+function getSelectNativeDescription(
+    nativeSelectPropsAriaDescribedBy: React.SelectHTMLAttributes<HTMLSelectElement>["aria-describedby"]
+) {
+    return nativeSelectPropsAriaDescribedBy !== undefined ? nativeSelectPropsAriaDescribedBy : "";
+}
+
 Select.displayName = symToStr({ Select });
 
 export default Select;