Merge pull request #1569 from ecency/feature/slider-keyboard

Added keyboard controls for entry vote slider
ecency · Mar 8, 2024 · 1bb7639 · 1bb7639
2 parents b23a9d2 + 5e9794c
commit 1bb7639
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 36 deletions.
diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -219,7 +219,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-074f17f0-0b9e-4c5f-ad68-6e462e23fb8b"
+      id="editor-tool-emoji-picker-eb89ac22-2702-4311-9bb6-70a8f5e909f8"
       role="none"
       title="Emoji"
     >
@@ -584,7 +584,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-15c51e4e-8605-497a-87f3-ae6f7bca17a6"
+      id="editor-tool-emoji-picker-01be801c-eb95-4ea8-b8cd-9a74f7a3ffac"
       role="none"
       title="Emoji"
     >

diff --git a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
@@ -41,37 +41,44 @@ Array [
     <div
       className="slider slider-up"
     >
-      <div
-        className="css-yvszuv-Slider"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+      <span
+        className="w-full flex [&>div]:w-full"
+        onClick={[Function]}
+        onKeyUp={[Function]}
+        tabIndex={0}
       >
         <div
-          className="css-3g5hux-Slider"
-          style={
-            Object {
-              "width": "100%",
-            }
-          }
-        />
-        <div
-          onClick={[Function]}
+          className="css-yvszuv-Slider"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
-          style={
-            Object {
-              "left": "100%",
-              "position": "absolute",
-              "top": "50%",
-              "transform": "translate(-50%, -50%)",
-            }
-          }
         >
           <div
-            className="css-1ldz52l-Slider"
+            className="css-3g5hux-Slider"
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
           />
+          <div
+            onClick={[Function]}
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+            style={
+              Object {
+                "left": "100%",
+                "position": "absolute",
+                "top": "50%",
+                "transform": "translate(-50%, -50%)",
+              }
+            }
+          >
+            <div
+              className="css-1ldz52l-Slider"
+            />
+          </div>
         </div>
-      </div>
+      </span>
     </div>
     <div
       className="percentage"

diff --git a/src/common/components/entry-vote-btn/index.tsx b/src/common/components/entry-vote-btn/index.tsx
@@ -27,7 +27,7 @@ import { _t } from "../../i18n";
 import "./_index.scss";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { Button } from "@ui/button";
-import Slider from "react-input-slider";
+import { ReactInputSliderWrapper } from "../../features/packages-helpers";
 
 const setVoteValue = (
   type: "up" | "down" | "downPrevious" | "upPrevious",
@@ -324,11 +324,9 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
               </div>
               <div className="space" />
               <div className="slider slider-up">
-                <Slider
-                  axis="x"
-                  xstep={0.1}
-                  x={upSliderVal}
-                  onChange={({ x }) => this.upSliderChanged(x)}
+                <ReactInputSliderWrapper
+                  value={upSliderVal}
+                  onChange={(x) => this.upSliderChanged(x)}
                 />
               </div>
               <div className="percentage">{`${upSliderVal && upSliderVal.toFixed(1)}%`}</div>
@@ -379,11 +377,9 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
                 <FormattedCurrency {...this.props} value={this.estimate(downSliderVal)} fixAt={3} />
               </div>
               <div className="slider slider-down">
-                <Slider
-                  axis="x"
-                  xstep={0.1}
-                  x={downSliderVal}
-                  onChange={({ x }) => this.downSliderChanged(x)}
+                <ReactInputSliderWrapper
+                  value={downSliderVal}
+                  onChange={(x) => this.downSliderChanged(x)}
                 />
               </div>
               <div className="space" />

diff --git a/src/common/features/packages-helpers/index.ts b/src/common/features/packages-helpers/index.ts
@@ -0,0 +1 @@
+export * from "./react-input-slider-wrapper";
diff --git a/src/common/features/packages-helpers/react-input-slider-wrapper.tsx b/src/common/features/packages-helpers/react-input-slider-wrapper.tsx
@@ -0,0 +1,32 @@
+import Slider from "react-input-slider";
+import React, { useRef } from "react";
+
+interface Props {
+  value: number;
+  onChange: (v: number) => void;
+}
+
+export function ReactInputSliderWrapper({ value, onChange }: Props) {
+  const rootRef = useRef<HTMLSpanElement | null>(null);
+
+  const handleKeyboard = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowLeft" && value > 0) {
+      onChange(value - 1);
+    }
+    if (e.key === "ArrowRight" && value < 100) {
+      onChange(value + 1);
+    }
+  };
+
+  return (
+    <span
+      ref={rootRef}
+      tabIndex={0}
+      className="w-full flex [&>div]:w-full"
+      onKeyUp={handleKeyboard}
+      onClick={() => rootRef.current?.focus()}
+    >
+      <Slider axis="x" xstep={0.1} x={value} onChange={({ x }) => onChange(x)} />
+    </span>
+  );
+}