[SELC-7423] feat: added live region in UserDataSection in AddUserForm

src/pages/addUserFlow/addUser/components/AddUserForm/AddUserForm.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   FormControlLabel,
   Grid,
@@ -338,6 +339,47 @@ export default function AddUserForm({
     });
   };
 
+  const LiveRegion = ({ fieldName, message }: { fieldName: string; message?: string }) => {
+    const [delayedMessage, setDelayedMessage] = useState<string>('');
+
+    useEffect(() => {
+      if (!message || message === requiredError) {
+        setDelayedMessage('');
+        return;
+      }
+
+      const timer = setTimeout(() => {
+        setDelayedMessage(message);
+      }, 1000);
+
+      return () => clearTimeout(timer);
+    }, [message]);
+
+    if (!delayedMessage) {
+      return null;
+    }
+
+    return (
+      <Box
+        id={`${fieldName}-live-region`}
+        role="alert"
+        style={{
+          border: 0,
+          clip: 'rect(0  0  0 0)',
+          height: '1px',
+          margin: '-1px',
+          overflow: 'hidden',
+          padding: 0,
+          position: 'absolute',
+          whiteSpace: 'nowrap',
+          width: '1px',
+        }}
+      >
+        {delayedMessage}
+      </Box>
+    );
+  };
+
   const baseTextFieldProps = (
     field: keyof PartyUserOnCreation,
     label: string,
@@ -386,6 +428,7 @@ export default function AddUserForm({
           validTaxcode={validTaxcode}
           isMobile={isMobile}
           t={t}
+          LiveRegion={LiveRegion}
         />
       )}
 
@@ -446,13 +489,13 @@ export default function AddUserForm({
                       />
                     }
                     aria-label={t(titleKey)}
-                    /*
-                    onClick={async () => {
-                      // TODO set isAddINBulkEAFlow only for role admin not operator
-                      setIsAddInBulkEAFlow(value);
-                      await formik.setFieldValue('toAddOnAggregates', value, true);
-                    }}
-                    */
+                  /*
+                  onClick={async () => {
+                    // TODO set isAddINBulkEAFlow only for role admin not operator
+                    setIsAddInBulkEAFlow(value);
+                    await formik.setFieldValue('toAddOnAggregates', value, true);
+                  }}
+                  */
                   />
                 ))}
               </RadioGroup>

src/pages/addUserFlow/addUser/components/AddUserForm/components/UserDataSection.tsx

@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 import { theme } from '@pagopa/mui-italia';
 import { TitleBox } from '@pagopa/selfcare-common-frontend/lib';
 import { FormikProps } from 'formik';
@@ -16,6 +16,7 @@ type UserDataSectionProps = {
   validTaxcode: string | undefined;
   isMobile: boolean;
   t: (key: string) => string;
+  LiveRegion?: React.FC<{ fieldName: string; message?: string }>;
 };
 
 export const UserDataSection = ({
@@ -24,6 +25,7 @@ export const UserDataSection = ({
   validTaxcode,
   isMobile,
   t,
+  LiveRegion,
 }: UserDataSectionProps) => (
   <Grid container direction="column" sx={commonStyles}>
     <Grid item xs={12}>
@@ -41,6 +43,7 @@ export const UserDataSection = ({
         size="small"
         {...baseTextFieldProps('taxCode', t('userEdit.addForm.fiscalCode.label'), '', 'uppercase')}
       />
+      {LiveRegion && <LiveRegion fieldName="taxCode" message={formik.errors.taxCode} />}
     </Grid>
     <Grid
       item
@@ -55,18 +58,24 @@ export const UserDataSection = ({
         },
       }}
     >
-      <CustomTextField
-        size="small"
-        style={{ width: isMobile ? '100%' : '49%' }}
-        {...baseTextFieldProps('name', t('userEdit.addForm.name.label'), '')}
-        disabled={formik.values.certifiedName || !validTaxcode}
-      />
-      <CustomTextField
-        size="small"
-        style={{ width: isMobile ? '100%' : '49%', marginTop: isMobile ? '24px' : 0 }}
-        {...baseTextFieldProps('surname', t('userEdit.addForm.surname.label'), '')}
-        disabled={formik.values.certifiedSurname || !validTaxcode}
-      />
+      <Box sx={{ width: isMobile ? '100%' : '49%', position: 'relative' }}>
+        <CustomTextField
+          size="small"
+          style={{ width: '100%' }}
+          {...baseTextFieldProps('name', t('userEdit.addForm.name.label'), '')}
+          disabled={formik.values.certifiedName || !validTaxcode}
+        />
+        {LiveRegion && <LiveRegion fieldName="name" message={formik.errors.name} />}
+      </Box>
+      <Box sx={{ width: isMobile ? '100%' : '49%', marginTop: isMobile ? '24px' : 0, position: 'relative' }}>
+        <CustomTextField
+          size="small"
+          style={{ width: '100%' }}
+          {...baseTextFieldProps('surname', t('userEdit.addForm.surname.label'), '')}
+          disabled={formik.values.certifiedSurname || !validTaxcode}
+        />
+        {LiveRegion && <LiveRegion fieldName="surname" message={formik.errors.surname} />}
+      </Box>
     </Grid>
     <Grid item xs={12} mb={3} sx={{ height: '75px' }}>
       <CustomTextField
@@ -79,6 +88,7 @@ export const UserDataSection = ({
         )}
         disabled={!validTaxcode}
       />
+      {LiveRegion && <LiveRegion fieldName="email" message={formik.errors.email} />}
     </Grid>
     <Grid item xs={12} mb={3} sx={{ height: '75px' }}>
       <CustomTextField
@@ -91,6 +101,7 @@ export const UserDataSection = ({
         )}
         disabled={!validTaxcode}
       />
+      {LiveRegion && <LiveRegion fieldName="confirmEmail" message={formik.errors.confirmEmail} />}
     </Grid>
   </Grid>
 );