link-spacebar-component.md

Add spacebar activation for a focused link

This is a component in an Ember app that has ember-keyboard installed.

{{!-- component: my-cta.hbs --}}

<a class="my-cta" 
{{on-key "Space" this.doRouteTransition}} 
href={{@myUrl}}
...attributes 
>
  {{@linkText}}
</a>

// component: my-cta.js

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MyCtaComponent extends Component {
  @action
  doRouteTransition(e) {
    if (document.activeElement.hasFocus()) {
      e.preventDefault();
      document.activeElement.click();
    }
  }
}

Invocation:

{{! -- page.hbs --}}

<MyCta @myUrl="page.html" @linkText="A dynamic call to action goes here" />