# Add spacebar activation for a focused link

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

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

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

```js
// 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:

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

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