Merge pull request #583 from raunofreiberg/fix/slider-disabled

fix(slider): prevent keyboard events when disabled
reach · Jun 12, 2020 · 4451d4c · 4451d4c
2 parents 82f5ac5 + 9476523
commit 4451d4c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/packages/slider/__tests__/slider.test.tsx b/packages/slider/__tests__/slider.test.tsx
@@ -110,6 +110,25 @@ describe("<Slider />", () => {
       fireEvent.keyDown(handle, { key: "PageDown", code: 34 });
       expect(getCurrentValue(handle)).toEqual(min + tenSteps);
     });
+
+    it("does not move when disabled", () => {
+      const { getByRole } = render(
+        <SliderInput aria-label="mover" disabled>
+          <SliderTrack>
+            <SliderTrackHighlight />
+            <SliderHandle />
+          </SliderTrack>
+        </SliderInput>
+      );
+      const handle = getByRole("slider");
+
+      fireEvent.click(handle);
+
+      fireEvent.keyDown(handle, { key: "ArrowRight", code: 39 });
+      fireEvent.keyDown(handle, { key: "ArrowRight", code: 39 });
+
+      expect(getCurrentValue(handle)).toEqual(0);
+    });
   });
 });
 

diff --git a/packages/slider/src/index.tsx b/packages/slider/src/index.tsx
@@ -393,6 +393,10 @@ const SliderInput = forwardRefWithAs<
 
   // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction
   let handleKeyDown = useEventCallback((event: React.KeyboardEvent) => {
+    if (disabled) {
+      return;
+    }
+
     let newValue: number;
     let tenSteps = (max - min) / 10;
     let keyStep = step || (max - min) / 100;