fix: [IOBP-458,IOBP-459] Added accessibility label to the RNavScreenW…

…ithLargeHeader component (#5467) ## Short description This PR adds the `accessibilityLabel` to the RNavScreenWithLargeHeader title and inside the new Transaction details screen has been added the role of the accessibility label ## List of changes proposed in this pull request - Added `accessibilityLabel` into `title` RNavScreenWithLargeHeader prop - Adapted the already used RNavScreenWithLargeHeader with the new title object prop ## How to test - Enable the DS flag - With the voiceover enabled, navigate to the new Transaction Screen details - You should be able to hear the "heading" role by the voiceover tapping on the header title ## Acknowledgment @dmnplb @thisisjp --------- Co-authored-by: Martino Cesari Tomba <[email protected]> Co-authored-by: Damiano Plebani <[email protected]>
pagopa · Feb 6, 2024 · a57d5e2 · a57d5e2
1 parent 63fd1c2
commit a57d5e2
Show file tree

Hide file tree

Showing 18 changed files with 72 additions and 26 deletions.
diff --git a/ts/components/ui/RNavScreenWithLargeHeader.tsx b/ts/components/ui/RNavScreenWithLargeHeader.tsx
@@ -22,11 +22,16 @@ import {
 import { SupportRequestParams } from "../../hooks/useStartSupportRequest";
 import I18n from "../../i18n";
 
+export type LargeHeaderTitleProps = {
+  label: string;
+  accessibilityLabel?: string;
+  testID?: string;
+};
+
 type Props = {
   children: React.ReactNode;
   fixedBottomSlot?: React.ReactNode;
-  title: string;
-  titleTestID?: string;
+  title: LargeHeaderTitleProps;
   description?: string;
   goBack?: BackProps["goBack"];
   headerActionsProp?: HeaderActionProps;
@@ -49,7 +54,6 @@ export const RNavScreenWithLargeHeader = ({
   children,
   fixedBottomSlot,
   title,
-  titleTestID,
   goBack,
   description,
   contextualHelp,
@@ -75,7 +79,7 @@ export const RNavScreenWithLargeHeader = ({
   const headerProps: ComponentProps<typeof HeaderSecondLevel> = useHeaderProps({
     backAccessibilityLabel: I18n.t("global.buttons.back"),
     goBack: goBack ?? navigation.goBack,
-    title,
+    title: title.label,
     scrollValues: {
       contentOffsetY: translationY,
       triggerOffset: titleHeight
@@ -109,7 +113,13 @@ export const RNavScreenWithLargeHeader = ({
           style={IOStyles.horizontalContentPadding}
           onLayout={getTitleHeight}
         >
-          <H2 testID={titleTestID}>{title}</H2>
+          <H2
+            testID={title.testID}
+            accessibilityLabel={title.accessibilityLabel ?? title.label}
+            accessibilityRole="header"
+          >
+            {title.label}
+          </H2>
         </View>
 
         {description && (

diff --git a/ts/features/design-system/core/DSHeaderSecondLevel.tsx b/ts/features/design-system/core/DSHeaderSecondLevel.tsx
@@ -3,7 +3,11 @@ import { Body, VSpacer } from "@pagopa/io-app-design-system";
 import { RNavScreenWithLargeHeader } from "../../../components/ui/RNavScreenWithLargeHeader";
 
 export const DSHeaderSecondLevel = () => (
-  <RNavScreenWithLargeHeader title="Questo è un titolo lungo, ma lungo lungo davvero, eh!">
+  <RNavScreenWithLargeHeader
+    title={{
+      label: "Questo è un titolo lungo, ma lungo lungo davvero, eh!"
+    }}
+  >
     <VSpacer />
     {[...Array(50)].map((_el, i) => (
       <Body key={`body-${i}`}>Repeated text</Body>

diff --git a/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx b/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx
@@ -130,9 +130,11 @@ export const IdPayOperationsListScreen = () => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t(
-        "idpay.initiative.details.initiativeDetailsScreen.configured.operationsList.title"
-      )}
+      title={{
+        label: I18n.t(
+          "idpay.initiative.details.initiativeDetailsScreen.configured.operationsList.title"
+        )
+      }}
     >
       <ContentWrapper>
         <VSpacer size={8} />

diff --git a/ts/features/walletV3/transaction/screens/WalletTransactionDetailsScreen.tsx b/ts/features/walletV3/transaction/screens/WalletTransactionDetailsScreen.tsx
@@ -76,7 +76,9 @@ const WalletTransactionDetailsScreen = () => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("transaction.details.title")}
+      title={{
+        label: I18n.t("transaction.details.title")
+      }}
       contextualHelp={emptyContextualHelp}
       faqCategories={["wallet_transaction"]}
       headerActionsProp={{ showHelp: true }}

diff --git a/ts/features/walletV3/transaction/screens/WalletTransactionOperationDetails.tsx b/ts/features/walletV3/transaction/screens/WalletTransactionOperationDetails.tsx
@@ -58,7 +58,9 @@ const WalletTransactionOperationDetailsScreen = () => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={cleanTransactionDescription(operationName)}
+      title={{
+        label: cleanTransactionDescription(operationName)
+      }}
     >
       <ScrollView style={styles.scrollViewContainer}>
         {operationDetails.importo && (

diff --git a/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx b/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx
@@ -115,7 +115,9 @@ const OnboardingServicesPreferenceScreen = (
   const showBadge = !isFirstOnboarding;
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("services.optIn.preferences.title")}
+      title={{
+        label: I18n.t("services.optIn.preferences.title")
+      }}
       description={I18n.t("services.optIn.preferences.body")}
       headerActionsProp={{ showHelp: true }}
       contextualHelp={emptyContextualHelp}

diff --git a/ts/screens/onboarding/OnboardingShareDataScreen.tsx b/ts/screens/onboarding/OnboardingShareDataScreen.tsx
@@ -71,8 +71,10 @@ const OnboardingShareDataScreen = (props: Props): React.ReactElement => {
   return (
     <RNavScreenWithLargeHeader
       goBack={handleGoBack}
-      title={I18n.t("profile.main.privacy.shareData.screen.title")}
-      titleTestID={"share-data-component-title"}
+      title={{
+        label: I18n.t("profile.main.privacy.shareData.screen.title"),
+        testID: "share-data-component-title"
+      }}
       description={I18n.t("profile.main.privacy.shareData.screen.description")}
       fixedBottomSlot={
         <SafeAreaView>

diff --git a/ts/screens/profile/CalendarsPreferencesScreen.tsx b/ts/screens/profile/CalendarsPreferencesScreen.tsx
@@ -51,7 +51,9 @@ class CalendarsPreferencesScreen extends React.PureComponent<Props, State> {
     const { isLoading } = this.state;
     return (
       <RNavScreenWithLargeHeader
-        title={I18n.t("profile.preferences.list.preferred_calendar.title")}
+        title={{
+          label: I18n.t("profile.preferences.list.preferred_calendar.title")
+        }}
         description={I18n.t("messages.cta.reminderCalendarSelect")}
         contextualHelpMarkdown={contextualHelpMarkdown}
         headerActionsProp={{ showHelp: true }}

diff --git a/ts/screens/profile/LanguagesPreferencesScreen.tsx b/ts/screens/profile/LanguagesPreferencesScreen.tsx
@@ -122,7 +122,9 @@ class LanguagesPreferencesScreen extends React.PureComponent<Props, State> {
   public render() {
     const ContainerComponent = withLoadingSpinner(() => (
       <RNavScreenWithLargeHeader
-        title={I18n.t("profile.preferences.list.preferred_language.title")}
+        title={{
+          label: I18n.t("profile.preferences.list.preferred_language.title")
+        }}
         description={I18n.t(
           "profile.preferences.list.preferred_language.subtitle"
         )}

diff --git a/ts/screens/profile/NotificationsPreferencesScreen.tsx b/ts/screens/profile/NotificationsPreferencesScreen.tsx
@@ -60,7 +60,9 @@ export const NotificationsPreferencesScreen = () => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.preferences.notifications.header")}
+      title={{
+        label: I18n.t("profile.preferences.notifications.header")
+      }}
       description={I18n.t("profile.preferences.notifications.subtitle")}
       contextualHelpMarkdown={contextualHelpMarkdown}
       headerActionsProp={{ showHelp: true }}

diff --git a/ts/screens/profile/PreferencesScreen.tsx b/ts/screens/profile/PreferencesScreen.tsx
@@ -243,7 +243,9 @@ class PreferencesScreen extends React.Component<Props> {
 
     return (
       <RNavScreenWithLargeHeader
-        title={I18n.t("profile.preferences.title")}
+        title={{
+          label: I18n.t("profile.preferences.title")
+        }}
         description={I18n.t("profile.preferences.subtitle")}
         contextualHelpMarkdown={contextualHelpMarkdown}
         headerActionsProp={{ showHelp: true }}

diff --git a/ts/screens/profile/PrivacyMainScreen.tsx b/ts/screens/profile/PrivacyMainScreen.tsx
@@ -262,7 +262,9 @@ const PrivacyMainScreen = ({ navigation }: Props) => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.main.privacy.title")}
+      title={{
+        label: I18n.t("profile.main.privacy.title")
+      }}
       description={I18n.t("profile.main.privacy.subtitle")}
       headerActionsProp={{ showHelp: true }}
     >

diff --git a/ts/screens/profile/ProfileAboutApp.tsx b/ts/screens/profile/ProfileAboutApp.tsx
@@ -6,7 +6,9 @@ import I18n from "../../i18n";
 
 const ProfileAboutApp = () => (
   <RNavScreenWithLargeHeader
-    title={I18n.t("profile.main.appInfo.title")}
+    title={{
+      label: I18n.t("profile.main.appInfo.title")
+    }}
     headerActionsProp={{ showHelp: false }}
   >
     <ContentWrapper>

diff --git a/ts/screens/profile/ProfileDataScreen.tsx b/ts/screens/profile/ProfileDataScreen.tsx
@@ -51,7 +51,9 @@ const ProfileDataScreen: React.FC<Props> = ({
   };
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.data.title")}
+      title={{
+        label: I18n.t("profile.data.title")
+      }}
       description={I18n.t("profile.data.subtitle")}
       headerActionsProp={{ showHelp: true }}
       contextualHelpMarkdown={contextualHelpMarkdown}

diff --git a/ts/screens/profile/RemoveAccountInfoScreen.tsx b/ts/screens/profile/RemoveAccountInfoScreen.tsx
@@ -36,7 +36,9 @@ const RemoveAccountInfo: React.FunctionComponent<Props> = props => {
   );
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.main.privacy.removeAccount.title")}
+      title={{
+        label: I18n.t("profile.main.privacy.removeAccount.title")
+      }}
       fixedBottomSlot={footerComponent}
     >
       <ContentWrapper>

diff --git a/ts/screens/profile/SecurityScreen.tsx b/ts/screens/profile/SecurityScreen.tsx
@@ -122,7 +122,9 @@ const SecurityScreen = (): React.ReactElement => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.security.title")}
+      title={{
+        label: I18n.t("profile.security.title")
+      }}
       description={I18n.t("profile.security.subtitle")}
       headerActionsProp={{ showHelp: true }}
       contextualHelpMarkdown={contextualHelpMarkdown}

diff --git a/ts/screens/profile/ServicesPreferenceScreen.tsx b/ts/screens/profile/ServicesPreferenceScreen.tsx
@@ -70,7 +70,9 @@ const ServicesPreferenceScreen = (props: Props): React.ReactElement => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("services.optIn.preferences.title")}
+      title={{
+        label: I18n.t("services.optIn.preferences.title")
+      }}
       description={I18n.t("services.optIn.preferences.body")}
       headerActionsProp={{ showHelp: true }}
     >

diff --git a/ts/screens/profile/ShareDataScreen.tsx b/ts/screens/profile/ShareDataScreen.tsx
@@ -77,8 +77,10 @@ const ShareDataScreen = (props: Props): React.ReactElement => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.main.privacy.shareData.screen.title")}
-      titleTestID={"share-data-component-title"}
+      title={{
+        label: I18n.t("profile.main.privacy.shareData.screen.title"),
+        testID: "share-data-component-title"
+      }}
       description={I18n.t("profile.main.privacy.shareData.screen.description")}
       fixedBottomSlot={
         <FooterWithButtons type="SingleButton" primary={buttonProps} />