Improved keyboard interactions for palette toggle

material/templates/base.html

@@ -249,7 +249,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.bd41221c.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.1e8ae164.min.js' | url }}"></script>
       {% for script in config.extra_javascript %}
         {{ script | script_tag }}
       {% endfor %}

src/templates/assets/javascripts/components/palette/index.ts

@@ -25,6 +25,7 @@ import {
   Subject,
   asyncScheduler,
   defer,
+  filter,
   finalize,
   fromEvent,
   map,
@@ -36,7 +37,8 @@ import {
   skip,
   startWith,
   takeUntil,
-  tap
+  tap,
+  withLatestFrom
 } from "rxjs"
 
 import { getElements, watchMedia } from "~/browser"
@@ -162,6 +164,17 @@ export function mountPalette(
       __md_set("__palette", palette)
     })
 
+    // Handle color switch on Enter or Space - see https://t.ly/YIhVj
+    fromEvent<KeyboardEvent>(el, "keydown").pipe(
+      filter(ev => ev.key === "Enter"),
+      withLatestFrom(push$, (_, palette) => palette)
+    )
+      .subscribe(({ index }) => {
+        index = (index + 1) % inputs.length
+        inputs[index].click()
+        inputs[index].focus()
+      })
+
     /* Update theme-color meta tag */
     push$
       .pipe(