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 = [
- |
+
+ | ariaLabel |
+
+ string
+ |
+
+ 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.
+ |
+ 'Spinner' |
+
),
diff --git a/packages/lib/src/spinner/Spinner.test.tsx b/packages/lib/src/spinner/Spinner.test.tsx
index 322e0badfd..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();
+ const { queryByText, getByRole } = render(
+
+ );
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", () => {
@@ -28,4 +31,20 @@ describe("Spinner component tests", () => {
const { getByRole } = render();
expect(getByRole("progressbar")).toBeTruthy();
});
+
+ test("Test spinner aria-label to be undefined", () => {
+ const { getByRole } = render();
+ 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(
+
+ );
+ 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" ? (
@@ -45,9 +52,11 @@ const DxcSpinner = ({ label, value, showValue = false, mode = "large", margin }:
{mode !== "small" && (
-
- {label}
-
+ {label && (
+
+ {label}
+
+ )}
{(value || value === 0) && 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;