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;