fix: [IOBP-1156] a11y InputForm error message (#6703)

## Short description This pull request is adding the `ignoreAccessibilityCheck` prop to make the screen reader able to read `InputForm` error after closing the keyboard ## List of changes proposed in this pull request - Updated the `@pagopa/io-app-design-system` dependency from version `4.5.2` to `4.5.5` - Add `ignoreAccessibilityCheck` prop to `IOScrollViewWithLargeHeader` ## How to test - Using a real device 📱, start a payment workflow - Turn on the TalkBack accessibility tool - In `PAYMENT_CHECKOUT_INPUT_NOTICE_NUMBER` screen, insert a wrong value and press on ✔️ - Ensure that is reading the error - Check and ensure the same behavior in `PAYMENT_CHECKOUT_INPUT_FISCAL_CODE` screen --------- Co-authored-by: Alessandro <[email protected]>
pagopa · Feb 14, 2025 · a5d2865 · a5d2865
1 parent beb0e60
commit a5d2865
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@babel/plugin-transform-react-jsx": "^7.25.9",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "4.5.2",
+    "@pagopa/io-app-design-system": "4.5.5",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-cieid": "^0.3.5",
     "@pagopa/io-react-native-crypto": "^1.0.1",

diff --git a/ts/components/ui/IOScrollViewWithLargeHeader.tsx b/ts/components/ui/IOScrollViewWithLargeHeader.tsx
@@ -45,6 +45,9 @@ type Props = WithTestID<
     headerActionsProp?: HeaderActionsProps;
     canGoback?: boolean;
     excludeEndContentMargin?: boolean;
+    ignoreAccessibilityCheck?: ComponentProps<
+      typeof HeaderSecondLevel
+    >["ignoreAccessibilityCheck"];
   } & SupportRequestParams
 >;
 
@@ -69,7 +72,8 @@ export const IOScrollViewWithLargeHeader = forwardRef<View, Props>(
       includeContentMargins = false,
       headerActionsProp = {},
       excludeEndContentMargin,
-      testID
+      testID,
+      ignoreAccessibilityCheck = false
     },
     ref
   ) => {
@@ -93,6 +97,7 @@ export const IOScrollViewWithLargeHeader = forwardRef<View, Props>(
 
     const headerProps: ComponentProps<typeof HeaderSecondLevel> = {
       ignoreSafeAreaMargin,
+      ignoreAccessibilityCheck,
       ...useHeaderProps(
         canGoback
           ? {

diff --git a/...res/messages/components/Home/__tests__/__snapshots__/TabNavigationContainer.test.tsx.snap b/...res/messages/components/Home/__tests__/__snapshots__/TabNavigationContainer.test.tsx.snap
@@ -441,7 +441,7 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is ARCH
                                       false,
                                       {
                                         "backgroundColor": undefined,
-                                        "borderColor": "#BBC2D6",
+                                        "borderColor": undefined,
                                       },
                                       false,
                                       false,
@@ -524,7 +524,6 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is ARCH
                                   </RNSVGSvgView>
                                   <Text
                                     allowFontScaling={true}
-                                    dynamicTypeRamp="footnote"
                                     maxFontSizeMultiplier={1.5}
                                     style={
                                       [
@@ -535,7 +534,7 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is ARCH
                                           "fontSize": 14,
                                           "fontStyle": "normal",
                                           "fontWeight": "600",
-                                          "lineHeight": 21,
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
@@ -686,7 +685,6 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is ARCH
                                   </RNSVGSvgView>
                                   <Text
                                     allowFontScaling={true}
-                                    dynamicTypeRamp="footnote"
                                     maxFontSizeMultiplier={1.5}
                                     style={
                                       [
@@ -697,7 +695,7 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is ARCH
                                           "fontSize": 14,
                                           "fontStyle": "normal",
                                           "fontWeight": "600",
-                                          "lineHeight": 21,
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
@@ -1260,7 +1258,6 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is INBO
                                   </RNSVGSvgView>
                                   <Text
                                     allowFontScaling={true}
-                                    dynamicTypeRamp="footnote"
                                     maxFontSizeMultiplier={1.5}
                                     style={
                                       [
@@ -1271,7 +1268,7 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is INBO
                                           "fontSize": 14,
                                           "fontStyle": "normal",
                                           "fontWeight": "600",
-                                          "lineHeight": 21,
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }
@@ -1352,7 +1349,7 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is INBO
                                       false,
                                       {
                                         "backgroundColor": undefined,
-                                        "borderColor": "#BBC2D6",
+                                        "borderColor": undefined,
                                       },
                                       false,
                                       false,
@@ -1422,7 +1419,6 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is INBO
                                   </RNSVGSvgView>
                                   <Text
                                     allowFontScaling={true}
-                                    dynamicTypeRamp="footnote"
                                     maxFontSizeMultiplier={1.5}
                                     style={
                                       [
@@ -1433,7 +1429,7 @@ exports[`TabNavigationContainer should match snapshot when shownCategory is INBO
                                           "fontSize": 14,
                                           "fontStyle": "normal",
                                           "fontWeight": "600",
-                                          "lineHeight": 21,
+                                          "lineHeight": undefined,
                                         },
                                       ]
                                     }

diff --git a/ts/features/payments/checkout/screens/WalletPaymentInputFiscalCodeScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentInputFiscalCodeScreen.tsx
@@ -97,7 +97,9 @@ const WalletPaymentInputFiscalCodeScreen = () => {
           label: I18n.t("wallet.payment.manual.fiscalCode.title")
         }}
         description={I18n.t("wallet.payment.manual.fiscalCode.subtitle")}
+        ignoreAccessibilityCheck
         canGoback
+        headerActionsProp={{ showHelp: true }}
         contextualHelp={emptyContextualHelp}
         actions={
           Platform.OS === "android"

diff --git a/ts/features/payments/checkout/screens/WalletPaymentInputNoticeNumberScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentInputNoticeNumberScreen.tsx
@@ -69,6 +69,7 @@ const WalletPaymentInputNoticeNumberScreen = () => {
   return (
     <>
       <IOScrollViewWithLargeHeader
+        ignoreAccessibilityCheck
         title={{
           label: I18n.t("wallet.payment.manual.noticeNumber.title")
         }}

diff --git a/yarn.lock b/yarn.lock
@@ -3753,9 +3753,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pagopa/io-app-design-system@npm:4.5.2":
-  version: 4.5.2
-  resolution: "@pagopa/io-app-design-system@npm:4.5.2"
+"@pagopa/io-app-design-system@npm:4.5.5":
+  version: 4.5.5
+  resolution: "@pagopa/io-app-design-system@npm:4.5.5"
   dependencies:
     "@testing-library/jest-native": ^5.4.2
     "@types/react-test-renderer": ^18.0.0
@@ -3779,7 +3779,7 @@ __metadata:
     react-native-reanimated: "*"
     react-native-safe-area-context: "*"
     react-native-svg: "*"
-  checksum: fb7a07d7c4b714220ce5c54870ea9691989cf424f634ff4d7fc3ce4ecd66cdba6b211a86ce0854c6b1ec023027c835e23546f686e06938b78e742df0bfe5858e
+  checksum: 01519ebe0e72a572f1298e26d61d754d8126fae217f2b304a0873376b817f3124cac3d630efd6c6c1208f319363505760bb04d3784ff942ced6903815bf4d415
   languageName: node
   linkType: hard
 
@@ -13657,7 +13657,7 @@ __metadata:
     "@babel/runtime": ^7.20.0
     "@gorhom/bottom-sheet": ^4.1.5
     "@jambit/eslint-plugin-typed-redux-saga": ^0.4.0
-    "@pagopa/io-app-design-system": 4.5.2
+    "@pagopa/io-app-design-system": 4.5.5
     "@pagopa/io-pagopa-commons": ^3.1.0
     "@pagopa/io-react-native-cieid": ^0.3.5
     "@pagopa/io-react-native-crypto": ^1.0.1