LitElement: IronA11yKeysBehavior

Replace IronA11yKeysBehavior with keydown event listener when migrating from PolymerElement to LitElement

The Polymer library provides the IronA11yKeysBehavior for easy handling of keyboard events. For example, the following would trigger the save() method when the user pressed Enter:

class MyElement extends mixinBehaviors([IronA11yKeysBehavior],
  PolymerElement) {

  ...

  get keyBindings() {
    return {
    enter: 'save',
  };
}

As you can’t apply IronA11yKeysBehavior mixin to a LitElement, your element must implement the behavior itself. Luckily, this is as easy as before:

class MyElement extends LitElement {

  ...

  protected firstUpdated() {
    this.addEventListener('keydown', this.save);
  }
}

Alternatively, you can bind the handling also directly to a specific element in the template:

class MyElement extends LitElement {

  ...

  protected render() {
    return html`
      <input @keydown="${this.save}">
    };
  }
}

Happy coding!