From 3151da23d79ec913180b74ec3446a47f8e73378d Mon Sep 17 00:00:00 2001
From: Alessandro <alessandro.izzo998@gmail.com>
Date: Tue, 18 Feb 2025 15:55:55 +0100
Subject: [PATCH] chore: [IOBP-1164] Add a11y description to the receipt PDF
 preview page (#6730)

## Short description
This PR adds a view wrapper with an accessibility label that describes
that there is displayed a pdf receipt in that screen.

## List of changes proposed in this pull request
- Added a11y description label to a view that wraps the Pdf preview.

## How to test
With a real device (particularly Android), open a receipt detail and go
inside the receipt preview screen.

## Preview
|Before|After|
|-|-|
|<video
src="https://github.com/user-attachments/assets/ace3349f-6ca4-45c8-9b65-37031f6204cc"
width="300" />|<video
src="https://github.com/user-attachments/assets/4c30ddf0-311b-4acf-830f-ad06a3db2641"
width="300" />|
---
 locales/en/index.yml                          |  2 +
 locales/it/index.yml                          |  2 +
 .../receipts/screens/ReceiptPreviewScreen.tsx | 42 +++++++++++--------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/locales/en/index.yml b/locales/en/index.yml
index 07201ba0bd7..ed462bc8f3f 100644
--- a/locales/en/index.yml
+++ b/locales/en/index.yml
@@ -3184,6 +3184,8 @@ features:
         failure: FALLITA
         success: ""
       receipt:
+        a11y:
+          preview: Receipt preview in PDF format
         loading: "We are hiding your receipt..."
         title: pagoPA Receipt
         shareButton: Save or share
diff --git a/locales/it/index.yml b/locales/it/index.yml
index 24651653994..7f8bea4787b 100644
--- a/locales/it/index.yml
+++ b/locales/it/index.yml
@@ -3184,6 +3184,8 @@ features:
         failure: FALLITA
         success: ""
       receipt:
+        a11y:
+          preview: Anteprima ricevuta in formato PDF
         loading: Stiamo nascondendo la ricevuta...
         title: Ricevuta pagoPA
         shareButton: Salva o condividi
diff --git a/ts/features/payments/receipts/screens/ReceiptPreviewScreen.tsx b/ts/features/payments/receipts/screens/ReceiptPreviewScreen.tsx
index 535608f9723..8af23016b6e 100644
--- a/ts/features/payments/receipts/screens/ReceiptPreviewScreen.tsx
+++ b/ts/features/payments/receipts/screens/ReceiptPreviewScreen.tsx
@@ -3,7 +3,11 @@ import * as pot from "@pagopa/ts-commons/lib/pot";
 import { Platform, View } from "react-native";
 import Share from "react-native-share";
 
-import { IOColors, IOStyles } from "@pagopa/io-app-design-system";
+import {
+  FooterActions,
+  IOColors,
+  IOStyles
+} from "@pagopa/io-app-design-system";
 import Pdf from "react-native-pdf";
 import { RouteProp } from "@react-navigation/native";
 import { PaymentsReceiptParamsList } from "../navigation/params";
@@ -13,10 +17,7 @@ import { OperationResultScreenContent } from "../../../../components/screens/Ope
 import I18n from "../../../../i18n";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import { RECEIPT_DOCUMENT_TYPE_PREFIX } from "../utils";
-import {
-  FooterActions,
-  FooterActionsMeasurements
-} from "../../../../components/ui/FooterActions";
+import { FooterActionsMeasurements } from "../../../../components/ui/FooterActions";
 import * as analytics from "../analytics";
 import { paymentAnalyticsDataSelector } from "../../history/store/selectors";
 
@@ -82,18 +83,25 @@ const ReceiptPreviewScreen = () => {
           paddingBottom: footerActionsMeasurements.safeBottomAreaHeight
         }}
       >
-        <Pdf
-          enablePaging
-          fitPolicy={0}
-          style={{
-            flexGrow: 1,
-            backgroundColor: IOColors["grey-100"]
-          }}
-          source={{
-            uri: `${RECEIPT_DOCUMENT_TYPE_PREFIX}${transactionReceiptPot.value.base64File}`,
-            cache: true
-          }}
-        />
+        <View
+          style={{ ...IOStyles.flex }}
+          accessibilityLabel={I18n.t(
+            "features.payments.transactions.receipt.a11y.preview"
+          )}
+        >
+          <Pdf
+            enablePaging
+            fitPolicy={0}
+            style={{
+              flexGrow: 1,
+              backgroundColor: IOColors["grey-100"]
+            }}
+            source={{
+              uri: `${RECEIPT_DOCUMENT_TYPE_PREFIX}${transactionReceiptPot.value.base64File}`,
+              cache: true
+            }}
+          />
+        </View>
         <FooterActions
           onMeasure={handleFooterActionsMeasurements}
           actions={{