[SELC-7243] feat: added hook useFocus to handle focus for accessibility

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.60",
+    "@pagopa/selfcare-common-frontend": "^1.34.63",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-router-dom": "^5.1.8",

src/pages/dashboardUserDetail/userDetailPage/UserDetailPage.tsx

@@ -1,13 +1,14 @@
-import { Button, Grid, Stack, Typography } from '@mui/material';
+import {Button, Grid, Stack, Typography } from '@mui/material';
 import { theme } from '@pagopa/mui-italia';
 import { usePermissions } from '@pagopa/selfcare-common-frontend/lib';
 import useErrorDispatcher from '@pagopa/selfcare-common-frontend/lib/hooks/useErrorDispatcher';
 import useLoading from '@pagopa/selfcare-common-frontend/lib/hooks/useLoading';
 import useUserNotify from '@pagopa/selfcare-common-frontend/lib/hooks/useUserNotify';
+import { useFocus } from '@pagopa/selfcare-common-frontend/lib/hooks/useFocus';
 import { trackEvent } from '@pagopa/selfcare-common-frontend/lib/services/analyticsService';
 import { Actions } from '@pagopa/selfcare-common-frontend/lib/utils/constants';
 import { resolvePathVariables } from '@pagopa/selfcare-common-frontend/lib/utils/routes-utils';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import ProductNavigationBar from '../../../components/ProductNavigationBar';
@@ -48,6 +49,9 @@ function UserDetailPage({
   const addNotify = useUserNotify();
   const { getAllProductsWithPermission } = usePermissions();
   const canEditUser = getAllProductsWithPermission(Actions.ManageProductUsers).length > 0;
+  const titleRef = useRef<HTMLDivElement>(null);
+
+  useFocus(titleRef, partyUser);
 
   const isPnpg = !!activeProducts.find((p) => p.id === 'prod-pn-pg');
 
@@ -159,7 +163,19 @@ function UserDetailPage({
           />
         </Grid>
         <Grid container item mb={4} xs={12}>
-          <Grid item xs={10}>
+          <Grid
+            item
+            xs={10}
+            ref={titleRef}
+            tabIndex={-1}
+            role="text"
+            aria-readonly="true"
+            aria-live="polite"
+            aria-atomic="true"
+            sx={{
+              outline: 'none',
+            }}
+          >
             <Typography
               variant="h4"
               sx={{

yarn.lock

@@ -2197,10 +2197,10 @@
     write-yaml-file "^4.1.3"
     yargs "^15.0.1"
 
-"@pagopa/selfcare-common-frontend@^1.34.60":
-  version "1.34.60"
-  resolved "https://registry.yarnpkg.com/@pagopa/selfcare-common-frontend/-/selfcare-common-frontend-1.34.60.tgz#e7afde82f2a8fd038e23e2952a81560414b3d73b"
-  integrity sha512-ykY4LGUGIL6fph9ym2QsUDjAbU9+SygxQUap8C9ONzdTBRQd4SCpf42nOSHKjqRYkdg+UbC9h9U4VlUbHKoCBQ==
+"@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==
   dependencies:
     "@emotion/react" "^11.11.1"
     "@emotion/styled" "^11.11.0"