[Slider] Fix unnecessary accessibility attribute in root element (mui…

…#34610)
alexfauquette · Oct 14, 2022 · bde0efc · bde0efc
1 parent 84b579a
commit bde0efc
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git 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
@@ -282,4 +282,47 @@ describe('<SliderUnstyled />', () => {
       expect(container.querySelectorAll(`.${classes.markLabel}`)[1].textContent).to.equal('100');
     });
   });
+
+  describe('ARIA', () => {
+    it('should have the correct aria attributes', () => {
+      const { getByRole, container } = render(
+        <SliderUnstyled
+          value={50}
+          valueLabelDisplay="auto"
+          marks={[
+            {
+              value: 0,
+              label: 0,
+            },
+            {
+              value: 50,
+              label: 50,
+            },
+            {
+              value: 100,
+              label: 100,
+            },
+          ]}
+          aria-label="a slider"
+          aria-labelledby="a slider label"
+        />,
+      );
+
+      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');
+    });
+  });
 });