[SELC-7418] feat: update selfcare-common-frontend to version 1.34.65 and improve accessibility features in user filters

.github/workflows/code_review.yaml

@@ -5,7 +5,7 @@
   pull_request:
     types: [opened, synchronize]
     paths:
-      - "*"
+      - "**/*"
       - "!infra/*"
       - "!.github/*"
 
@@ -14,33 +14,33 @@
 
 jobs:
   code_review:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
 
     steps:
       - name: Check-out code
         uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Setup Node.js
         uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           node-version-file: ".node-version"
           cache: "yarn"
 
       - name: Install dependencies
         run: yarn install --immutable
 
       - name: Build
         run: yarn build
 
       - name: Lint
         run: yarn lint
 
       # Check where find DANGER_GITHUB_API_TOKEN secret
       - name: Danger CI
         if: ${{ env.DANGER_GITHUB_API_TOKEN != '' }}
         run: yarn danger ci
         shell: bash
         env:
           DANGER_GITHUB_API_TOKEN: ${{ env.DANGER_GITHUB_API_TOKEN }}
 
       - name: Unit tests exec

package.json

@@ -9,7 +9,7 @@
     "@mui/x-data-grid": "^5.0.1",
     "@mui/x-data-grid-generator": "^5.0.1",
     "@pagopa/mui-italia": "^1.6.1",
-    "@pagopa/selfcare-common-frontend": "^1.34.63",
+    "@pagopa/selfcare-common-frontend": "^1.34.65",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-router-dom": "^5.1.8",

src/locale/it.ts

@@ -1,4 +1,8 @@
 export default {
+  accessibility: {
+    filterUsers: 'Filtri applicati. Risultati aggiornati.',
+    removeFilters: 'Filtri rimossi. Tutti i risultati sono visibili.',
+  },
   session: {
     expired: {
       title: 'Sessione scaduta',
@@ -248,7 +252,8 @@ export default {
         backHome: 'Torna alla home',
         moreInformationOnRoles: 'Più informazioni sui ruoli',
         requiredError: 'Campo obbligatorio',
-        duplicateTaxCodeDifferentEmail: 'L’indirizzo email inserito è diverso da quello comunicato in precedenza'
+        duplicateTaxCodeDifferentEmail:
+          'L’indirizzo email inserito è diverso da quello comunicato in precedenza',
       },
       backButton: 'Indietro',
       continueButton: 'Continua',

src/pages/dashboardUsers/components/MobileFilter.tsx

@@ -118,7 +118,7 @@ export default function MobileFilter({
   setSearchByName,
   disableRemoveFiltersButton,
   setDisableRemoveFiltersButton,
-}: Props) {
+}: Readonly<Props>) {
   const { t } = useTranslation();
   const isMobile = useIsMobile('md');
 

src/pages/dashboardUsers/components/UsersTableActions/UsersTableActions.tsx

@@ -34,7 +34,7 @@ export default function UsersTableActions({
   setSearchByName,
   disableRemoveFiltersButton,
   setDisableRemoveFiltersButton,
-}: UsersSearchProps) {
+}: Readonly<UsersSearchProps>) {
   return (
     <UsersTableFilters
       selectedProduct={selectedProduct}

src/pages/dashboardUsers/components/UsersTableActions/UsersTableFilters.tsx

@@ -36,7 +36,7 @@ export default function UsersTableFilters({
   setSearchByName,
   disableRemoveFiltersButton,
   setDisableRemoveFiltersButton,
-}: UsersSearchFilterProps) {
+}: Readonly<UsersSearchFilterProps>) {
   const productRolesList: Array<ProductRole> = Object.values(productsRolesMap).flatMap(
     (p) => p.list
   );

src/pages/dashboardUsers/components/UsersTableActions/UsersTableRolesFilter.tsx

@@ -3,8 +3,9 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/system';
 import { ButtonNaked } from '@pagopa/mui-italia';
+import { useLiveAnnouncerWithRegion } from '@pagopa/selfcare-common-frontend/lib';
 import { isEqual } from 'lodash';
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '../../../../hooks/useIsMobile';
 import { UserRole, UserRoleFilters } from '../../../../model/Party';
@@ -53,7 +54,7 @@ export default function UsersTableRolesFilter({
   setSearchByName,
   disableRemoveFiltersButton,
   setDisableRemoveFiltersButton,
-}: Props) {
+}: Readonly<Props>) {
   const { t } = useTranslation();
   // const theme = useTheme();
   const isMobile = useIsMobile('md');
@@ -62,10 +63,12 @@ export default function UsersTableRolesFilter({
   const productFiltered = useMemo(() => productList(productRolesSelected), [productRolesSelected]);
   const selcGroups = Object.keys(selcRoleGroup) as Array<UserRoleFilters>;
 
-  const [productRoleCheckedBySelcRole, setProductRoleCheckedBySelcRole] = React.useState<{
+  const [productRoleCheckedBySelcRole, setProductRoleCheckedBySelcRole] = useState<{
     [selcRole in UserRoleFilters]: ProductRolesGroupByTitle;
   }>(emptySelcRoleGroup);
 
+  const { announce, LiveRegion } = useLiveAnnouncerWithRegion();
+
   const nextProductRolesFilter = useMemo(
     () =>
       Object.values(productRoleCheckedBySelcRole)
@@ -178,6 +181,23 @@ export default function UsersTableRolesFilter({
     [selcRoleGroup, productRoleCheckedBySelcRole]
   );
 
+  const handleSubmit = () => {
+    onFiltersChange({
+      ...filters,
+      productIds: nextProductRolesFilter.map((f) => f.productId),
+      productRoles: nextProductRolesFilter,
+    });
+    setDisableRemoveFiltersButton(false);
+    announce(t('accessibility.filterUsers'));
+  };
+
+  const handleResetFilters = () => {
+    onFiltersChange({ ...filters, productIds: [], productRoles: [] });
+    setSearchByName('');
+    setDisableRemoveFiltersButton(true);
+    announce(t('accessibility.removeFilters'));
+  };
+
   return (
     <Grid
       container
@@ -187,6 +207,7 @@ export default function UsersTableRolesFilter({
       mt={isMobile ? 0 : 5}
       flexDirection={isMobile ? 'column' : 'row'}
     >
+      {LiveRegion}
       <Grid item xs={12} md={5} width="100%">
         <TextField
           fullWidth
@@ -307,14 +328,7 @@ export default function UsersTableRolesFilter({
           type="submit"
           size="small"
           fullWidth
-          onClick={() => {
-            onFiltersChange({
-              ...filters,
-              productIds: nextProductRolesFilter.map((f) => f.productId),
-              productRoles: nextProductRolesFilter,
-            });
-            setDisableRemoveFiltersButton(false);
-          }}
+          onClick={handleSubmit}
         >
           {t('usersTable.filterRole.addFilters')}
         </Button>
@@ -325,11 +339,7 @@ export default function UsersTableRolesFilter({
           color="primary"
           fullWidth
           size="small"
-          onClick={() => {
-            onFiltersChange({ ...filters, productIds: [], productRoles: [] });
-            setSearchByName('');
-            setDisableRemoveFiltersButton(true);
-          }}
+          onClick={handleResetFilters}
         >
           {t('usersTable.filterRole.deleteFilters')}
         </ButtonNaked>

yarn.lock

@@ -2197,10 +2197,10 @@
     write-yaml-file "^4.1.3"
     yargs "^15.0.1"
 
-"@pagopa/selfcare-common-frontend@^1.34.63":
-  version "1.34.63"
-  resolved "https://registry.npmjs.org/@pagopa/selfcare-common-frontend/-/selfcare-common-frontend-1.34.63.tgz#3743bb4d7d7d5f7986de5549ab6d4fbf82180cc6"
-  integrity sha512-Nr62403YhM1VFJgIAs/I341NiRFq6iBjm3Yvza5TLTj+bnO2hY0uSHEZqUD4PVifYBbY6dj61P8GIcilG4qkew==
+"@pagopa/selfcare-common-frontend@^1.34.65":
+  version "1.34.65"
+  resolved "https://registry.yarnpkg.com/@pagopa/selfcare-common-frontend/-/selfcare-common-frontend-1.34.65.tgz#4ee87222921b0a4c6b031d8ca9270bb14636bc2f"
+  integrity sha512-ChEFLWDAZcVf8ttgkh35yX8Mn0mwR5tDWWdoPl1Nu5KDCDKrtO8Al+AogrzEKijA9qmVMO4sR5LaOtEiieMD2Q==
   dependencies:
     "@emotion/react" "^11.11.1"
     "@emotion/styled" "^11.11.0"