accessible-toggle-ember.md

Accessible Toggle in Ember.js

In https://joshcollinsworth.com/blog/accessible-toggle-buttons, there is a toggle button component in various frameworks. This is the Ember equivalent of those examples.

In app/components/toggle-button.hbs:

<button aria-pressed="{{if this.isPressed "true" "false"}}" {{on "click" this.toggleButton}}>
  {{@buttonText}}
  <span aria-hidden="true" class="icon">▼</span>
</button>

In app/components/toggle-button.js:

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

export default class ToggleButtonComponent extends Component {
  @tracked isPressed = false;

  @action
  toggleButton() {
    this.isPressed = !this.isPressed;
  }
}

Invoked in a page template:

<ToggleButton @buttonText="Toggle Text" />