Merge pull request #11 from github/boxes-support

Support of checkbox and radio input elements
github · Feb 15, 2019 · 8fe76f3 · 8fe76f3
2 parents bfcbe83 + 8d01c2b
commit 8fe76f3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/src/utils.js b/src/utils.js
@@ -10,15 +10,30 @@ export function isFormField(element: Node): boolean {
   return (
     name === 'select' ||
     name === 'textarea' ||
-    (name === 'input' && type !== 'submit' && type !== 'reset') ||
+    (name === 'input' && type !== 'submit' && type !== 'reset' && type !== 'checkbox' && type !== 'radio') ||
     element.isContentEditable
   )
 }
 
+function isActivableFormField(element: Node): boolean {
+  if (!(element instanceof HTMLElement)) {
+    return false
+  }
+
+  const name = element.nodeName.toLowerCase()
+  const type = (element.getAttribute('type') || '').toLowerCase()
+  return name === 'input' && (type === 'checkbox' || type === 'radio')
+}
+
 export function fireDeterminedAction(el: HTMLElement): void {
   if (isFormField(el)) {
     el.focus()
-  } else if ((el instanceof HTMLAnchorElement && el.href) || el.tagName === 'BUTTON' || el.tagName === 'SUMMARY') {
+  } else if (
+    (el instanceof HTMLAnchorElement && el.href) ||
+    el.tagName === 'BUTTON' ||
+    el.tagName === 'SUMMARY' ||
+    isActivableFormField(el)
+  ) {
     el.click()
   }
 }

diff --git a/test/test.js b/test/test.js
@@ -186,6 +186,22 @@ describe('hotkey', function() {
       assert.deepEqual(elementsActivated, [])
     })
 
+    it('will activate checkbox input elements that have a hotkey attribute', async () => {
+      setHTML('<input type="checkbox" id="checkbox" data-hotkey="a">')
+
+      document.dispatchEvent(new KeyboardEvent('keydown', {key: 'a'}))
+
+      assert.deepEqual(elementsActivated, ['checkbox'])
+    })
+
+    it('will activate radio button input elements that have a hotkey attribute', async () => {
+      setHTML('<input type="radio" id="radio" data-hotkey="a">')
+
+      document.dispatchEvent(new KeyboardEvent('keydown', {key: 'a'}))
+
+      assert.deepEqual(elementsActivated, ['radio'])
+    })
+
     it('can click a[href] elements that declare data-hotkey for activation', async () => {
       setHTML('<a id="link" href="#" data-hotkey="a b">')