diff --git a/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx b/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx
index 4cc180b298..52c1910f63 100644
--- a/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx
+++ b/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 = [
- |
+
+ | ariaLabel |
+
+ string
+ |
+
+ Specifies a string to be used as the name for the progress bar element when no label is
+ provided.
+ |
+ 'Progress bar' |
+
),
diff --git a/packages/lib/src/progress-bar/ProgressBar.test.tsx b/packages/lib/src/progress-bar/ProgressBar.test.tsx
index e470277bcc..c4db426dce 100644
--- a/packages/lib/src/progress-bar/ProgressBar.test.tsx
+++ b/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();
+ 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();
+ const progressBar = getByRole("progressbar");
+ expect(getByText("Example label")).toBeTruthy();
+ expect(progressBar.getAttribute("aria-label")).toBeNull();
+ });
});
diff --git a/packages/lib/src/progress-bar/ProgressBar.tsx b/packages/lib/src/progress-bar/ProgressBar.tsx
index 2c6170ac19..c6124c7e90 100644
--- a/packages/lib/src/progress-bar/ProgressBar.tsx
+++ b/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 = ({