Categories
Uncategorized

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:

The default component skeleton will look like this.

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.

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:

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

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

data-keep-disabled

type

So the final set of attributeBindings will be something like:

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

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.

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

Now we can invoke our component like this:

With custom on/off labels

With toggle callback

Source Code and Demo

References:

Image Credits:

Photo by Mikkel Bech on Unsplash

Categories
Articles Javascript

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

class-diagram.png

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:

component.png

1.3 aria-slider -> template

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

1.4 aria-slider -> component

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

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

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.

1.5 aria-slider-thumb -> component

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

We will start with a basic component skeleton in Ember.

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

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

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.

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

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

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

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.

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.

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.

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

Featured Image:

unsplash-logoAlexey Ruban

Categories
RxJS

Build a Wikipedia search engine using RxJS

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

Categories
Cycle.js

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.