MAIN - v2.12.0

CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.12.0](https://github.com/pagopa/pn-frontend/compare/v2.12.0-RC.1...v2.12.0) (2025-02-18)
+
+**Note:** Version bump only for package pn-frontend
+
+
+
+
+
+# [2.12.0-RC.1](https://github.com/pagopa/pn-frontend/compare/v2.12.0-RC.0...v2.12.0-RC.1) (2025-02-05)
+
+**Note:** Version bump only for package pn-frontend
+
+
+
+
+
+# [2.12.0-RC.0](https://github.com/pagopa/pn-frontend/compare/v2.11.1...v2.12.0-RC.0) (2025-02-04)
+
+
+### Bug Fixes
+
+* **pn-13210:** manage accessibility when closing modal ([#1451](https://github.com/pagopa/pn-frontend/issues/1451)) ([2b4981b](https://github.com/pagopa/pn-frontend/commit/2b4981bddc8f6651ac47bb2cf371f63e33962959))
+* **pn-13211:** Removed redirect when login fails ([#1445](https://github.com/pagopa/pn-frontend/issues/1445)) ([6ff0d2a](https://github.com/pagopa/pn-frontend/commit/6ff0d2aec98f161d5f23e7af49e41c31c7a7dcb7))
+* **pn-13213:** aria label for payments and statistics checkboxes ([#1450](https://github.com/pagopa/pn-frontend/issues/1450)) ([0d4d250](https://github.com/pagopa/pn-frontend/commit/0d4d25007aa3c2012c6bd3cba235cc32e8d65be1))
+* **pn-13214:** inactivity handler accessibility ([#1454](https://github.com/pagopa/pn-frontend/issues/1454)) ([7af07bd](https://github.com/pagopa/pn-frontend/commit/7af07bdc5861815ae484e0856d17f80ec3ac6096))
+* **pn-13216:** Added descriptions to radio buttons ([#1444](https://github.com/pagopa/pn-frontend/issues/1444)) ([9fb7b79](https://github.com/pagopa/pn-frontend/commit/9fb7b79a755c6850d9ec2ffbb62aff60ec88e7a1))
+* **pn-13255:** fixed aria attributes on the modal for revoking the delegation ([#1453](https://github.com/pagopa/pn-frontend/issues/1453)) ([cf2bfd9](https://github.com/pagopa/pn-frontend/commit/cf2bfd9844c412aa7f881a833c2fcaae01650355))
+* **pn-13591:** Handle Calendar for a11y ([#1448](https://github.com/pagopa/pn-frontend/issues/1448)) ([7be12df](https://github.com/pagopa/pn-frontend/commit/7be12dfb572f2eb50e3f857d78174410b1a181ac))
+* **pn-13593:** screen reader doesn't read api key value ([#1449](https://github.com/pagopa/pn-frontend/issues/1449)) ([7b11fb7](https://github.com/pagopa/pn-frontend/commit/7b11fb7ceb22d46bfd4dcea6bcbb6e1a2c3f85ae))
+* **pn-13596:** screen reader doesn't read notification status tooltip on mobile ([#1439](https://github.com/pagopa/pn-frontend/issues/1439)) ([b28f472](https://github.com/pagopa/pn-frontend/commit/b28f47258e5bd3cf4d9a2a3c95b86bfb42114ce8))
+* **pn-13598:** accessibility for the delegation tag group ([#1452](https://github.com/pagopa/pn-frontend/issues/1452)) ([a8626a2](https://github.com/pagopa/pn-frontend/commit/a8626a27ca23f9de030bc0b51d825d685bcee737))
+
+
+### Features
+
+* **pn-13215:** Screen reader doesn't read all the attachments in timeline ([#1442](https://github.com/pagopa/pn-frontend/issues/1442)) ([877bf49](https://github.com/pagopa/pn-frontend/commit/877bf49c486485f9e0ce6b04b6423a78824180e8))
+* **pn-13595:** removed automatic redirect before logout ([#1456](https://github.com/pagopa/pn-frontend/issues/1456)) ([c7d823f](https://github.com/pagopa/pn-frontend/commit/c7d823f72e9e64eeeccfcafebb0b05f4b188959c))
+
+
+
+
+
 ## [2.11.1](https://github.com/pagopa/pn-frontend/compare/v2.11.0...v2.11.1) (2025-01-31)
 
 **Note:** Version bump only for package pn-frontend

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.11.1",
+  "version": "2.12.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

packages/pn-commons/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.12.0](https://github.com/pagopa/pn-frontend/compare/v2.12.0-RC.1...v2.12.0) (2025-02-18)
+
+**Note:** Version bump only for package @pagopa-pn/pn-commons
+
+
+
+
+
+# [2.12.0-RC.1](https://github.com/pagopa/pn-frontend/compare/v2.12.0-RC.0...v2.12.0-RC.1) (2025-02-05)
+
+**Note:** Version bump only for package @pagopa-pn/pn-commons
+
+
+
+
+
+# [2.12.0-RC.0](https://github.com/pagopa/pn-frontend/compare/v2.11.1...v2.12.0-RC.0) (2025-02-04)
+
+
+### Bug Fixes
+
+* **pn-13210:** manage accessibility when closing modal ([#1451](https://github.com/pagopa/pn-frontend/issues/1451)) ([2b4981b](https://github.com/pagopa/pn-frontend/commit/2b4981bddc8f6651ac47bb2cf371f63e33962959))
+* **pn-13213:** aria label for payments and statistics checkboxes ([#1450](https://github.com/pagopa/pn-frontend/issues/1450)) ([0d4d250](https://github.com/pagopa/pn-frontend/commit/0d4d25007aa3c2012c6bd3cba235cc32e8d65be1))
+* **pn-13214:** inactivity handler accessibility ([#1454](https://github.com/pagopa/pn-frontend/issues/1454)) ([7af07bd](https://github.com/pagopa/pn-frontend/commit/7af07bdc5861815ae484e0856d17f80ec3ac6096))
+* **pn-13591:** Handle Calendar for a11y ([#1448](https://github.com/pagopa/pn-frontend/issues/1448)) ([7be12df](https://github.com/pagopa/pn-frontend/commit/7be12dfb572f2eb50e3f857d78174410b1a181ac))
+* **pn-13596:** screen reader doesn't read notification status tooltip on mobile ([#1439](https://github.com/pagopa/pn-frontend/issues/1439)) ([b28f472](https://github.com/pagopa/pn-frontend/commit/b28f47258e5bd3cf4d9a2a3c95b86bfb42114ce8))
+* **pn-13598:** accessibility for the delegation tag group ([#1452](https://github.com/pagopa/pn-frontend/issues/1452)) ([a8626a2](https://github.com/pagopa/pn-frontend/commit/a8626a27ca23f9de030bc0b51d825d685bcee737))
+
+
+### Features
+
+* **pn-13215:** Screen reader doesn't read all the attachments in timeline ([#1442](https://github.com/pagopa/pn-frontend/issues/1442)) ([877bf49](https://github.com/pagopa/pn-frontend/commit/877bf49c486485f9e0ce6b04b6423a78824180e8))
+
+
+
+
+
 ## [2.11.1](https://github.com/pagopa/pn-frontend/compare/v2.11.0...v2.11.1) (2025-01-31)
 
 **Note:** Version bump only for package @pagopa-pn/pn-commons

packages/pn-commons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa-pn/pn-commons",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "private": true,
   "main": "./src/index.ts",
   "dependencies": {
@@ -65,7 +65,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.3.1",
+    "@vitest/coverage-v8": "^1.6.1",
     "css-mediaquery": "^0.1.2",
     "eslint": "7.11.0",
     "eslint-config-prettier": "^8.10.0",
@@ -78,7 +78,7 @@
     "prettier": "^2.8.8",
     "sonarqube-scanner": "^3.3.0",
     "vite": "^5.1.4",
-    "vitest": "1.3.1",
+    "vitest": "^1.6.1",
     "vitest-sonar-reporter": "^2.0.0"
   }
 }

packages/pn-commons/src/components/CustomDatePicker.tsx

@@ -26,11 +26,12 @@ const CustomDatePicker = (
         slotProps={{
           ...props.slotProps,
           toolbar: { hidden: true },
-          actionBar: { actions: [] },
+          actionBar: { actions: ['cancel'] },
           layout: { className: 'PnDatePicker' }, // don't remove it! it is used for tests
         }}
         closeOnSelect
         localeText={{
+          cancelButtonLabel: getLocalizedOrDefaultLabel('common', 'button.close'),
           openPreviousView: getLocalizedOrDefaultLabel('common', 'date-picker.left-arrow'),
           openNextView: getLocalizedOrDefaultLabel('common', 'date-picker.right-arrow'),
           calendarViewSwitchingButtonAriaLabel: (view) =>
@@ -47,7 +48,6 @@ const CustomDatePicker = (
             return getLocalizedOrDefaultLabel('common', 'date-picker.select-date');
           },
         }}
-        data-testid="ciao"
       />
     </LocalizationProvider>
   );

packages/pn-commons/src/components/CustomMobileDialog/CustomMobileDialogContent.tsx

@@ -1,10 +1,11 @@
 import { ReactElement, ReactNode, Ref, forwardRef, useImperativeHandle } from 'react';
 
 import CloseIcon from '@mui/icons-material/Close';
-import { Dialog, DialogTitle, Grid, Slide, Typography } from '@mui/material';
+import { Dialog, DialogTitle, Grid, IconButton, Slide, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { TransitionProps } from '@mui/material/transitions';
 
+import { getLocalizedOrDefaultLabel } from '../../utility/localization.utility';
 import { useCustomMobileDialogContext } from './CustomMobileDialog.context';
 
 type Props = {
@@ -82,17 +83,19 @@ const CustomMobileDialogContent = forwardRef<{ toggleOpen: () => void }, Props>(
               </Typography>
             </Grid>
             <Grid item xs={6} textAlign="right">
-              <CloseIcon
+              <IconButton
+                edge="end"
                 onClick={handleClose}
-                sx={{
-                  position: 'relative',
-                  right: 0,
-                  top: 4,
-                  color: 'action.active',
-                  width: '32px',
-                  height: '32px',
-                }}
-              />
+                aria-label={getLocalizedOrDefaultLabel('common', 'button.close')}
+              >
+                <CloseIcon
+                  sx={{
+                    color: 'action.active',
+                    width: '32px',
+                    height: '32px',
+                  }}
+                />
+              </IconButton>
             </Grid>
           </Grid>
         </DialogTitle>

packages/pn-commons/src/components/CustomTagGroup/CustomTagGroup.tsx

@@ -21,9 +21,15 @@ const TagIndicator: React.FC<{
   arrayChildren: Array<JSX.Element>;
   visibleItems: number;
   dataTestId: string;
-}> = ({ boxProps, arrayChildren, visibleItems, dataTestId }) => (
-  <Box {...boxProps} sx={{ cursor: 'pointer', display: 'inline-block' }} data-testid={dataTestId}>
-    <Tag value={`+${arrayChildren.length - visibleItems}`} />
+  ariaLabel?: string;
+}> = ({ boxProps, arrayChildren, visibleItems, dataTestId, ariaLabel }) => (
+  <Box
+    {...boxProps}
+    sx={{ cursor: 'pointer', display: 'inline-block' }}
+    data-testid={dataTestId}
+    aria-label={ariaLabel || undefined}
+  >
+    <Tag value={`+${arrayChildren.length - visibleItems}`} aria-hidden={!!ariaLabel} />
   </Box>
 );
 
@@ -50,14 +56,18 @@ const CustomTagGroup: React.FC<CustomTagGroupProps> = ({
               onOpen={onOpen}
               tooltipContent={<>{arrayChildren.slice(visibleItems).map((c) => c)}</>}
             >
-              <div>
+              <Box sx={{ width: 'fit-content' }}>
                 <TagIndicator
-                  boxProps={{ role: 'button' }}
                   arrayChildren={arrayChildren}
                   visibleItems={visibleItems as number}
                   dataTestId="custom-tooltip-indicator"
+                  ariaLabel={arrayChildren
+                    .slice(visibleItems)
+                    .map((c) => c.props?.children?.props?.value) // <Box><Tag value={v}></Tag></Box>
+                    .filter(Boolean)
+                    .join(',')}
                 />
-              </div>
+              </Box>
             </CustomTooltip>
           )}
           {disableTooltip && (

packages/pn-commons/src/components/CustomTagGroup/__test__/CustomTagGroup.test.tsx

@@ -1,13 +1,18 @@
 import { vi } from 'vitest';
 
 import { Box } from '@mui/material';
+import { Tag } from '@pagopa/mui-italia';
 
 import { fireEvent, render, screen, waitFor } from '../../../test-utils';
 import CustomTagGroup from '../CustomTagGroup';
 
 describe('CustomTagGroup component', () => {
   const tagsArray = ['mock-tag-1', 'mock-tag-2', 'mock-tag-3', 'mock-tag-4'];
-  const tags = tagsArray.map((v, i) => <Box key={i}>{v}</Box>);
+  const tags = tagsArray.map((v, i) => (
+    <Box key={i}>
+      <Tag value={v}></Tag>
+    </Box>
+  ));
   const mockCallbackFn = vi.fn();
 
   beforeEach(() => {
@@ -57,4 +62,15 @@ describe('CustomTagGroup component', () => {
     expect(tooltip).not.toBeInTheDocument();
     expect(mockCallbackFn).toBeCalledTimes(0);
   });
+
+  it('renders component with limited 1 tags with aria-label', () => {
+    const { getByTestId } = render(
+      <CustomTagGroup visibleItems={2} disableTooltip={false}>
+        {tags}
+      </CustomTagGroup>
+    );
+    const tooltipIndicator = getByTestId('custom-tooltip-indicator');
+    expect(tooltipIndicator).toBeInTheDocument();
+    expect(tooltipIndicator).toHaveAttribute('aria-label', 'mock-tag-3,mock-tag-4');
+  });
 });

packages/pn-commons/src/components/CustomTooltip.tsx

@@ -1,14 +1,10 @@
 import { cloneElement, useState } from 'react';
 
-import { Box, SxProps } from '@mui/material';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-// ReactNode, cloneElement
 import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
 
 type Props = {
   tooltipContent: any;
   openOnClick: boolean;
-  sx?: SxProps;
   onOpen?: () => void;
   children: JSX.Element;
   tooltipProps?: Partial<TooltipProps>;
@@ -18,7 +14,6 @@ const CustomTooltip: React.FC<Props> = ({
   openOnClick,
   tooltipContent,
   children,
-  sx,
   onOpen,
   tooltipProps,
 }) => {
@@ -37,27 +32,23 @@ const CustomTooltip: React.FC<Props> = ({
   };
 
   return (
-    <ClickAwayListener onClickAway={handleTooltipClose}>
-      <Box sx={sx}>
-        <Tooltip
-          arrow
-          leaveTouchDelay={5000}
-          title={tooltipContent}
-          onClose={handleTooltipClose}
-          open={openOnClick ? open : undefined}
-          disableFocusListener={openOnClick}
-          disableHoverListener={openOnClick}
-          disableTouchListener={openOnClick}
-          enterTouchDelay={0}
-          onOpen={onOpen}
-          {...tooltipProps}
-        >
-          {openOnClick ? cloneElement(children, {
+    <Tooltip
+      arrow
+      leaveTouchDelay={5000}
+      title={tooltipContent}
+      onClose={handleTooltipClose}
+      open={openOnClick ? open : undefined}
+      disableHoverListener={openOnClick}
+      enterTouchDelay={0}
+      onOpen={onOpen}
+      {...tooltipProps}
+    >
+      {openOnClick
+        ? cloneElement(children, {
             onClick: handleTooltipOpen,
-          }) : children}
-        </Tooltip>
-      </Box>
-    </ClickAwayListener>
+          })
+        : children}
+    </Tooltip>
   );
 };
 

packages/pn-commons/src/components/Data/PnTable/PnTableHeaderCell.tsx

@@ -49,6 +49,13 @@ const PnTableHeaderCell = <T,>({
           direction={sort.orderBy === columnId ? sort.order : 'asc'}
           onClick={sortHandler(columnId)}
           data-testid={testId ? `${testId}.sort.${columnId.toString()}` : null}
+          sx={{
+            '&:focus-visible': {
+              borderRadius: '2px',
+              outlineOffset: '4px',
+              outline: '2px solid currentColor'
+            }
+          }}
         >
           {children}
           {sort.orderBy === columnId && (