diff --git a/locales/en/index.json b/locales/en/index.json index 212fb5e3504..e8ad4ee3e74 100644 --- a/locales/en/index.json +++ b/locales/en/index.json @@ -4072,6 +4072,9 @@ } }, "details": { + "a11y": { + "announce": "Payment method details" + }, "payPal": { "banner": { "title": "Do you want to pay in 3?", diff --git a/locales/it/index.json b/locales/it/index.json index 1ad0a0a026f..90d0a5c268c 100644 --- a/locales/it/index.json +++ b/locales/it/index.json @@ -4072,6 +4072,9 @@ } }, "details": { + "a11y": { + "announce": "Dettaglio metodo di pagamento" + }, "payPal": { "banner": { "title": "Vuoi pagare in 3 rate?", diff --git a/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx b/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx index 235560b0232..1f6e44cf286 100644 --- a/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx +++ b/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 ( { const alertProps = useStatusAlertProps(); @@ -197,11 +199,12 @@ export const useHeaderSecondLevel = ({ const headerComponentProps = useMemo( () => ({ title, + ignoreAccessibilityCheck, ...graphicProps, ...backProps, ...helpProps }), - [title, graphicProps, backProps, helpProps] + [title, ignoreAccessibilityCheck, graphicProps, backProps, helpProps] ) as HeaderProps; useLayoutEffect(() => { @@ -209,6 +212,7 @@ export const useHeaderSecondLevel = ({ header: () => ( ),