ariaLabel prop added to progressBar component

apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx

@@ -1,4 +1,5 @@
 import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import Code from "@/common/Code";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import DocFooter from "@/common/DocFooter";
@@ -79,6 +80,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 progress bar element when no <Code>label</Code> is
+              provided.
+            </td>
+            <td>'Progress bar'</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

packages/lib/src/progress-bar/ProgressBar.test.tsx

@@ -38,4 +38,19 @@ describe("ProgressBar component tests", () => {
     expect(getByText("25 %")).toBeTruthy();
     expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
+
+  test("Overlay progressBar renders with correct aria-label", () => {
+    const value = 25;
+    const { getByRole } = render(<DxcProgressBar showValue ariaLabel="Example aria label" value={value} overlay />);
+    const progressBar = getByRole("progressbar");
+    expect(progressBar.getAttribute("aria-label")).toBe("Example aria label");
+  });
+
+  test("Overlay progressBar renders with correct label", () => {
+    const value = 25;
+    const { getByRole, getByText } = render(<DxcProgressBar showValue label="Example label" value={value} overlay />);
+    const progressBar = getByRole("progressbar");
+    expect(getByText("Example label")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-label")).toBeNull();
+  });
 });

packages/lib/src/progress-bar/ProgressBar.tsx

@@ -46,7 +46,7 @@ const MainContainer = styled.div<{
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  z-index: ${(props) => props.overlay ? "100" : "0"};
+  z-index: ${(props) => (props.overlay ? "100" : "0")};
 `;
 
 const ProgressBarLabel = styled.div<{
@@ -103,7 +103,7 @@ const LinearProgressBar = styled.span<{
   top: 0;
   bottom: 0;
   left: 0;
-  width: ${(props) => props.variant === "indeterminate" ? "auto" : "100%"};
+  width: ${(props) => (props.variant === "indeterminate" ? "auto" : "100%")};
   transform: ${(props) => `translateX(-${props.variant === "determinate" ? 100 - (props.value ?? 0) : 0}%)`};
   transition: ${(props) => (props.variant === "determinate" ? "transform .4s linear" : "transform 0.2s linear")};
   transform-origin: left;
@@ -151,6 +151,7 @@ const DxcProgressBar = ({
   value,
   showValue,
   margin,
+  ariaLabel = "Progress bar",
 }: ProgressBarPropsType): JSX.Element => {
   const colorsTheme = useContext(HalstackContext);
   const labelId = `label-${useId()}`;
@@ -177,8 +178,8 @@ const DxcProgressBar = ({
           <LinearProgress
             role="progressbar"
             helperText={helperText}
-            aria-label="Progress bar"
-            aria-labelledby={labelId}
+            aria-label={label ? undefined : ariaLabel}
+            aria-labelledby={label ? labelId : undefined}
             aria-valuenow={innerValue}
             aria-valuemin={0}
             aria-valuemax={100}

packages/lib/src/progress-bar/types.ts

@@ -35,6 +35,10 @@ type Props = {
    * in order to specify different margin sizes.
    */
   margin?: Space | Size;
+  /**
+   * Specifies a string to be used as the name for the progress bar element when no `label` is provided.
+   */
+  ariaLabel?: string;
 };
 
 export default Props;