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