chore: [IOBP-1190] Add a11y announcement inside the payment method details screen

locales/en/index.json

@@ -4072,6 +4072,9 @@
                 }
             },
             "details": {
+                "a11y": {
+                  "announce": "Payment method details"
+                },
                 "payPal": {
                     "banner": {
                         "title": "Do you want to pay in 3?",

locales/it/index.json

@@ -4072,6 +4072,9 @@
                 }
             },
             "details": {
+                "a11y": {
+                  "announce": "Dettaglio metodo di pagamento"
+                },
                 "payPal": {
                     "banner": {
                         "title": "Vuoi pagare in 3 rate?",

ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx

@@ -8,7 +8,13 @@ import {
 } from "@pagopa/io-app-design-system";
 
 import { PropsWithChildren, useState } from "react";
-import { ColorValue, LayoutChangeEvent, StyleSheet, View } from "react-native";
+import {
+  AccessibilityInfo,
+  ColorValue,
+  LayoutChangeEvent,
+  StyleSheet,
+  View
+} from "react-native";
 import Animated, {
   useAnimatedRef,
   useAnimatedScrollHandler,
@@ -21,6 +27,8 @@ import {
   PaymentCard,
   PaymentCardComponentProps
 } from "../../common/components/PaymentCard";
+import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
+import I18n from "../../../../i18n";
 
 type Props = {
   card: PaymentCardComponentProps;
@@ -54,6 +62,7 @@ const PaymentsMethodDetailsBaseScreenComponent = ({
       contentOffsetY: translationY,
       triggerOffset: titleHeight
     },
+    ignoreAccessibilityCheck: true,
     enableDiscreteTransition: true,
     animatedRef: animatedScrollViewRef
   });
@@ -70,6 +79,12 @@ const PaymentsMethodDetailsBaseScreenComponent = ({
     }
   };
 
+  useOnFirstRender(() => {
+    AccessibilityInfo.announceForAccessibility(
+      I18n.t("features.payments.details.a11y.announce")
+    );
+  });
+
   return (
     <Animated.ScrollView
       onScroll={scrollHandler}

ts/hooks/useHeaderSecondLevel.tsx

@@ -16,6 +16,7 @@ import { useStatusAlertProps } from "./useStatusAlertProps";
 
 type SpecificHookProps = {
   canGoBack?: boolean;
+  ignoreAccessibilityCheck?: boolean;
   /* On the surface, this prop seems useless, but it's used
   to programmatically hide the header.
   See PR#5795 for more details. */
@@ -104,6 +105,7 @@ export const useHeaderSecondLevel = ({
   variant,
   backgroundColor,
   enableDiscreteTransition,
+  ignoreAccessibilityCheck,
   animatedRef
 }: HeaderSecondLevelHookProps) => {
   const alertProps = useStatusAlertProps();
@@ -197,18 +199,20 @@ export const useHeaderSecondLevel = ({
   const headerComponentProps = useMemo(
     () => ({
       title,
+      ignoreAccessibilityCheck,
       ...graphicProps,
       ...backProps,
       ...helpProps
     }),
-    [title, graphicProps, backProps, helpProps]
+    [title, ignoreAccessibilityCheck, graphicProps, backProps, helpProps]
   ) as HeaderProps;
 
   useLayoutEffect(() => {
     navigation.setOptions({
       header: () => (
         <HeaderSecondLevel
           {...headerComponentProps}
+          ignoreAccessibilityCheck
           transparent={transparent}
         />
       ),