From b8fc04cb461920fc664f92779da5fe57375410bf Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Wed, 15 Jan 2025 16:48:51 +0100
Subject: [PATCH 1/2] ariaLabel prop added to spinner

---
 .../spinner/code/SpinnerCodePage.tsx          | 11 +++++++++++
 packages/lib/src/spinner/Spinner.test.tsx     | 16 ++++++++++++++++
 packages/lib/src/spinner/Spinner.tsx          | 19 ++++++++++++++-----
 packages/lib/src/spinner/types.ts             |  4 ++++
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx b/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx
index 566d818354..2494b58b3d 100644
--- a/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx
+++ b/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx
@@ -75,6 +75,17 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>ariaLabel</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              Specifies a string to be used as the name for the spinner element when no `label` is provided or the
+              `mode` is set to small.
+            </td>
+            <td>'Spinner'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),
diff --git a/packages/lib/src/spinner/Spinner.test.tsx b/packages/lib/src/spinner/Spinner.test.tsx
index 322e0badfd..4b1935d22c 100644
--- a/packages/lib/src/spinner/Spinner.test.tsx
+++ b/packages/lib/src/spinner/Spinner.test.tsx
@@ -28,4 +28,20 @@ describe("Spinner component tests", () => {
     const { getByRole } = render(<DxcSpinner label="test-loading" value={75} showValue></DxcSpinner>);
     expect(getByRole("progressbar")).toBeTruthy();
   });
+
+  test("Test spinner aria-label to be undefined", () => {
+    const { getByRole } = render(<DxcSpinner label="test-loading" value={75} showValue></DxcSpinner>);
+    const spinner = getByRole("progressbar");
+    expect(spinner.getAttribute("aria-label")).toBeNull();
+    expect(spinner.getAttribute("aria-labelledby")).toBeTruthy();
+  });
+
+  test("Test spinner aria-label to be applied correctly when mode is small", () => {
+    const { getByRole } = render(
+      <DxcSpinner label="test-loading" ariaLabel="Example aria label" value={75} mode="small" showValue></DxcSpinner>
+    );
+    const spinner = getByRole("progressbar");
+    expect(spinner.getAttribute("aria-label")).toBe("Example aria label");
+    expect(spinner.getAttribute("aria-labelledby")).toBeNull();
+  });
 });
diff --git a/packages/lib/src/spinner/Spinner.tsx b/packages/lib/src/spinner/Spinner.tsx
index 9ebc459b89..dc24d6f3a6 100644
--- a/packages/lib/src/spinner/Spinner.tsx
+++ b/packages/lib/src/spinner/Spinner.tsx
@@ -4,7 +4,14 @@ import { spaces } from "../common/variables";
 import HalstackContext from "../HalstackContext";
 import SpinnerPropsType from "./types";
 
-const DxcSpinner = ({ label, value, showValue = false, mode = "large", margin }: SpinnerPropsType): JSX.Element => {
+const DxcSpinner = ({
+  label,
+  value,
+  showValue = false,
+  mode = "large",
+  margin,
+  ariaLabel = "Spinner",
+}: SpinnerPropsType): JSX.Element => {
   const labelId = useId();
   const colorsTheme = useContext(HalstackContext);
   const determinated = useMemo(() => value != null && value >= 0 && value <= 100, [value]);
@@ -31,7 +38,7 @@ const DxcSpinner = ({ label, value, showValue = false, mode = "large", margin }:
             aria-valuemin={determinated ? 0 : undefined}
             aria-valuemax={determinated ? 100 : undefined}
             aria-labelledby={label && mode !== "small" ? labelId : undefined}
-            aria-label={!label ? "Loading indicator" : mode === "small" ? label : undefined}
+            aria-label={!label ? ariaLabel : mode === "small" ? ariaLabel : undefined}
           >
             {mode === "small" ? (
               <SVGSpinner viewBox="0 0 16 16" determinated={determinated}>
@@ -45,9 +52,11 @@ const DxcSpinner = ({ label, value, showValue = false, mode = "large", margin }:
           </Spinner>
           {mode !== "small" && (
             <LabelsContainer>
-              <SpinnerLabel id={labelId} mode={mode}>
-                {label}
-              </SpinnerLabel>
+              {label && (
+                <SpinnerLabel id={labelId} mode={mode}>
+                  {label}
+                </SpinnerLabel>
+              )}
               {(value || value === 0) && showValue && (
                 <SpinnerProgress value={value} mode={mode} showValue={showValue}>
                   {value}%
diff --git a/packages/lib/src/spinner/types.ts b/packages/lib/src/spinner/types.ts
index 38f381f0a5..40ccf47c11 100644
--- a/packages/lib/src/spinner/types.ts
+++ b/packages/lib/src/spinner/types.ts
@@ -23,6 +23,10 @@ type Props = {
    * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
    */
   margin?: Space | Margin;
+  /**
+   * Specifies a string to be used as the name for the spinner element when no `label` is provided or the `mode` is set to small.
+   */
+  ariaLabel?: string;
 };
 
 export default Props;

From ba19bb3f9247a8b85a1f9d7c139c0c5e17d4cbbb Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 16 Jan 2025 11:51:53 +0100
Subject: [PATCH 2/2] added new check to the aria-label in spinner test

---
 packages/lib/src/spinner/Spinner.test.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/lib/src/spinner/Spinner.test.tsx b/packages/lib/src/spinner/Spinner.test.tsx
index 4b1935d22c..99501a7090 100644
--- a/packages/lib/src/spinner/Spinner.test.tsx
+++ b/packages/lib/src/spinner/Spinner.test.tsx
@@ -13,9 +13,12 @@ describe("Spinner component tests", () => {
   });
 
   test("Small spinner hides value and label correctly", () => {
-    const { queryByText } = render(<DxcSpinner mode="small" label="test-loading" value={75} showValue></DxcSpinner>);
+    const { queryByText, getByRole } = render(
+      <DxcSpinner mode="small" label="test-loading" value={75} showValue></DxcSpinner>
+    );
     expect(queryByText("test-loading")).toBeFalsy();
     expect(queryByText("75%")).toBeFalsy();
+    expect(getByRole("progressbar").getAttribute("aria-label")).toBe("Spinner");
   });
 
   test("Overlay spinner shows value and label correctly", () => {