Merge pull request #2145 from dxc-technology/jialecl-spinner-ariaLabel

ariaLabel prop added to spinner

Author: Mil4n0r

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>
     ),

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", () => {
@@ -28,4 +31,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();
+  });
 });

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

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;