Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@github/hotkey
Advanced tools
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 ``, `` and `<summary>` elements.
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.
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
function (install
) as a parameter.
Multiple hotkeys are separated by a ,
; key combinations are separated
by a +
; and key sequences are separated by a space.
Two-keypress sequences such as g c
and g i
are stored
under the 'g' key in a nested object with 'c' and 'i' keys.
mappings =
'c' : <a href="/rails/rails/issues/new" data-hotkey="c">New Issue</a>
'g' :
'c' : <a href="/rails/rails" data-hotkey="g c">Code</a>
'i' : <a href="/rails/rails/issues" data-hotkey="g i">Issues</a>
In this example, both g c
and c
could be available as hotkeys on the
same page, but g c
and g
can't coexist. If the user presses
g
, the c
hotkey will be unavailable for 1500 ms while we
wait for either g c
or g i
.
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 accessible to those users).
See "Understanding Success Criterion 2.1.4: Character Key Shortcuts" for further reading on this topic.
$ npm install @github/hotkey
<a href="/page/2" data-hotkey="j">Next</a>
<a href="/help" data-hotkey="Control+h">Help</a>
<a href="/rails/rails" data-hotkey="g c">Code</a>
<a href="/search" data-hotkey="s,/">Search</a>
See the list of KeyboardEvent
key values for a list of supported key values.
import {install} from '@github/hotkey'
// Install all the hotkeys on the page
for (const el of document.querySelectorAll('[data-hotkey]')) {
install(el)
}
Alternatively, the hotkey(s) can be passed to the install
function as a parameter e.g.:
for (const el of document.querySelectorAll('[data-shortcut]')) {
install(el, el.dataset.shortcut)
}
To unregister a hotkey from an element, use uninstall
:
import {uninstall} from '@github/hotkey'
for (const el of document.querySelectorAll('[data-hotkey]')) {
uninstall(el)
}
npm install
npm test
Distributed under the MIT license. See LICENSE for details.
FAQs
```html Show help dialog ```
The npm package @github/hotkey receives a total of 47,747 weekly downloads. As such, @github/hotkey popularity was classified as popular.
We found that @github/hotkey demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.