Overriding jquery UI widget

Objective
Overrride a jquery UI widget’s method

Approach
As part of making our application compliant with Section 508 using SortSite we ran to the issue of making jquery UI slider compliant. SortSite complained that the slider handle is not accessible. It should have a text and title. Hence the existing markup

<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 11%;"></a>

should be converted into

<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;" aria-hidden="true" title="Slider control 1">
    <span class="hide">HiddenText</span>
</a>

The above scenario can be achieved in two ways:
1. Dig into the code of jquery UI slider and make changes accordingly.
2. Override the involved methods from our javascript functions outside the plugin js

The later approach is more maintainable as future changes in the plugin can be incorporated easily. We will not have to maintain our code fix with subsequent version changes. Even if the overriden methods change, we know what and where to fix in our code.
jQuery UI provides a utility function $.widget to create widgets on the lines of existing widgets. In order to fix the accessibility scenario in slider, we can create a new widget with same name as slider which extends the original slider. Hence the following code solves our purpose:

(function (){
var originalSlider = $.ui.slider;
$.widget("ui.slider", originalSlider, {
      _create: function() {
        originalSlider.prototype._create.call(this);
        for(var i = 0, len = this.handles.length; i < len; i++){
            var oHandle = $(this.handles[i]);
            oHandle.attr("aria-hidden","true").attr("title",$.i18nMessage("Slider control") +" " + (i+1)).append("<span class='hide'>HiddenText</span>");
        }
      }
    });
})();

The above code uses closure to make originalSlider private. The new slider plugin is names “ui.slider” and extends the origianlSlider, overriding it’s _create method which creates the slider markup.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>