From 86436d94aabfc9153325da789c25cbcfe89eb6e0 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Thu, 12 Oct 2023 15:00:28 +0200
Subject: [PATCH 1/2] Remove `stroke` prop

---
 src/components/loadingSpinner/LoadingSpinner.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/loadingSpinner/LoadingSpinner.tsx b/src/components/loadingSpinner/LoadingSpinner.tsx
index 21b2a19a..3a155295 100644
--- a/src/components/loadingSpinner/LoadingSpinner.tsx
+++ b/src/components/loadingSpinner/LoadingSpinner.tsx
@@ -4,9 +4,8 @@ import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
 import { WithTestID } from "../../utils/types";
 import { IOColors } from "../../core";
 
-type Props = WithTestID<{
+export type LoadingSpinner = WithTestID<{
   color?: IOColors;
-  stroke?: number;
   size?: IOLoadingSpinnerSizeScale;
   durationMs?: number;
 }>;
@@ -17,6 +16,12 @@ type Props = WithTestID<{
  */
 export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
 
+const strokeMap: Record<NonNullable<LoadingSpinner["size"]>, number> = {
+  24: 3,
+  48: 6,
+  76: 9
+};
+
 const startRotationAnimation = (
   durationMs: number,
   rotationDegree: Animated.Value
@@ -33,11 +38,11 @@ const startRotationAnimation = (
 
 export const LoadingSpinner = ({
   color = "blueIO-500",
-  stroke = 3,
   size = 24,
   durationMs = 750
-}: Props): React.ReactElement => {
+}: LoadingSpinner): React.ReactElement => {
   const rotationDegree = useRef(new Animated.Value(0)).current;
+  const stroke: number = strokeMap[size];
 
   useEffect(() => {
     startRotationAnimation(durationMs, rotationDegree);

From 3d3eaeb4b615227d1d5ad2c48dec641d59a40d33 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 13 Oct 2023 09:55:16 +0200
Subject: [PATCH 2/2] Add `a11y` related props to `LoadingSpinner`

---
 .../loadingSpinner/LoadingSpinner.tsx         | 139 +++++++++---------
 1 file changed, 69 insertions(+), 70 deletions(-)

diff --git a/src/components/loadingSpinner/LoadingSpinner.tsx b/src/components/loadingSpinner/LoadingSpinner.tsx
index 3a155295..fee2bba1 100644
--- a/src/components/loadingSpinner/LoadingSpinner.tsx
+++ b/src/components/loadingSpinner/LoadingSpinner.tsx
@@ -8,6 +8,8 @@ export type LoadingSpinner = WithTestID<{
   color?: IOColors;
   size?: IOLoadingSpinnerSizeScale;
   durationMs?: number;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
 }>;
 
 /**
@@ -39,7 +41,10 @@ const startRotationAnimation = (
 export const LoadingSpinner = ({
   color = "blueIO-500",
   size = 24,
-  durationMs = 750
+  durationMs = 750,
+  accessibilityHint,
+  accessibilityLabel,
+  testID = "LoadingSpinnerTestID"
 }: LoadingSpinner): React.ReactElement => {
   const rotationDegree = useRef(new Animated.Value(0)).current;
   const stroke: number = strokeMap[size];
@@ -49,78 +54,72 @@ export const LoadingSpinner = ({
   }, [durationMs, rotationDegree]);
 
   return (
-    <>
-      <View
-        style={{ width: size, height: size }}
-        accessibilityRole="progressbar"
-        testID={"LoadingSpinnerTestID"}
+    <View
+      style={{ width: size, height: size }}
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      importantForAccessibility={"no-hide-descendants"}
+      testID={testID}
+    >
+      <Animated.View
+        testID={"LoadingSpinnerAnimatedTestID"}
+        style={{
+          transform: [
+            {
+              rotateZ: rotationDegree.interpolate({
+                inputRange: [0, 360],
+                outputRange: ["0deg", "360deg"]
+              })
+            }
+          ]
+        }}
       >
-        <Animated.View
-          testID={"LoadingSpinnerAnimatedTestID"}
-          style={{
-            transform: [
-              {
-                rotateZ: rotationDegree.interpolate({
-                  inputRange: [0, 360],
-                  outputRange: ["0deg", "360deg"]
-                })
-              }
-            ]
-          }}
-        >
-          {/* Thanks to Ben Ilegbodu for the article on how to
+        {/* Thanks to Ben Ilegbodu for the article on how to
           create a a SVG gradient loading spinner. Below is
-          a parameterized version of his  version of his code.
+          a parameterized version of his code.
           Source: https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ */}
-          <Svg
-            width={size}
-            height={size}
-            viewBox={`0 0 ${size} ${size}`}
-            fill="none"
-          >
-            <Defs>
-              <LinearGradient id="spinner-secondHalf">
-                <Stop offset="0%" stopOpacity="0" stopColor={IOColors[color]} />
-                <Stop
-                  offset="100%"
-                  stopOpacity="1"
-                  stopColor={IOColors[color]}
-                />
-              </LinearGradient>
-              <LinearGradient id="spinner-firstHalf">
-                <Stop offset="0%" stopOpacity="1" stopColor={IOColors[color]} />
-                <Stop
-                  offset="100%"
-                  stopOpacity="1"
-                  stopColor={IOColors[color]}
-                />
-              </LinearGradient>
-            </Defs>
+        <Svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          fill="none"
+        >
+          <Defs>
+            <LinearGradient id="spinner-secondHalf">
+              <Stop offset="0%" stopOpacity="0" stopColor={IOColors[color]} />
+              <Stop offset="100%" stopOpacity="1" stopColor={IOColors[color]} />
+            </LinearGradient>
+            <LinearGradient id="spinner-firstHalf">
+              <Stop offset="0%" stopOpacity="1" stopColor={IOColors[color]} />
+              <Stop offset="100%" stopOpacity="1" stopColor={IOColors[color]} />
+            </LinearGradient>
+          </Defs>
 
-            <G strokeWidth={stroke}>
-              <Path
-                stroke="url(#spinner-secondHalf)"
-                d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
-                  size / 2 - stroke / 2
-                } 0 0 1 ${size - stroke / 2} ${size / 2}`}
-              />
-              <Path
-                stroke="url(#spinner-firstHalf)"
-                d={`M ${size - stroke / 2} ${size / 2} A ${
-                  size / 2 - stroke / 2
-                } ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2}`}
-              />
-              <Path
-                stroke={IOColors[color]}
-                strokeLinecap="round"
-                d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
-                  size / 2 - stroke / 2
-                } 0 0 1 ${stroke / 2} ${size / 2 - stroke / 4}`}
-              />
-            </G>
-          </Svg>
-        </Animated.View>
-      </View>
-    </>
+          <G strokeWidth={stroke}>
+            <Path
+              stroke="url(#spinner-secondHalf)"
+              d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
+                size / 2 - stroke / 2
+              } 0 0 1 ${size - stroke / 2} ${size / 2}`}
+            />
+            <Path
+              stroke="url(#spinner-firstHalf)"
+              d={`M ${size - stroke / 2} ${size / 2} A ${
+                size / 2 - stroke / 2
+              } ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2}`}
+            />
+            <Path
+              stroke={IOColors[color]}
+              strokeLinecap="round"
+              d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
+                size / 2 - stroke / 2
+              } 0 0 1 ${stroke / 2} ${size / 2 - stroke / 4}`}
+            />
+          </G>
+        </Svg>
+      </Animated.View>
+    </View>
   );
 };