Merge pull request #24 from github/click-anything

Trigger click on anything

README.md

@@ -2,7 +2,7 @@
 
 Trigger an action on a target element when a key or sequence of keys is pressed
 on the keyboard. This triggers a focus event on form fields, or a click event on
-`<a href="...">`, `<button>` and `<summary>` elements.
+others.
 
 By default, hotkeys are extracted from a target element's `data-hotkey`
 attribute, but this can be overridden by passing the hotkey to the registering
@@ -29,6 +29,8 @@ wait for either `g c` or `g i`.
 
 ## Accessibility considerations
 
+### Character Key Shortcuts
+
 Please note that adding this functionality to your site can be a drawback for
 certain users. Providing a way in your system to disable hotkeys or remap
 them makes sure that those users can still use your site (given that it's
@@ -37,6 +39,10 @@ accessible to those users).
 See ["Understanding Success Criterion 2.1.4: Character Key Shortcuts"](https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html)
 for further reading on this topic.
 
+### Interactive Elements
+
+Wherever possible, hotkeys should be add to [interactive and focusable elements](https://html.spec.whatwg.org/#interactive-content). If a static element must be used, please follow the guideline in ["Adding keyboard-accessible actions to static HTML elements"](https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR29.html).
+
 ## Installation
 
 ```

src/utils.js

@@ -15,25 +15,10 @@ export function isFormField(element: Node): boolean {
   )
 }
 
-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' ||
-    isActivableFormField(el)
-  ) {
+  } else {
     el.click()
   }
 }