Tag: tutorial

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 EmberJS

How to create an accessible checkbox component in Ember?

Post author By admin
Post date February 15, 2018
No Comments on How to create an accessible checkbox component in Ember?

How to create an accessible checkbox component in Ember?

How to create an accessible checkbox component in Ember?

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

A checkbox allows the user to toggle between two choices – checked and not checked.

Class diagram

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

Component Interface

As far as the component properties are concerned, we are having only one property checked for the component to determine whether the checkbox is toggled or not.

Template

The template for this particular component is not having any HTML markup, since it is just going to yield the markup whatever is just given to the component.

So the template for this component looks like this:

{{yield}}

And we are looking at a target markup like this when the component is rendered in the page.

<div role="checkbox" aria-checked="false" tabindex="0">Lettuce</div>

1	<div role="checkbox" aria-checked="false" tabindex="0">Lettuce</div>

Component

Now it is time for look into the component.js for the ember-aria-checkbox component. We will be starting with a bare component skeleton like this:

import Component from '@ember/component';
import { set, get, computed } from '@ember/object';
import layout from '../templates/components/aria-checkbox';

export default Component.extend({
  layout,

});

import Component from '@ember/component';

import { set, get, computed } from '@ember/object';

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

export default Component.extend({

layout,

});

Next , we will be adding the essential classnames and attributes for the component.

...
export default Component.extend({
  layout,
  classNameBindings: ['focus:focus'],
  attributeBindings: ['role', 'ariaChecked:aria-checked', 'tabindex'],
  role: 'checkbox',

});

...

export default Component.extend({

layout,

classNameBindings: ['focus:focus'],

attributeBindings: ['role', 'ariaChecked:aria-checked', 'tabindex'],

role: 'checkbox',

});

Next we add a computed property ariaChecked to track the toggled state of the component from the checked property.

export default Component.extend({
...
  ariaChecked: computed('checked', function() {
    return get(this, 'checked') ? 'true' : 'false';
  })
...
});

export default Component.extend({

...

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

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

})

...

});

Then we will be adding the requisite properties for the component to track the toggled and focus states along with the tabindex

export default Component.extend({
...
  focus: false,
  checked: false,
  tabindex: 0,
...
});

export default Component.extend({

...

focus: false,

checked: false,

tabindex: 0,

...

});

Now we shift our focus to the event handling part of the component. First we look at the keyDown events like whenever a particular key is pressed, we will toggle the component state from checked to unchecked and vice-versa.

As per the WAI-ARIA recommendations, the SPACE key is used for this purpose as soon as the checkbox got the focus. For that first we need to define the keycode mappings and the handling function for the keyDownevent for the component.

const KEYCODES = {
  'RETURN': 13,
  'SPACE': 32
};

export default Component.extend({
...
  keyDown(e) {
    let flag = false;
    switch(e.keyCode) {
    case KEYCODES.SPACE:
      this.toggleProperty('checked');
      flag = true;
      break;
    default:
      break;
    }

    if(flag) {
      e.stopPropagation();
      e.preventDefault();
    }

  }
...
});

const KEYCODES = {

'RETURN': 13,

'SPACE': 32

};

export default Component.extend({

...

keyDown(e) {

let flag = false;

switch(e.keyCode) {

case KEYCODES.SPACE:

this.toggleProperty('checked');

flag = true;

break;

default:

break;

}

if(flag) {

e.stopPropagation();

e.preventDefault();

}

...

});

Next the main click handler for the component where we just toggle the component state checked

export default Component.extend({
...
  click() {
    this.toggleProperty('checked');
  }
...
});

export default Component.extend({

...

click() {

this.toggleProperty('checked');

}

...

});

Finally, to set the focus classnames for the component, we will be setting the respective property focus to true on focus and false on blur.

export default Component.extend({
...
  focusIn() {
    set(this, 'focus', true);
  },

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

export default Component.extend({

...

focusIn() {

set(this, 'focus', true);

focusOut() {

set(this, 'focus', false);

}

...

});

Github

The source code for this addon is hosted in Github

Demo

You can also see the component in action here

Author: Rajasegar

Created: 2018-02-16 Fri 10:25

Validate

Tags accessibility, component, ember, emberjs, tutorial

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

Table of Contents

How to create an accessible checkbox component in Ember?

Class diagram

Component Interface

Template

Component

Github

Demo

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