Skip to content

A basic element implementation of iron-a11y-keys-behavior

Notifications You must be signed in to change notification settings

KatapultDevelopment/iron-a11y-keys

This branch is 2 commits behind PolymerElements/iron-a11y-keys:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7e8b807 · Aug 7, 2020
Jul 19, 2018
Jul 19, 2018
Jul 30, 2018
Aug 17, 2018
Aug 17, 2018
Sep 7, 2018
May 17, 2016
Jul 30, 2018
Sep 14, 2018
Aug 8, 2018
Jun 19, 2019
Jun 23, 2018
Aug 7, 2020
Sep 14, 2018
Jun 7, 2018

Repository files navigation

Published on NPM Build status Published on webcomponents.org

<iron-a11y-keys>

iron-a11y-keys provides a cross-browser interface for processing keyboard commands. The interface adheres to WAI-ARIA best practices. It uses an expressive syntax to filter key presses.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/iron-a11y-keys

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/iron-a11y-keys/iron-a11y-keys.js';
    </script>
  </head>
  <body>
    <iron-a11y-keys id="keys" keys="left right down up"></iron-a11y-keys>

    <script>
      // Where to listen for the keys.
      keys.target = document.body;
      keys.addEventListener('keys-pressed', function(event) {
        console.log(event.detail);
      });
    </script>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-a11y-keys/iron-a11y-keys.js';

class SampleElement extends PolymerElement {
  static get properties() {
    return {
      target: {
        type: Object,
        value: function() {
          return this.$.input;
        }
      },
    }
  }

  static get template() {
    return html`
      <iron-a11y-keys id="a11y"
          target="[[target]]" keys="enter"
          on-keys-pressed="onEnter"></iron-a11y-keys>
      <input id="input" placeholder="Type something. Press enter. Check console.">
    `;
  }

  function onEnter() {
    console.log(this.userInput);
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/iron-a11y-keys
cd iron-a11y-keys
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

About

A basic element implementation of iron-a11y-keys-behavior

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 52.0%
  • HTML 48.0%