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

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" }
           }
         : {})