diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js index c5f73e2b244253..c2c1c4dd21b5d4 100644 --- a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js @@ -46,6 +46,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { const { 'aria-label': ariaLabel, 'aria-valuetext': ariaValuetext, + 'aria-labelledby': ariaLabelledby, className, component, classes: classesProp, @@ -282,6 +283,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { data-index={index} aria-label={getAriaLabel ? getAriaLabel(index) : ariaLabel} aria-valuenow={scale(value)} + aria-labelledby={ariaLabelledby} aria-valuetext={ getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext } diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.test.js b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.test.js index c7c32a900cc7d8..c980e55dd3edc1 100644 --- a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.test.js +++ b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.test.js @@ -282,4 +282,47 @@ describe('', () => { expect(container.querySelectorAll(`.${classes.markLabel}`)[1].textContent).to.equal('100'); }); }); + + describe('ARIA', () => { + it('should have the correct aria attributes', () => { + const { getByRole, container } = render( + , + ); + + const sliderWrapperElement = container.firstChild; + const slider = getByRole('slider'); + const markLabels = container.querySelectorAll(`.${classes.markLabel}`); + const input = container.querySelector('input'); + expect(slider).to.have.attribute('aria-valuemin', '0'); + expect(slider).to.have.attribute('aria-valuemax', '100'); + expect(slider).to.have.attribute('aria-valuenow', '50'); + expect(slider).to.have.attribute('aria-labelledby'); + + expect(markLabels[0]).to.have.attribute('aria-hidden', 'true'); + + expect(sliderWrapperElement).not.to.have.attribute('aria-labelledby'); + expect(input).to.have.attribute('aria-labelledby', 'a slider label'); + expect(input).to.have.attribute('aria-label', 'a slider'); + expect(input).to.have.attribute('aria-valuenow', '50'); + }); + }); });