From d6cddebe884324ad89204257278fc83ceb7b3487 Mon Sep 17 00:00:00 2001
From: Jennifer Taylor <dragonminded@dragonminded.com>
Date: Thu, 13 Oct 2022 02:23:57 +0000
Subject: [PATCH] Add keyboard control to the slider control.

---
 .../static/components/slider.react.js         | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/bemani/frontend/static/components/slider.react.js b/bemani/frontend/static/components/slider.react.js
index 0a294c8..f8365b3 100644
--- a/bemani/frontend/static/components/slider.react.js
+++ b/bemani/frontend/static/components/slider.react.js
@@ -1,6 +1,30 @@
 /** @jsx React.DOM */
 
 var Slider = createReactClass({
+    key: function(e) {
+        if (e.keyCode == 32) {
+            // Toggle on space.
+            if (this.props.onChange) {
+                this.props.onChange(!this.props.value);
+            }
+        } else if (e.keyCode == 39) {
+            // Slide with cursor keys.
+            if (this.props.onChange && this.props.value) {
+                this.props.onChange(!this.props.value);
+            }
+        } else if (e.keyCode == 37) {
+            // Slide with cursor keys.
+            if (this.props.onChange && !this.props.value) {
+                this.props.onChange(!this.props.value);
+            }
+        } else {
+            // Don't handle, so don't hit the default prevent below.
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    },
+
     render: function() {
         return (
             <div
@@ -12,6 +36,8 @@ var Slider = createReactClass({
                         this.props.onChange(!this.props.value);
                     }
                 }.bind(this)}
+                tabindex={0}
+                onKeyDown={this.key}
             >{ this.props.value ?
                 <>
                     <span className="ball on"></span>