access-key-label-polyfill
Advanced tools
Polyfills the accessKeyLabel property to improve discoverability of native keyboard shortcuts for your website. Tiny (< 1KB) and dependency-free.
Polyfills the accessKeyLabel property to improve discoverability of native keyboard shortcuts for your website. Tiny (< 1KB) and dependency-free.
With the accesskey HTML property,
you can easily provide keyboard shortcuts for the buttons of your web application.
<button accesskey="D">Do crazy stuff</button>
<!-- Can be activated using Ctrl + Alt + D -->
Sadly, most users don't even know these shortcuts can be used, even if the web developer provided
them. To make these shortcuts more discoverable you might decide to use the title property, a
tooltip or some other UI element to display the keyboard shortcut.
<button accesskey="D">Do crazy stuff</button>
<small>Hint: Use Ctrl + Alt + D to quickly access this button!</small>
A good idea, but browsers use different combinations of modifier keys. But thanks to the
accessKeyLabel property,
we can easily get a string representation of the keyboard shortcut assigned by the browser. Sooo,
we're good, right? Alas, not quite. Though the API has been around for years,
browser support isn't good enough. Especially, since
Chrome is still missing out. To help bridge the gap, you can use this polyfill and finally let your
users benefit from the keyboard shortcuts you provide!
Full length article about accessKey and accessKeyLabel on dev.to
Simply install the polyfill:
npm i access-key-label-polyfill
# or
yarn add access-key-label-polyfill
And the import and run the install function:
import "access-key-label-polyfill";
Note: Starting with v1.0.0, this polyfill is a native ES module.
You can also use this polyfill 'oldschool'. Simply download the package files and add a script tag to your body:
<body>
<!-- ... -->
<script type="module" src="path/to/AccessKeyLabelPolyfill.js"></script>
</body>
You can view the demo here: https://tillsanders.github.io/access-key-label-polyfill/
The demo will tell you wether the polyfill detected native support for accessKeyLabel or not and
will display either output below the button.
First, the polyfill will try to detect wether the browser already supports accessKeyLabel. If it
does, it will exit immediately. If the browser doesn't support this API, the polyfill will add a
small function to fill the gap. This function will try to detect the browser / operating system and
return the correct label. You can then use accessKeyLabel as expected.
accessKey, or at least, I was unable to guess (why
is this not documented anywhere?!) the correct modifier keys. Would love to get help with this!accessKeyLabelPolyfill()) and install automatically insteadFAQs
Polyfills the accessKeyLabel property to improve discoverability of native keyboard shortcuts for your website. Tiny (< 1KB) and dependency-free.
The npm package access-key-label-polyfill receives a total of 41 weekly downloads. As such, access-key-label-polyfill popularity was classified as not popular.
We found that access-key-label-polyfill demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.