Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Trigger click on anything #24

Merged
merged 4 commits into from Oct 24, 2019
Merged

Trigger click on anything #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e38089
Trigger click on anything that are not form fields
muan Oct 23, 2019
2918e04
Add another note on interactive content now that we don't restrict it…
muan Oct 23, 2019
2084ecd
Remove mentions of specific tags
muan Oct 24, 2019
4c8758d
Merge branch 'master' into click-anything
muan Oct 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 7 additions & 1 deletion README.md
View file
Open in desktop
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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

```
Expand Down
17 changes: 1 addition & 16 deletions src/utils.js
View file
Open in desktop
Expand Up @@ -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()
}
}
Expand Down