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 EmberJS

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

class-diagram.png

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.

interface.png

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:

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

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:

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

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

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

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.

Next the main click handler for the component where we just toggle the component state 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.

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

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