Fix tab traversal

src/components/Numeric.vue

@@ -11,7 +11,7 @@
     :aria-valuetext="display"
     tabindex="0"
     @pointerdown="onPointerDown"
-    @keydown.prevent.stop="onKey"
+    @keydown="onKey"
   >
     <span class="value" :title="String(current)">{{ display }}</span>
   </div>
@@ -103,14 +103,41 @@ function onPointerCancel() {
 
 function onKey(e) {
   const key = e.key
+  let handled = false
   let delta = 0
-  if (key === 'ArrowRight' || key === 'ArrowUp') delta = props.step
+  switch (key) {
-  else if (key === 'ArrowLeft' || key === 'ArrowDown') delta = -props.step
+    case 'ArrowRight':
-  else if (key === 'PageUp') delta = props.step * 10
+    case 'ArrowUp':
-  else if (key === 'PageDown') delta = -props.step * 10
+      delta = props.step
-  else if (key === 'Home') current.value = props.min
+      handled = true
-  else if (key === 'End') current.value = props.max
+      break
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      delta = -props.step
+      handled = true
+      break
+    case 'PageUp':
+      delta = props.step * 10
+      handled = true
+      break
+    case 'PageDown':
+      delta = -props.step * 10
+      handled = true
+      break
+    case 'Home':
+      current.value = props.min
+      handled = true
+      break
+    case 'End':
+      current.value = props.max
+      handled = true
+      break
+  }
   if (delta !== 0) current.value = current.value + delta
+  if (handled) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
 }
 </script>