fix: [IOPLT-1026] Add the proper accessibility state to all components in the loading state (#430)

## Short description
This PR adds the proper accessibility state to all the components in the
loading state

## List of changes proposed in this pull request
- Add `accessibilityState: { busy: true }` to all the components in the
loading state
- Add an optional `loadingAccessibilityLabel` prop to add a custom text
while the component is in this state
- Update pages in the example app to reflect the mentioned changes

## How to test
Use the screen reader and point to all components in the loading state.
Previously, they were simply ignored.

---------

Co-authored-by: Emanuele Dall'Ara <[email protected]>

Author: dmnplb

example/src/pages/ListItem.tsx

@@ -615,6 +615,7 @@ const renderListItemTransaction = () => (
           amountAccessibilityLabel: "€ 1.000,00"
         }}
         isLoading={true}
+        loadingAccessibilityLabel="Loading transaction"
         onPress={onButtonPress}
       />
 

example/src/pages/Modules.tsx

@@ -145,14 +145,14 @@ const renderModulePaymentNotice = () => (
       <View>
         <ModulePaymentNotice
           isLoading
-          onPress={mockFn}
+          loadingAccessibilityLabel="Loading payment notice"
           paymentNotice={{
-            status: "default",
-            amount: "100,00 €",
-            amountAccessibilityLabel: "100,00 €"
+            status: "in-progress"
           }}
+          badgeText="In corso"
+          subtitle="F24"
           title="Codice avviso"
-          subtitle="302012131232131"
+          onPress={mockFn}
         />
       </View>
     </ComponentViewerBox>
@@ -216,7 +216,10 @@ const renderModuleCheckout = () => (
       />
     </ComponentViewerBox>
     <ComponentViewerBox name="ModuleCheckout, loading">
-      <ModuleCheckout isLoading />
+      <ModuleCheckout
+        isLoading
+        loadingAccessibilityLabel="Loading checkout item"
+      />
     </ComponentViewerBox>
   </>
 );
@@ -250,6 +253,7 @@ const renderModuleAttachment = () => (
         title="Documento.pdf"
         format="pdf"
         isLoading
+        loadingAccessibilityLabel="Loading attachment"
         onPress={modulePress}
       />
     </ComponentViewerBox>
@@ -258,6 +262,7 @@ const renderModuleAttachment = () => (
         title="Documento.pdf"
         format="pdf"
         isFetching
+        fetchingAccessibilityLabel="Fetching attachment"
         onPress={modulePress}
       />
     </ComponentViewerBox>
@@ -325,7 +330,10 @@ const renderModuleCredential = () => (
     </ComponentViewerBox>
     <ComponentViewerBox name="ModuleCredential, loading">
       <View>
-        <ModuleCredential isLoading={true} />
+        <ModuleCredential
+          isLoading={true}
+          loadingAccessibilityLabel={"Loading credential"}
+        />
       </View>
     </ComponentViewerBox>
   </>
@@ -375,7 +383,10 @@ const renderModuleNavigation = () => (
     </ComponentViewerBox>
     <ComponentViewerBox name="ModuleNavigation, loading">
       <View>
-        <ModuleNavigation isLoading={true} />
+        <ModuleNavigation
+          isLoading={true}
+          loadingAccessibilityLabel={"Loading navigation"}
+        />
       </View>
     </ComponentViewerBox>
   </>

example/src/pages/Selection.tsx

@@ -211,7 +211,8 @@ const mockRadioItems = (): ReadonlyArray<RadioItem<string>> => [
     disabled: true,
     loadingProps: {
       state: true,
-      skeletonIcon: false
+      skeletonIcon: false,
+      loadingAccessibilityLabel: "Loading radio item"
     }
   },
   {
@@ -222,7 +223,8 @@ const mockRadioItems = (): ReadonlyArray<RadioItem<string>> => [
     disabled: true,
     loadingProps: {
       state: true,
-      skeletonIcon: true
+      skeletonIcon: true,
+      loadingAccessibilityLabel: "Loading radio item"
     }
   },
   {
@@ -233,7 +235,8 @@ const mockRadioItems = (): ReadonlyArray<RadioItem<string>> => [
     disabled: true,
     loadingProps: {
       state: true,
-      skeletonDescription: true
+      skeletonDescription: true,
+      loadingAccessibilityLabel: "Loading radio item"
     }
   },
   {
@@ -245,7 +248,8 @@ const mockRadioItems = (): ReadonlyArray<RadioItem<string>> => [
     loadingProps: {
       state: true,
       skeletonDescription: true,
-      skeletonIcon: true
+      skeletonIcon: true,
+      loadingAccessibilityLabel: "Loading radio item"
     }
   }
 ];

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"

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

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,

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} />

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} />

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" }}

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" }}