diff --git a/src/components/ProgressBar.cy.tsx b/src/components/ProgressBar.cy.tsx
index 29455601..a4e9ba45 100644
--- a/src/components/ProgressBar.cy.tsx
+++ b/src/components/ProgressBar.cy.tsx
@@ -90,4 +90,40 @@ describe('ProgressBar', () => {
cy.findByRole('progressbar').should('have.attr', 'style').and('include', 'scaleX(0.7)');
});
+
+ it('should have ARIA attributes when controlled progress is used', () => {
+ cy.mount(
+
+
+
+ );
+
+ cy.findByRole('progressbar')
+ .should('have.attr', 'aria-valuenow', '70')
+ .and('have.attr', 'aria-valuemin', '0')
+ .and('have.attr', 'aria-valuemax', '100');
+ });
+
+ it('should convert progress values correctly to percentage', () => {
+ cy.mount(
+
+
+
+ );
+
+ cy.findByRole('progressbar')
+ .should('have.attr', 'aria-valuenow', '35');
+ });
+
+ it('should handle string progress values', () => {
+ cy.mount(
+
+
+
+ );
+
+ cy.findByRole('progressbar')
+ .should('have.attr', 'aria-valuenow', '85');
+ });
+
});
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 6414f4e5..5e69ede4 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -112,7 +112,11 @@ export function ProgressBar({
}
};
- // TODO: add aria-valuenow, aria-valuemax, aria-valuemin
+ const shouldShowAria = controlledProgress && progress !== undefined;
+ const progressValue = shouldShowAria ? (typeof progress === 'number' ? progress : parseFloat(progress || '0')) : 0;
+ const ariaValueNow = Math.min(100, Math.max(0, Math.round(progressValue * 100)));
+ const ariaValueMin = 0;
+ const ariaValueMax = 100;
return (
@@ -122,7 +126,12 @@ export function ProgressBar({