https://github.com/polymerelements/iron-a11y-keys

A basic element implementation of iron-a11y-keys-behavior
https://github.com/polymerelements/iron-a11y-keys

Last synced: 11 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/polymerelements/iron-a11y-keys
• Owner: PolymerElements
• Created: 2015-05-13T21:41:18.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2023-10-16T14:05:09.000Z (over 2 years ago)
• Last Synced: 2024-11-20T15:52:08.325Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 1.69 MB
• Stars: 19
• Watchers: 15
• Forks: 22
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-a11y-keys.svg)](https://www.npmjs.com/package/@polymer/iron-a11y-keys)

[![Build status](https://travis-ci.org/PolymerElements/iron-a11y-keys.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-a11y-keys)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-a11y-keys)

## <iron-a11y-keys>

`iron-a11y-keys` provides a cross-browser interface for processing

keyboard commands. The interface adheres to [WAI-ARIA best

practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).

It uses an expressive syntax to filter key presses.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-a11y-keys),

  [Demo](https://www.webcomponents.org/element/@polymer/iron-a11y-keys/demo/demo/index.html).

## Usage

### Installation

```

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

```

### In an html file

```html

  

    

      import '@polymer/iron-a11y-keys/iron-a11y-keys.js';

    

  

  

    

    

      // Where to listen for the keys.

      keys.target = document.body;

      keys.addEventListener('keys-pressed', function(event) {

        console.log(event.detail);

      });

    

  

```

### In a Polymer 3 element

```js

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`

      

      

    `;

  }

  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

```sh

git clone https://github.com/PolymerElements/iron-a11y-keys

cd iron-a11y-keys

npm install

npm install -g polymer-cli

```

### Running the demo locally

```sh

polymer serve --npm

open http://127.0.0.1:/demo/

```

### Running the tests

```sh

polymer test --npm

```