@pagopa/io-app-design-system 5.1.2 → 5.1.4

package/src/components/buttons/ButtonLink.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 import {
+  AccessibilityRole,
   GestureResponderEvent,
   Pressable,
   TextStyle,
@@ -44,6 +45,7 @@ export type ButtonLinkProps = WithTestID<{
   iconPosition?: "start" | "end";
   // Accessibility
   accessibilityLabel?: string;
+  accessibilityRole?: Extract<AccessibilityRole, "button" | "link">;
   accessibilityHint?: string;
   numberOfLines?: number;
   textAlign?: TextStyle["textAlign"];
@@ -72,6 +74,7 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
       iconPosition = "start",
       onPress,
       accessibilityLabel,
+      accessibilityRole = "button",
       accessibilityHint,
       numberOfLines = 1,
       textAlign = "auto",
@@ -151,7 +154,7 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
         ref={ref}
         accessibilityLabel={accessibilityLabel || label}
         accessibilityHint={accessibilityHint}
-        accessibilityRole={"button"}
+        accessibilityRole={accessibilityRole}
         accessibilityState={{ disabled }}
         testID={testID}
         onPress={onPress}

package/src/components/featureInfo/FeatureInfo.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { GestureResponderEvent } from "react-native";
+import { AccessibilityRole, GestureResponderEvent } from "react-native";
 import {
   BodySmall,
   HStack,
@@ -23,6 +23,7 @@ type FeatureInfoActionProps =
       action: {
         label: string;
         onPress: (event: GestureResponderEvent) => void;
+        accessibilityRole?: Extract<AccessibilityRole, "button" | "link">;
       };
     }
   | {
@@ -56,6 +57,10 @@ export const FeatureInfo = ({
 }: FeatureInfoProps) => {
   const theme = useIOTheme();
 
+  /* Already defined in the `BodySmall` component as a fallback value,
+  but I keep it here to avoid possible future inconsistencies. */
+  const accessibilityRole = action?.accessibilityRole ?? "link";
+
   return (
     <HStack style={{ alignItems: "center" }} space={24}>
       {iconName && (
@@ -83,6 +88,7 @@ export const FeatureInfo = ({
             accessible
             importantForAccessibility={"yes"}
             accessibilityElementsHidden={false}
+            accessibilityRole={accessibilityRole}
           >
             {action.label}
           </BodySmall>

package/src/components/layout/HeaderFirstLevel.tsx

@@ -77,7 +77,8 @@ export const HeaderFirstLevel = ({
     if (reactNode !== null) {
       AccessibilityInfo.setAccessibilityFocus(reactNode);
     }
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   /* We show the divider only when the header is scrolled down */
   const offset = useScrollViewOffset(

package/src/components/layout/HeaderSecondLevel.tsx

@@ -212,7 +212,8 @@ export const HeaderSecondLevel = ({
         AccessibilityInfo.setAccessibilityFocus(reactNode);
       }
     }
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const bgColorDiscreteTransition = useDerivedValue(() =>
     withSpring(scrollOffset.value > 0 ? 1 : 0, IOSpringValues.header)

package/src/components/layout/ModalBSHeader.tsx

@@ -47,7 +47,8 @@ export const ModalBSHeader = ({
     if (reactNode !== null) {
       AccessibilityInfo.setAccessibilityFocus(reactNode);
     }
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <View style={styles.container} ref={headerRef}>

package/src/components/listitems/ListItemRadio.tsx

@@ -31,11 +31,13 @@ type ListItemRadioLoadingProps =
       state: true;
       skeletonDescription?: boolean;
       skeletonIcon?: boolean;
+      loadingAccessibilityLabel?: string;
     }
   | {
       state?: false;
       skeletonDescription?: never;
       skeletonIcon?: never;
+      loadingAccessibilityLabel?: never;
     };
 
 type Props = WithTestID<{
@@ -122,8 +124,15 @@ export const ListItemRadio = ({
     </View>
   );
 
-  const SkeletonComponent = () => (
-    <View style={[IOSelectionListItemStyles.listItem, { rowGap: 8 }]}>
+  const ListItemRadioSkeleton = ({
+    loadingAccessibilityLabel
+  }: Pick<ListItemRadioLoadingProps, "loadingAccessibilityLabel">) => (
+    <View
+      style={[IOSelectionListItemStyles.listItem, { rowGap: 8 }]}
+      accessible={true}
+      accessibilityLabel={loadingAccessibilityLabel}
+      accessibilityState={{ busy: true }}
+    >
       <View style={IOSelectionListItemStyles.listItemInner}>
         <View
           style={[
@@ -155,7 +164,9 @@ export const ListItemRadio = ({
   );
 
   return loadingProps?.state ? (
-    <SkeletonComponent />
+    <ListItemRadioSkeleton
+      loadingAccessibilityLabel={loadingProps?.loadingAccessibilityLabel}
+    />
   ) : (
     <Pressable
       accessibilityRole="radio"

package/src/components/listitems/ListItemTransaction.tsx

@@ -41,6 +41,7 @@ export type ListItemTransaction = WithTestID<
   PressableBaseProps & {
     showChevron?: boolean;
     isLoading?: boolean;
+    loadingAccessibilityLabel?: string;
     /**
      * A logo that will be displayed on the left of the list item.
      *
@@ -102,6 +103,7 @@ const StartComponent = ({
 
 export const ListItemTransaction = ({
   accessibilityLabel,
+  loadingAccessibilityLabel,
   showChevron = false,
   isLoading = false,
   paymentLogoIcon,
@@ -116,7 +118,11 @@ export const ListItemTransaction = ({
   const theme = useIOTheme();
 
   if (isLoading) {
-    return <SkeletonComponent />;
+    return (
+      <ListItemTransactionSkeleton
+        loadingAccessibilityLabel={loadingAccessibilityLabel}
+      />
+    );
   }
 
   const interactiveColor: IOColors = theme["interactiveElem-default"];
@@ -207,8 +213,15 @@ export const ListItemTransaction = ({
   }
 };
 
-const SkeletonComponent = () => (
-  <View style={IOListItemStyles.listItem} accessible={false}>
+const ListItemTransactionSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<ListItemTransaction, "loadingAccessibilityLabel">) => (
+  <View
+    style={IOListItemStyles.listItem}
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
+  >
     <View style={IOListItemStyles.listItemInner}>
       <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
         <Placeholder.Box

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -1364,7 +1364,12 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
 
 exports[`Test List Item Components - Experimental Enabled  ListItemTransaction Snapshot 1`] = `
 <View
-  accessible={false}
+  accessibilityState={
+    {
+      "busy": true,
+    }
+  }
+  accessible={true}
   style={
     {
       "marginHorizontal": -24,
@@ -2942,7 +2947,12 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
 
 exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
 <View
-  accessible={false}
+  accessibilityState={
+    {
+      "busy": true,
+    }
+  }
+  accessible={true}
   style={
     {
       "marginHorizontal": -24,

package/src/components/modules/ModuleAttachment.tsx

@@ -16,6 +16,7 @@ type PartialProps = WithTestID<{
   format: "doc" | "pdf";
   isLoading?: boolean;
   isFetching?: boolean;
+  loadingAccessibilityLabel?: string;
   fetchingAccessibilityLabel?: string;
   onPress: (event: GestureResponderEvent) => void;
 }>;
@@ -87,6 +88,7 @@ const ModuleAttachmentContent = ({
  * @param {string}   accessibilityLabel - Optional accessibility label.
  * @param {boolean}  disabled - If true, the button is disabled.
  * @param {string}   fetchingAccessibilityLabel - Optional accessibility label to use during fetching.
+ * @param {string}   loadingAccessibilityLabel - Optional accessibility label to use during loading.
  * @param {string}   format - Badge content. PDF or DOC.
  * @param {boolean}  isLoading - If true, displays a skeleton loading component.
  * @param {boolean}  isFetching - If true, displays an activity indicator.
@@ -99,6 +101,7 @@ export const ModuleAttachment = ({
   accessibilityLabel,
   disabled = false,
   fetchingAccessibilityLabel,
+  loadingAccessibilityLabel,
   format,
   isLoading = false,
   isFetching = false,
@@ -117,7 +120,11 @@ export const ModuleAttachment = ({
   );
 
   if (isLoading) {
-    return <ModuleAttachmentSkeleton />;
+    return (
+      <ModuleAttachmentSkeleton
+        loadingAccessibilityLabel={loadingAccessibilityLabel}
+      />
+    );
   }
 
   const pressableAccessibilityLabel =
@@ -149,8 +156,13 @@ export const ModuleAttachment = ({
   );
 };
 
-const ModuleAttachmentSkeleton = () => (
+const ModuleAttachmentSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<ModuleAttachmentProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <VStack space={4}>
         <Placeholder.Box animate="fade" radius={8} width={114} height={16} />

package/src/components/modules/ModuleCheckout.tsx

@@ -21,6 +21,7 @@ import { PressableModuleBase } from "./PressableModuleBase";
 
 type LoadingProps = {
   isLoading: true;
+  loadingAccessibilityLabel?: string;
 };
 
 type ImageProps =
@@ -45,7 +46,11 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   const imageMargin: IOSpacingScale = 12;
 
   if (props.isLoading) {
-    return <ModuleCheckoutSkeleton />;
+    return (
+      <ModuleCheckoutSkeleton
+        loadingAccessibilityLabel={props.loadingAccessibilityLabel}
+      />
+    );
   }
 
   const { paymentLogo, image, title, subtitle, ctaText, onPress } = props;
@@ -98,8 +103,13 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   );
 };
 
-const ModuleCheckoutSkeleton = () => (
+const ModuleCheckoutSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<LoadingProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <HStack space={8} style={{ alignItems: "center" }}>
         <Placeholder.Box animate="fade" radius={8} height={24} width={24} />

package/src/components/modules/ModuleCredential.tsx

@@ -32,6 +32,7 @@ type ImageProps =
 
 type LoadingModuleProps = {
   isLoading: true;
+  loadingAccessibilityLabel?: string;
 };
 
 type BaseModuleProps = {
@@ -48,7 +49,9 @@ const ModuleCredential = (
   props: WithTestID<LoadingModuleProps | ModuleCredentialProps>
 ) =>
   props.isLoading ? (
-    <ModuleCredentialSkeleton />
+    <ModuleCredentialSkeleton
+      loadingAccessibilityLabel={props.loadingAccessibilityLabel}
+    />
   ) : (
     <ModuleCredentialContent {...props} />
   );
@@ -144,8 +147,13 @@ const ModuleCredentialContent = ({
   );
 };
 
-const ModuleCredentialSkeleton = () => (
+const ModuleCredentialSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<LoadingModuleProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <HStack
         style={{ alignItems: "center" }}

package/src/components/modules/ModuleNavigation.tsx

@@ -28,6 +28,7 @@ import {
 
 type LoadingProps = {
   isLoading: true;
+  loadingAccessibilityLabel?: string;
 };
 
 type ImageProps =
@@ -49,7 +50,11 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
   const { hugeFontEnabled } = useIOFontDynamicScale();
 
   if (props.isLoading) {
-    return <ModuleNavigationSkeleton />;
+    return (
+      <ModuleNavigationSkeleton
+        loadingAccessibilityLabel={props.loadingAccessibilityLabel}
+      />
+    );
   }
 
   const { icon, image, title, subtitle, onPress, badge, ...pressableProps } =
@@ -111,8 +116,13 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
   );
 };
 
-const ModuleNavigationSkeleton = () => (
+const ModuleNavigationSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<LoadingProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <HStack
         style={{ alignItems: "center" }}

package/src/components/modules/ModulePaymentNotice.tsx

@@ -23,6 +23,7 @@ export type ModulePaymentNoticeProps = WithTestID<
   {
     isLoading?: boolean;
     accessibilityLabel?: string;
+    loadingAccessibilityLabel?: string;
     title?: string;
     subtitle: string;
     onPress: (event: GestureResponderEvent) => void;
@@ -140,10 +141,15 @@ export const ModulePaymentNotice = ({
   testID,
   accessibilityLabel,
   onPress,
+  loadingAccessibilityLabel,
   ...rest
 }: ModulePaymentNoticeProps) => {
   if (isLoading) {
-    return <ModulePaymentNoticeSkeleton />;
+    return (
+      <ModulePaymentNoticeSkeleton
+        loadingAccessibilityLabel={loadingAccessibilityLabel}
+      />
+    );
   }
 
   return (
@@ -157,8 +163,13 @@ export const ModulePaymentNotice = ({
   );
 };
 
-const ModulePaymentNoticeSkeleton = () => (
+const ModulePaymentNoticeSkeleton = ({
+  loadingAccessibilityLabel
+}: Pick<ModulePaymentNoticeProps, "loadingAccessibilityLabel">) => (
   <ModuleStatic
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+    accessibilityState={{ busy: true }}
     startBlock={
       <VStack space={4}>
         <Placeholder.Box animate="fade" radius={8} width={120} height={12} />

package/src/components/modules/ModuleStatic.tsx

@@ -1,11 +1,13 @@
 import * as React from "react";
-import { PressableProps, View } from "react-native";
+import { PressableProps, View, ViewProps } from "react-native";
 import { IOColors, IOModuleStyles, useIOTheme } from "../../core";
 import { HStack } from "../stack";
 
-type ModuleStaticProps =
-  | ModuleStaticSingleBlockProps
-  | ModuleStaticMultipleBlockProps;
+type ModuleStaticProps = Pick<
+  ViewProps,
+  "accessible" | "accessibilityLabel" | "accessibilityState"
+> &
+  (ModuleStaticSingleBlockProps | ModuleStaticMultipleBlockProps);
 
 type ModuleStaticMultipleBlockProps = {
   startBlock: React.ReactNode;
@@ -27,7 +29,10 @@ export const ModuleStatic = ({
   disabled = false,
   startBlock,
   endBlock,
-  children
+  children,
+  accessible = false,
+  accessibilityLabel,
+  accessibilityState
 }: ModuleStaticProps) => {
   const theme = useIOTheme();
 
@@ -40,7 +45,9 @@ export const ModuleStatic = ({
           opacity: disabled ? DISABLED_OPACITY : 1
         }
       ]}
-      accessible={false}
+      accessible={accessible}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={accessibilityState}
     >
       {startBlock && (
         <HStack space={8} style={{ alignItems: "center" }}>

package/src/components/typography/Body.tsx

@@ -24,7 +24,13 @@ const legacyFontName: IOFontFamily = "TitilliumSansPro";
  */
 export const Body = forwardRef<View, BodyStyleProps>(
   (
-    { weight: customWeight, color: customColor, asLink, ...props },
+    {
+      weight: customWeight,
+      color: customColor,
+      asLink,
+      accessibilityRole = "link",
+      ...props
+    },
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
@@ -44,7 +50,7 @@ export const Body = forwardRef<View, BodyStyleProps>(
       color: customColor ?? defaultColor,
       ...(asLink
         ? {
-            accessibilityRole: "link",
+            accessibilityRole,
             textStyle: { textDecorationLine: "underline" }
           }
         : {})

package/src/components/typography/BodySmall.tsx

@@ -21,7 +21,13 @@ const legacyFontName: IOFontFamily = "TitilliumSansPro";
  */
 export const BodySmall = forwardRef<View, BodySmallProps>(
   (
-    { weight: customWeight, color: customColor, asLink, ...props },
+    {
+      weight: customWeight,
+      color: customColor,
+      asLink,
+      accessibilityRole = "link",
+      ...props
+    },
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
@@ -41,7 +47,7 @@ export const BodySmall = forwardRef<View, BodySmallProps>(
       color: customColor ?? defaultColor,
       ...(asLink
         ? {
-            accessibilityRole: "link",
+            accessibilityRole,
             textStyle: { textDecorationLine: "underline" }
           }
         : {})

package/src/components/typography/IOText.tsx

@@ -1,5 +1,6 @@
 import React, { ComponentProps, forwardRef, useMemo } from "react";
 import {
+  AccessibilityRole,
   ColorValue,
   GestureResponderEvent,
   Text,
@@ -60,6 +61,7 @@ export type TypographicStyleAsLinkProps =
       color?: never;
       asLink: true;
       onPress: (event: GestureResponderEvent) => void;
+      accessibilityRole?: Extract<AccessibilityRole, "button" | "link">;
     }
   | { color?: IOColors; asLink?: false };
 

package/src/components/typography/LabelMini.tsx

@@ -21,7 +21,13 @@ const legacyFontName: IOFontFamily = "TitilliumSansPro";
  */
 export const LabelMini = forwardRef<View, LabelMiniProps>(
   (
-    { weight: customWeight, color: customColor, asLink, ...props },
+    {
+      weight: customWeight,
+      color: customColor,
+      asLink,
+      accessibilityRole = "link",
+      ...props
+    },
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
@@ -41,7 +47,7 @@ export const LabelMini = forwardRef<View, LabelMiniProps>(
       color: customColor ?? defaultColor,
       ...(asLink
         ? {
-            accessibilityRole: "link",
+            accessibilityRole,
             textStyle: { textDecorationLine: "underline" }
           }
         : {})