chore: [IOBP-1164] Add a11y description to the receipt PDF preview pa…

…ge (#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" />|
pagopa · Feb 18, 2025 · 3151da2 · 3151da2
1 parent f2db628
commit 3151da2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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={{