fix(PN-13485): Fix a11y for filter of notification and delegation (#1434

) * fix: pending for wait design * insert comment * fix: insert copy and add case in test * feat: insert new invisbile component * feat: insert alert in submit and cancel filter form of notification page * refactor: change component invisible for a11y * commit comment * feat: delete interaction with popup indicator in autocomplete on group of delegation * feat: insert id in invisible container * fix(PN-13485): remove button in delegationcompany autocomplete * fix : insert color for search icon * fix: insert correct color * feat: insert summary of selected group * feat: insert modify of filter notification in pg * feat: insert summary for after and before filtering by group * fix: init fix test * feat: insert check a11y for iun filter * fixed failing tests * feat: insert message for aria filter * fix: fix filter notification test * fix: fix variable * fix: fix focus for modal * fix: should be correct fix for aria live * fix: delete aria live in tablebody * lint * fix: fix for cr * fix: fix for cr * fix: fix test * fix: fix for complete pr * fix: delete unused fn * fix: delete handle cancel useless --------- Co-authored-by: Sarah Donvito <[email protected]> Co-authored-by: Andrea Cimini <[email protected]>
pagopa · Feb 28, 2025 · 0b89e7c · 0b89e7c
1 parent f16a9d1
commit 0b89e7c
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 21 deletions.
diff --git a/packages/pn-commons/src/components/PnAutocomplete.tsx b/packages/pn-commons/src/components/PnAutocomplete.tsx
@@ -10,8 +10,8 @@ const PnAutocomplete = <
 ) => (
   <Autocomplete
     {...props}
-    openText={props.openText || ""}
-    closeText={props.closeText || ""}
+    openText={props.openText ?? ''}
+    closeText={props.closeText ?? ''}
     PaperComponent={({ children }) => <Paper elevation={8}>{children}</Paper>}
   />
 );

diff --git a/packages/pn-commons/src/test-utils.tsx b/packages/pn-commons/src/test-utils.tsx
@@ -17,6 +17,7 @@ import {
   waitFor,
   within,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { appStateSlice } from './redux/slices/appStateSlice';
 import { formatDate } from './utility';
@@ -164,15 +165,16 @@ async function testAutocomplete(
   closeOnSelect?: boolean
 ) {
   const autocomplete = within(container as HTMLElement).getByTestId(elementName);
+  const autocompleteInput = autocomplete.querySelector('input');
+  expect(autocompleteInput).toBeInTheDocument();
   if (mustBeOpened) {
-    const button = autocomplete.querySelector('button[class*="MuiAutocomplete-popupIndicator"]');
-    fireEvent.click(button!);
+    await userEvent.click(autocompleteInput!);
   }
-  const dropdown = (await waitFor(() =>
-    document.querySelector('[role="presentation"][class*="MuiAutocomplete-popper"')
-  )) as HTMLElement;
+  const dropdown = await waitFor(() =>
+    document.querySelector<HTMLElement>('[role="presentation"][class*="MuiAutocomplete-popper"]')
+  );
   expect(dropdown).toBeInTheDocument();
-  const dropdownOptionsList = within(dropdown).getByRole('listbox');
+  const dropdownOptionsList = within(dropdown!).getByRole('listbox');
   expect(dropdownOptionsList).toBeInTheDocument();
   const dropdownOptionsListItems = within(dropdownOptionsList).getAllByRole('option');
   expect(dropdownOptionsListItems).toHaveLength(options.length);

diff --git a/packages/pn-personafisica-webapp/public/locales/it/notifiche.json b/packages/pn-personafisica-webapp/public/locales/it/notifiche.json
@@ -16,7 +16,8 @@
     "data_a": "Al",
     "data_a-input-aria-label": "Inserisci la data finale della ricerca",
     "errors": {
-      "iun": "Inserisci un codice IUN valido"
+      "iun": "Inserisci un codice IUN valido",
+      "data_a": "La data di inizio deve precedere la data di fine"
     }
   },
   "sort": {

diff --git a/packages/pn-personafisica-webapp/src/components/Notifications/FilterNotifications.tsx b/packages/pn-personafisica-webapp/src/components/Notifications/FilterNotifications.tsx
@@ -146,7 +146,6 @@ const FilterNotifications = forwardRef(({ showFilters, currentDelegator }: Props
   if (!showFilters) {
     return <></>;
   }
-
   const isInitialSearch = _.isEqual(formik.values, initialEmptyValues);
   return isMobile ? (
     <CustomMobileDialog>

diff --git a/...ages/pn-personafisica-webapp/src/components/Notifications/FilterNotificationsFormBody.tsx b/...ages/pn-personafisica-webapp/src/components/Notifications/FilterNotificationsFormBody.tsx
@@ -2,7 +2,7 @@ import { FormikErrors, FormikTouched, FormikValues } from 'formik';
 import { ChangeEvent, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Grid, TextField } from '@mui/material';
+import { FormHelperText, Grid, TextField } from '@mui/material';
 import {
   CustomDatePicker,
   DATE_FORMAT,
@@ -90,8 +90,11 @@ const FilterNotificationsFormBody = ({
           error={formikInstance.touched.iunMatch && Boolean(formikInstance.errors.iunMatch)}
           helperText={
             formikInstance.touched.iunMatch &&
-            formikInstance.errors.iunMatch &&
-            String(formikInstance.errors.iunMatch)
+            formikInstance.errors.iunMatch && (
+              <FormHelperText error aria-live="assertive">
+                {String(formikInstance.errors.iunMatch)}
+              </FormHelperText>
+            )
           }
           fullWidth
           sx={{ marginBottom: isMobile ? '20px' : '0' }}
@@ -126,6 +129,12 @@ const FilterNotificationsFormBody = ({
                 type: 'text',
                 'data-testid': 'input(start date)',
               },
+              helperText: (
+                <FormHelperText error aria-live="assertive">
+                  {!!formikInstance.errors.startDate &&
+                    t('filters.errors.data_a', { ns: 'notifiche' })}
+                </FormHelperText>
+              ),
             },
           }}
           disableFuture={true}
@@ -160,6 +169,12 @@ const FilterNotificationsFormBody = ({
                 type: 'text',
                 'data-testid': 'input(end date)',
               },
+              helperText: (
+                <FormHelperText sx={{ ml: 0 }} error aria-live="assertive">
+                  {!!formikInstance.errors.endDate &&
+                    t('filters.errors.data_a', { ns: 'notifiche' })}
+                </FormHelperText>
+              ),
             },
           }}
           disableFuture={true}

diff --git a/packages/pn-personafisica-webapp/src/pages/Notifiche.page.tsx b/packages/pn-personafisica-webapp/src/pages/Notifiche.page.tsx
@@ -113,7 +113,7 @@ const Notifiche = () => {
   return (
     <LoadingPageWrapper isInitialized={pageReady}>
       <Box p={3}>
-        {!mandateId && <DomicileBanner source={ContactSource.HOME_NOTIFICHE} />}
+      {!mandateId && <DomicileBanner source={ContactSource.HOME_NOTIFICHE} />}
         <TitleBox variantTitle="h4" title={pageTitle} mbTitle={isMobile ? 3 : undefined} />
         <ApiErrorWrapper
           apiId={DASHBOARD_ACTIONS.GET_RECEIVED_NOTIFICATIONS}

diff --git a/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx b/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx
@@ -22,6 +22,7 @@ import {
   PnDialogActions,
   PnDialogContent,
 } from '@pagopa-pn/pn-commons';
+import SearchIcon from '@mui/icons-material/Search';
 
 import { GroupStatus } from '../../models/groups';
 import { useAppSelector } from '../../redux/hooks';
@@ -224,6 +225,12 @@ const AcceptDelegationModal: React.FC<Props> = ({
                     ? t('required-field', { ns: 'common' })
                     : ''
                 }
+                InputProps={{
+                  ...params.InputProps,
+                  endAdornment: (
+                    <SearchIcon sx={{color:'text.secondary'}}/>
+                  ),
+                }}
               />
             )}
             value={groupForm.value}

diff --git a/packages/pn-personagiuridica-webapp/src/components/Deleghe/DelegationsOfTheCompany.tsx b/packages/pn-personagiuridica-webapp/src/components/Deleghe/DelegationsOfTheCompany.tsx
@@ -196,6 +196,7 @@ const DelegationsOfTheCompany = () => {
   ) => (
     <li {...props} key={option.id}>
       <Checkbox
+        inputProps={{ 'aria-live': 'assertive' }}
         icon={icon}
         checkedIcon={checkedIcon}
         style={{ marginRight: 8 }}
@@ -377,21 +378,23 @@ const DelegationsOfTheCompany = () => {
                   sx={{ marginBottom: isMobile ? '20px' : '0' }}
                 />
               </Grid>
-              <Grid item xs={12} lg={3}>
+              <Grid item xs={12} lg={3} sx={{ justifyContent: 'space-between' }}>
+                {/* c''e ancora il bottone anche se non é raggiungibile o cliccabile */}
                 <PnAutocomplete
                   id="groups"
                   size="small"
                   fullWidth
                   options={groups.filter((group) => group.status === GroupStatus.ACTIVE)}
                   disableCloseOnSelect
+                  forcePopupIcon={false}
                   multiple
                   noOptionsText={t('deleghe.table.no-group-found')}
                   getOptionLabel={getOptionLabel}
                   isOptionEqualToValue={(option, value) => option.id === value.id}
-                  popupIcon={<SearchIcon />}
                   sx={{
                     [`& .MuiAutocomplete-popupIndicator`]: {
                       transform: 'none',
+                      pointerEvents: 'none',
                     },
                     marginBottom: isMobile ? '20px' : '0',
                   }}
@@ -402,6 +405,10 @@ const DelegationsOfTheCompany = () => {
                       label={t('deleghe.table.group')}
                       placeholder={t('deleghe.table.group')}
                       name="groups"
+                      InputProps={{
+                        ...params.InputProps,
+                        endAdornment: <SearchIcon sx={{ color: 'text.secondary' }} />,
+                      }}
                     />
                   )}
                   value={formik.values.groups}

diff --git a/...n-personagiuridica-webapp/src/components/Notifications/FilterNotificationsFormActions.tsx b/...n-personagiuridica-webapp/src/components/Notifications/FilterNotificationsFormActions.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Grid } from '@mui/material';
-import { CustomMobileDialogAction } from '@pagopa-pn/pn-commons';
+import {  CustomMobileDialogAction } from '@pagopa-pn/pn-commons';
 
 type Props = {
   filtersApplied: boolean;

diff --git a/...s/pn-personagiuridica-webapp/src/components/Notifications/FilterNotificationsFormBody.tsx b/...s/pn-personagiuridica-webapp/src/components/Notifications/FilterNotificationsFormBody.tsx
@@ -2,7 +2,7 @@ import { FormikErrors, FormikTouched, FormikValues } from 'formik';
 import { ChangeEvent, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Grid, TextField } from '@mui/material';
+import { FormHelperText, Grid, TextField } from '@mui/material';
 import {
   CustomDatePicker,
   DATE_FORMAT,
@@ -90,8 +90,11 @@ const FilterNotificationsFormBody = ({
           error={formikInstance.touched.iunMatch && Boolean(formikInstance.errors.iunMatch)}
           helperText={
             formikInstance.touched.iunMatch &&
-            formikInstance.errors.iunMatch &&
-            String(formikInstance.errors.iunMatch)
+            formikInstance.errors.iunMatch && (
+              <FormHelperText error aria-live="assertive">
+                {String(formikInstance.errors.iunMatch)}
+              </FormHelperText>
+            )
           }
           fullWidth
           sx={{ marginBottom: isMobile ? '20px' : '0' }}
@@ -126,6 +129,12 @@ const FilterNotificationsFormBody = ({
                 type: 'text',
                 'data-testid': 'input(start date)',
               },
+              helperText: (
+                <FormHelperText error aria-live="assertive">
+                  {!!formikInstance.errors.startDate &&
+                    t('filters.errors.data_a', { ns: 'notifiche' })}
+                </FormHelperText>
+              ),
             },
           }}
           disableFuture={true}
@@ -160,6 +169,12 @@ const FilterNotificationsFormBody = ({
                 type: 'text',
                 'data-testid': 'input(end date)',
               },
+              helperText: (
+                <FormHelperText sx={{ ml: 0 }} error aria-live="assertive">
+                  {!!formikInstance.errors.endDate &&
+                    t('filters.errors.data_a', { ns: 'notifiche' })}
+                </FormHelperText>
+              ),
             },
           }}
           disableFuture={true}

diff --git a/packages/pn-personagiuridica-webapp/src/pages/NuovaDelega.page.tsx b/packages/pn-personagiuridica-webapp/src/pages/NuovaDelega.page.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import * as yup from 'yup';
-
+import SearchIcon from '@mui/icons-material/Search';
 import PeopleIcon from '@mui/icons-material/People';
 import {
   Box,
@@ -413,6 +413,12 @@ const NuovaDelega = () => {
                                       label={entitySearchLabel(senderInputValue)}
                                       error={Boolean(getError(touched.enti, errors.enti))}
                                       helperText={getError(touched.enti, errors.enti)}
+                                      InputProps={{
+                                     ...params.InputProps,
+                                     endAdornment: (
+                                         <SearchIcon sx={{color:'text.secondary'}}/>
+                                         ),
+                                      }}    
                                     />
                                   )}
                                 />