Tag: tutorials

Creating an accessible toggle component in Ember

Post author By admin
Post date August 26, 2018
No Comments on Creating an accessible toggle component in Ember

How to create an accessible toggle component in Ember?

In this tutorial, we are going to create an accessible toggle component in Ember using the WAI-ARIA specifications.

A toggle or switch component is a type of checkbox that represents on/off values, as opposed to checked/unchecked values.

First we are generate the component by firing up our ember-cli tool:

> ember g component aria-switch

1	> ember g component aria-switch

The default component skeleton will look like this.

import Component from '@ember/component';
import layout from '../templates/components/aria-switch';

export default Component.extend({
  layout,

});

import Component from '@ember/component';

import layout from '../templates/components/aria-switch';

export default Component.extend({

layout,

});

Next we are going to import the computed and reads methods from ‘@ember/object’ and ‘@ember/object/computed’. We are using the new module syntax which will make Ember applications start faster, by replacing the Ember global with a first-class system for importing just the parts of the framework you need.

To know more about the new module syntax, please refer to this RFC.

import { reads } from '@ember/object/computed';
import { computed } from '@ember/object';
import Component from '@ember/component';
import layout from '../templates/components/aria-switch';

export default Component.extend({
   layout,

});

import { reads } from '@ember/object/computed';

import { computed } from '@ember/object';

import Component from '@ember/component';

import layout from '../templates/components/aria-switch';

export default Component.extend({

layout,

});

Next we concentrate on the component template for now. The template code is very simple since we are just going to have some labels for ON and OFF, since we are going for the primary button in the component, the template is only going to have two span elements like this:

<span> {{onLabel}} </span>
<span> {{offLabel}} </span>

1 2	<span> {{onLabel}} </span> <span> {{offLabel}} </span>

Next we will add a checked property to notify the toggle state whether it is on or not.

checked: false

1	checked: false

ARIA attributes

The following are the list of ARIA attributes our switch component will be using and the purpose of each and every attribute is listed below:

aria-checked

The aria-checked attribute of a switch indicates whether the input is on (true) or off (false).

aria-label

The aria-label defines a string value that labels the current element. The purpose of aria-label is to provide the user with a recognizable name of the object.

aria-labelledby

The aria-labelledby attribute identifies the element (or elements) that labels the current element. The purpose of aria-labelledby is the same as that of aria-label.

role

The role attribute allows the author to annotate markup languages with machine-extractable semantic information about the purpose of an element. Use cases include accessibility, device adaptation, server-side processing, and complex data description. In our case, the role attribute will be assigned a value of switch to indicate that it is a toggle button.

HTML Attributes

In addition to the ARIA attributes mentioned above, the switch component will also make use of some HTML attributes for manipulating the markup and controlling the behaviour of the component.

data-action

dataAction: 'aria-switch'

1	dataAction: 'aria-switch'

data-keep-disabled

dataKeepDisabled: reads('disabled'),

1	dataKeepDisabled: reads('disabled'),

type

type: 'button',

1	type: 'button',

So the final set of attributeBindings will be something like:

attributeBindings: [
    'ariaChecked:aria-checked',
    'ariaLabel:aria-label',
    'ariaLabelledBy:aria-labelledby',
    'dataAction:data-action',
    'dataKeepDisabled:data-keep-disabled',
    'disabled',
    'role',
    'type',
  ]

attributeBindings: [

'ariaChecked:aria-checked',

'ariaLabel:aria-label',

'ariaLabelledBy:aria-labelledby',

'dataAction:data-action',

'dataKeepDisabled:data-keep-disabled',

'disabled',

'role',

'type',

]

Then we will have a property called ariaChecked which will read the checked property passed to the component.

ariaChecked: computed('checked', function() {
    return this.get('checked') ? "true" : "false";
  })

ariaChecked: computed('checked', function() {

return this.get('checked') ? "true" : "false";

})

Then finally we will handle the click event for the component. We can handle the same in the default click() event, which does two things. One we need to toggle the checked property, second we need to invoke the callback function passed to the component once the status is toggled.

click() {
   this.toggleProperty('checked');
   if(this.get('onToggle')) {
     this.get('onToggle')(this.get('checked'));
   }
 }

click() {

this.toggleProperty('checked');

if(this.get('onToggle')) {

this.get('onToggle')(this.get('checked'));

}

The final code for the component.js will look something like this:

import { reads } from '@ember/object/computed';
import { computed } from '@ember/object';
import Component from '@ember/component';
import layout from '../templates/components/aria-switch';

export default Component.extend({
  layout,
  checked: false,
  dataAction: 'aria-switch',
  offLabel: 'Off',
  onLabel: 'On',
  role: 'switch',
  type: 'button',
  tagName: 'button',
  attributeBindings: [
    'ariaChecked:aria-checked',
    'ariaLabel:aria-label',
    'ariaLabelledBy:aria-labelledby',
    'dataAction:data-action',
    'dataKeepDisabled:data-keep-disabled',
    'disabled',
    'role',
    'type',
  ],
  ariaLabel: reads('label'),
  dataKeepDisabled: reads('disabled'),
  ariaChecked: computed('checked', function() {
    return this.get('checked') ? "true" : "false";
  }),
  click() {
    this.toggleProperty('checked');
    if(this.get('onToggle')) {
      this.get('onToggle')(this.get('checked'));
    }
  }
});

import { reads } from '@ember/object/computed';

import { computed } from '@ember/object';

import Component from '@ember/component';

import layout from '../templates/components/aria-switch';

export default Component.extend({

layout,

checked: false,

dataAction: 'aria-switch',

offLabel: 'Off',

onLabel: 'On',

role: 'switch',

type: 'button',

tagName: 'button',

attributeBindings: [

'ariaChecked:aria-checked',

'ariaLabel:aria-label',

'ariaLabelledBy:aria-labelledby',

'dataAction:data-action',

'dataKeepDisabled:data-keep-disabled',

'disabled',

'role',

'type',

ariaLabel: reads('label'),

dataKeepDisabled: reads('disabled'),

ariaChecked: computed('checked', function() {

return this.get('checked') ? "true" : "false";

}),

click() {

this.toggleProperty('checked');

if(this.get('onToggle')) {

this.get('onToggle')(this.get('checked'));

}

});

Now we can invoke our component like this:

{{aria-switch label="My Label" checked=true}}

1	{{aria-switch label="My Label" checked=true}}

With custom on/off labels

{{aria-switch onLabel="Yes" offLabel="No" class="toggle toggle-primary"}}

1	{{aria-switch onLabel="Yes" offLabel="No" class="toggle toggle-primary"}}

With toggle callback

{{aria-switch onToggle=(action 'toggleCallback')}}

1	{{aria-switch onToggle=(action 'toggleCallback')}}

Source Code and Demo

References:

Image Credits:

Photo by Mikkel Bech on Unsplash

Tags a11y, accordion, ember, ember-addon, emberjs, tutorial, tutorials

Articles Javascript

How to create an accessible slider component in Ember?

Post author By admin
Post date January 29, 2018
No Comments on How to create an accessible slider component in Ember?

1. How to create an accessible slider component in Ember?

1 How to create an accessible slider component in Ember?

In this tutorial we will see how to create an accessible slider component in Ember based on the WAI-ARIA authoring practices.

A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar or track to change the value of the slider.

1.1 Class diagram

Let us take a look at what are the different things that make up the Slider component in Ember

As you can see, most of the action takes place inside the Slider Thumb component, the Slider component is just a wrapper for the Slider Thumb.

1.2 Component Interface

Let us take a look at how the interface for the component looks like:

1.3 aria-slider -> template

This is how the markup / template for the aria-slider component will look like:

<div class="rail {{focusClass}}">
  {{aria-slider-thumb
    minValue=minValue
    maxValue=maxValue
    labelledBy=labelledBy
    currentValue=currentValue
  }}
  <div class="value">{{currentValue}}</div>
</div>

{{aria-slider-thumb

minValue=minValue

maxValue=maxValue

labelledBy=labelledBy

currentValue=currentValue

}}

<div class="value">{{currentValue}}</div>

</div>

1.4 aria-slider -> component

$ ember g component aria-slider

1	$ ember g component aria-slider

Let us see how the bare bone structure of the aria-slider component in Ember:

import Component from '@ember/component';
import layout from '../templates/components/aria-slider';

export default Component.extend({
  layout,
});

import Component from '@ember/component';

import layout from '../templates/components/aria-slider';

export default Component.extend({

layout,

});

We need to apply a classname aria-widget-slider to the component. Now the component should look like this:

import Component from '@ember/component';
import layout from '../templates/components/aria-slider';

export default Component.extend({
  layout,
  classNames: ['aria-widget-slider']
});

import Component from '@ember/component';

import layout from '../templates/components/aria-slider';

export default Component.extend({

layout,

classNames: ['aria-widget-slider']

});

Next, we need to set a class called focus when the focus is set for the component, and remove the same the focus is unset.

import Component from '@ember/component';
import layout from '../templates/components/aria-slider';

export default Component.extend({
  layout,
  classNames: ['aria-widget-slider'],
  focusIn() {
    this.set('focusClass', 'focus');
  },

  focusOut() {
    this.set('focusClass', '');
  }
});

import Component from '@ember/component';

import layout from '../templates/components/aria-slider';

export default Component.extend({

layout,

classNames: ['aria-widget-slider'],

focusIn() {

this.set('focusClass', 'focus');

focusOut() {

this.set('focusClass', '');

}

});

1.5 aria-slider-thumb -> component

Now we are going to concentrate on the Slider Thumb component.

$ ember g component aria-slider-thumb

1	$ ember g component aria-slider-thumb

We will start with a basic component skeleton in Ember.

import Component from '@ember/component';
import layout from '../templates/components/aria-slider-thumb';

export default Component.extend({
  layout,
});

import Component from '@ember/component';

import layout from '../templates/components/aria-slider-thumb';

export default Component.extend({

layout,

});

Next we need to add the necessary classnames and attributes, by means of the classNameBindings and attributeBindings properties for a component in Ember.

import Component from '@ember/component';
import layout from '../templates/components/aria-slider-thumb';

export default Component.extend({
  layout,
  classNames: ['thumb'],
  classNameBindings: ['focusClass:focus'],
  attributeBindings: [
    'currentValue:aria-valuenow',
    'label:aria-label',
    'maxValue:aria-valuemax',
    'minValue:aria-valuemin',
    'role',
    'src',
    'tabindex',
    'valueText:aria-valuetext',
    'labelledBy:aria-labelledby'
  ],
  role: 'slider',
  tabindex: 0,
  focusClass: false,

});

import Component from '@ember/component';

import layout from '../templates/components/aria-slider-thumb';

export default Component.extend({

layout,

classNames: ['thumb'],

classNameBindings: ['focusClass:focus'],

attributeBindings: [

'currentValue:aria-valuenow',

'label:aria-label',

'maxValue:aria-valuemax',

'minValue:aria-valuemin',

'role',

'src',

'tabindex',

'valueText:aria-valuetext',

'labelledBy:aria-labelledby'

role: 'slider',

tabindex: 0,

focusClass: false,

});

Next we are going to create a computed property called ‘valueText’ which will give you the current value of the slider along with units.

import Component from '@ember/component';
import layout from '../templates/components/aria-slider-thumb';
import { computed } from '@ember/object';

export default Component.extend({
  ...
  valueText: computed('currentValue', function() {
    let units = this.get('units') || '';
    let _valueText = `${this.get('currentValue')}${units}`;
    if(this.get('unitPrefix')){
      _valueText = `${units}${this.get('currentValue')}`;
    }
    return _valueText;
  }),


});

import Component from '@ember/component';

import layout from '../templates/components/aria-slider-thumb';

import { computed } from '@ember/object';

export default Component.extend({

...

valueText: computed('currentValue', function() {

let units = this.get('units') || '';

let _valueText = `${this.get('currentValue')}${units}`;

if(this.get('unitPrefix')){

_valueText = `${units}${this.get('currentValue')}`;

}

return _valueText;

}),

});

Now we are going to concentrate on the keyDown event for the component where we will move the slider accordingly based on the keystroke by identifying the KEYCODES

First we need to define the keycode mappings using a constant.

const KEYCODES = {
  'left': 37,
  'up': 38,
  'right': 39,
  'down': 40,
  'pageUp': 33,
  'pageDown': 34,
  'end': 35,
  'home': 36
};

const KEYCODES = {

'left': 37,

'up': 38,

'right': 39,

'down': 40,

'pageUp': 33,

'pageDown': 34,

'end': 35,

'home': 36

};

Now the implementation of the keyDown event should like the following.

keyDown(event) {
  var flag = false;

  let currentVal = this.get('currentValue');
  switch (event.keyCode) {
    case KEYCODES.left:
    case KEYCODES.down:
      this.moveSliderTo(currentVal - 1);
      flag = true;
      break;

    case KEYCODES.right:
    case KEYCODES.up:
      this.moveSliderTo(currentVal + 1);
      flag = true;
      break;

    case KEYCODES.pageDown:
      this.moveSliderTo(currentVal - 10);
      flag = true;
      break;

    case KEYCODES.pageUp:
      this.moveSliderTo(currentVal + 10);
      flag = true;
      break;

    case KEYCODES.home:
      this.moveSliderTo(this.get('minValue'));
      flag = true;
      break;

    case KEYCODES.end:
      this.moveSliderTo(this.get('maxValue'));
      flag = true;
      break;

    default:
      break;
  }

  if (flag) {
    event.preventDefault();
    event.stopPropagation();
  }
},

keyDown(event) {

var flag = false;

let currentVal = this.get('currentValue');

switch (event.keyCode) {

case KEYCODES.left:

case KEYCODES.down:

this.moveSliderTo(currentVal - 1);

flag = true;

break;

case KEYCODES.right:

case KEYCODES.up:

this.moveSliderTo(currentVal + 1);

flag = true;

break;

case KEYCODES.pageDown:

this.moveSliderTo(currentVal - 10);

flag = true;

break;

case KEYCODES.pageUp:

this.moveSliderTo(currentVal + 10);

flag = true;

break;

case KEYCODES.home:

this.moveSliderTo(this.get('minValue'));

flag = true;

break;

case KEYCODES.end:

this.moveSliderTo(this.get('maxValue'));

flag = true;

break;

default:

break;

}

if (flag) {

event.preventDefault();

event.stopPropagation();

}

Let us add an handler for mouseDown event for the slider-thumb component.

mouseDown(e) {

  let parentNode = e.target.parentNode;
  let minValue = this.get('minValue');
  let maxValue = this.get('maxValue');

  let handleMouseMove = (event) => {

    let diffX = event.pageX - parentNode.offsetLeft;
    let valueNow = minValue + parseInt(((maxValue - minValue) * diffX) / RAIL_WIDTH);
    this.moveSliderTo(valueNow);

    event.preventDefault();
    event.stopPropagation();
  };

  var handleMouseUp = function() {
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  // bind a mousemove event handler to move pointer
  document.addEventListener('mousemove', handleMouseMove);

  // bind a mouseup event handler to stop tracking mouse movements
  document.addEventListener('mouseup', handleMouseUp);

  e.preventDefault();
  e.stopPropagation();

  // Set focus to the clicked handle
  e.target.focus();
},

mouseDown(e) {

let parentNode = e.target.parentNode;

let minValue = this.get('minValue');

let maxValue = this.get('maxValue');

let handleMouseMove = (event) => {

let diffX = event.pageX - parentNode.offsetLeft;

let valueNow = minValue + parseInt(((maxValue - minValue) * diffX) / RAIL_WIDTH);

this.moveSliderTo(valueNow);

event.preventDefault();

event.stopPropagation();

};

var handleMouseUp = function() {

document.removeEventListener('mousemove', handleMouseMove);

document.removeEventListener('mouseup', handleMouseUp);

};

// bind a mousemove event handler to move pointer

document.addEventListener('mousemove', handleMouseMove);

// bind a mouseup event handler to stop tracking mouse movements

document.addEventListener('mouseup', handleMouseUp);

e.preventDefault();

e.stopPropagation();

// Set focus to the clicked handle

e.target.focus();

Let us add the focusIn and focusOut action handlers also to the component.

focusIn() {
  this.set('focusClass', true);
},

focusOut() {
  this.set('focusClass', false);
},

focusIn() {

this.set('focusClass', true);

focusOut() {

this.set('focusClass', false);

Let us initialize the component. One thing we have to note here is that once the component is rendered on the page, we should move the thumb to the exact location based on the currentValue property set to the component. This is what we will be doing in the init function of the component.

init() {
  this._super(...arguments);
  run.schedule('afterRender', () => {
    this.moveSliderTo(this.get('currentValue'));
  });
},

init() {

this._super(...arguments);

run.schedule('afterRender', () => {

this.moveSliderTo(this.get('currentValue'));

});

Now let’s get to the meat of the component, the moveSliderTo method where we will be actually placing the slider-thumb in the exact location using css positioning.

moveSliderTo(value) {
  let minValue = this.get('minValue');
  let maxValue = this.get('maxValue');
  let _value = value;

  if (value < minValue) {
    _value = minValue;
  }

  if ( value > maxValue) {
    _value = maxValue;
  }

  this.set('currentValue', _value);

  if(value < minValue || value > maxValue) {
    return;
  }
  let pos = Math.round((_value * RAIL_WIDTH) / (maxValue - minValue)) - (THUMB_WIDTH / 2);

  let left = '';

  left = pos + 'px';

  this.element.style.left = left;

}

moveSliderTo(value) {

let minValue = this.get('minValue');

let maxValue = this.get('maxValue');

let _value = value;

if (value < minValue) {

_value = minValue;

}

if ( value > maxValue) {

_value = maxValue;

}

this.set('currentValue', _value);

if(value < minValue || value > maxValue) {

return;

}

let pos = Math.round((_value * RAIL_WIDTH) / (maxValue - minValue)) - (THUMB_WIDTH / 2);

let left = '';

left = pos + 'px';

this.element.style.left = left;

}

As you can see we have used two constants called RAIL_WIDTH and THUMB_WIDTH, let’s define them at the top of the component file as global constants.

import Component from '@ember/component';
import { computed } from '@ember/object';
import layout from '../templates/components/aria-slider-thumb';
import { run } from '@ember/runloop';

const RAIL_WIDTH = 300;

const THUMB_WIDTH = 8;

import Component from '@ember/component';

import { computed } from '@ember/object';

import layout from '../templates/components/aria-slider-thumb';

import { run } from '@ember/runloop';

const RAIL_WIDTH = 300;

const THUMB_WIDTH = 8;

1.6 Source Code

The source code for this addon is hosted on Github

1.7 Demo

There is also a demo available for this addon here

1.8 References

Featured Image:

unsplash-logoAlexey Ruban

Tags addon, ember, emberjs, tutorial, tutorials

RxJS

Build a Wikipedia search engine using RxJS

Post author By admin
Post date March 7, 2017
No Comments on Build a Wikipedia search engine using RxJS

In this tutorial, we will be building a Wikipedia search engine using RxJS

Tags rxjs, tutorial, tutorials, web development

Cycle.js

Cycle.js tutorial: Registration Form – Part 2

Post author By admin
Post date February 12, 2017
No Comments on Cycle.js tutorial: Registration Form – Part 2

This tutorial is the second part of our previous tutorial where we built a simple registration form using Cycle.js. In this part, we will introduce some basic concepts for building Cycle.js like seeds, intents and state.

Tags cycle.js, tutorial, tutorials, web development

How to create an accessible toggle component in Ember?

ARIA attributes

aria-checked

aria-label

aria-labelledby

role

HTML Attributes

data-action

data-keep-disabled

type

With custom on/off labels

With toggle callback

Source Code and Demo

References:

Image Credits:

Table of Contents

1 How to create an accessible slider component in Ember?

1.1 Class diagram

1.2 Component Interface

1.3 aria-slider -> template

1.4 aria-slider -> component

1.5 aria-slider-thumb -> component

1.6 Source Code

1.7 Demo

1.8 References

Featured Image: