@pagopa/io-app-design-system 1.40.0 → 1.41.0

package/src/components/radio/RadioButtonLabel.tsx

@@ -73,7 +73,11 @@ export const RadioButtonLabel = ({
           { alignItems: "flex-start", flexShrink: 1, width: "100%" }
         ]}
       >
-        <View pointerEvents="none">
+        <View
+          pointerEvents="none"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
           <AnimatedRadio checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />

package/src/components/tabs/TabItem.tsx

@@ -235,6 +235,7 @@ const TabItem = ({
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       accessibilityRole={"button"}
+      accessibilityState={{ selected }}
       testID={testID}
       onPress={onPress}
       onPressIn={onPressIn}

package/src/components/tag/Tag.tsx

@@ -12,33 +12,40 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 
-export type Tag = WithTestID<
+type VariantProps = {
+  iconColor: IOColors;
+  iconName: IOIcons;
+};
+
+type TextProps =
   | {
-      text?: string;
-      variant:
-        | "qrCode"
-        | "legalMessage"
-        | "info"
-        | "warning"
-        | "error"
-        | "success"
-        | "attachment"
-        | "noIcon";
+      text: string;
       iconAccessibilityLabel?: string;
-      customIconProps?: never;
     }
   | {
-      text?: string;
-      variant: "customIcon";
-      customIconProps: VariantProps;
-      iconAccessibilityLabel?: string;
-    }
->;
+      text?: never;
+      iconAccessibilityLabel: string;
+    };
 
-type VariantProps = {
-  iconColor: IOColors;
-  iconName: IOIcons;
-};
+export type Tag = TextProps &
+  WithTestID<
+    | {
+        variant:
+          | "qrCode"
+          | "legalMessage"
+          | "info"
+          | "warning"
+          | "error"
+          | "success"
+          | "attachment"
+          | "noIcon";
+        customIconProps?: never;
+      }
+    | {
+        variant: "customIcon";
+        customIconProps: VariantProps;
+      }
+  >;
 
 const IOTagIconMargin: IOSpacingScale = 6;
 const IOTagIconSize: IOIconSizeScale = 16;

package/src/components/textInput/TextInputBase.tsx

@@ -170,6 +170,11 @@ const HelperRow = ({
         },
         helperRowStyle
       ]}
+      // in case of error message the element should be ignored by VO or Talkback
+      accessibilityElementsHidden={bottomMessageColor === "error-600"}
+      importantForAccessibility={
+        bottomMessageColor === "error-600" ? "no-hide-descendants" : "auto"
+      }
     >
       {bottomMessage && (
         <LabelSmall weight="Regular" color={bottomMessageColor}>
@@ -350,6 +355,8 @@ export const TextInputBase = ({
         ]}
         accessible={false}
         accessibilityRole={"none"}
+        accessibilityElementsHidden
+        importantForAccessibility="no"
       >
         {/* Fake border managed with Animated.View to avoid
             little jumps when the border is animated */}
@@ -379,6 +386,8 @@ export const TextInputBase = ({
             ? derivedInputProps.textInputProps
             : textInputProps)}
           accessible
+          importantForAccessibility="yes"
+          accessibilityElementsHidden={false}
           editable={!disabled}
           secureTextEntry={isSecretInput}
           disableFullscreenUI={true}

package/src/components/textInput/TextInputValidation.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback, useMemo, useState } from "react";
-import { View } from "react-native";
+import { AccessibilityInfo, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOColors } from "../../core/IOColors";
 import {
@@ -16,7 +16,7 @@ type TextInputValidationProps = Omit<
   "rightElement" | "status" | "bottomMessageColor" | "isPassword"
 > & {
   onValidate: (value: string) => boolean;
-  errorMessage?: string;
+  errorMessage: string;
 };
 
 const feedbackIconSize: IOIconSizeScale = 24;
@@ -37,11 +37,14 @@ export const TextInputValidation = ({
     setIsValid(validation);
     if (!validation) {
       triggerHaptic("notificationError");
+      AccessibilityInfo.announceForAccessibilityWithOptions(errorMessage, {
+        queue: true
+      });
     } else {
       triggerHaptic("notificationSuccess");
     }
     onBlur?.();
-  }, [onValidate, value, onBlur]);
+  }, [onValidate, value, onBlur, errorMessage]);
 
   const onFocusHandler = useCallback(() => {
     setIsValid(undefined);

package/src/components/toast/ToastProvider.tsx

@@ -1,6 +1,11 @@
 import { throttle } from "lodash";
 import React from "react";
-import { SafeAreaView, StyleSheet, View } from "react-native";
+import {
+  AccessibilityInfo,
+  SafeAreaView,
+  StyleSheet,
+  View
+} from "react-native";
 import Animated, {
   Easing,
   SequencedTransition,
@@ -86,6 +91,10 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
       triggerHaptic(toast.hapticFeedback);
     }
 
+    AccessibilityInfo.announceForAccessibilityWithOptions(toast.message, {
+      queue: true
+    });
+
     return id;
   }, []);
 

package/src/components/typography/BaseTypography.tsx

@@ -49,6 +49,7 @@ export const BaseTypography = React.forwardRef<View, OwnProps>((props, ref) => {
       calculateTextStyle(props.color, props.weight, props.isItalic, props.font),
     [props.color, props.weight, props.isItalic, props.font]
   );
+
   const style = props.style
     ? [props.style, props.fontStyle, fontStyle]
     : [props.fontStyle, fontStyle];

package/src/components/typography/Label.tsx

@@ -16,7 +16,7 @@ import {
   lineHeightMapping
 } from "./common";
 
-type PartialAllowedColors = Extract<IOColors, "black" | "white">;
+type PartialAllowedColors = Extract<IOColors, "black" | "white" | "grey-700">;
 type AllowedColors = PartialAllowedColors | IOColorsStatusForeground;
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "Semibold">;
 type LabelProps = ExternalTypographyProps<