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 = ({