Posted By

brettb on 10/29/10

Tagged

Versions (?)

Last Edited at 10/29/10 06:55am

Statistics

Viewed 96 times

Favorited by 1 user(s)

Related snippets

Aria in Widgets

/ Published in: JavaScript

Reusable function to create an aria alert for any widget and provide a better abstraction to setting its innerHTML.

Highlighted TextExpand

//within a widget:
X.Widget.X = function(data, instanceID){
    this._ariaAlert = (function(widgetID){
        var widget = document.getElementById(widgetID),
            ariaAlert = document.createElement("div");
        ariaAlert.setAttribute("role", "alert");
        ariaAlert.className = "rn_ScreenReaderOnly";
        if(widget)
            YAHOO.util.Dom.insertBefore(ariaAlert, widget.firstChild || widget);
        return function(alertText){
           ariaAlert.innerHTML = alertText;
        };
    })("rn_" + this.instanceID);
//  ...
};

X.Widget.X.prototype = {

_someMethod: function(){
        this._ariaAlert("loading new content");
        //  ...
        this._ariaAlert("");
    }

};

//OR

//Within namespace:

X.UI = {
// ...

createAriaAlert: function(widgetID){
        var widget = document.getElementById(widgetID),
            ariaAlert = document.createElement("div");
        ariaAlert.setAttribute("role", "alert");
        ariaAlert.className = "rn_ScreenReaderOnly";
        if(widget)
        YAHOO.util.Dom.insertBefore(ariaAlert, widget.firstChild || widget);
        return function(alertText){
           ariaAlert.innerHTML = alertText;
        };
    }
// ...
};

//then using it within the widget:

X.Widget.X = function(instanceID, data){
    // ...
    this._ariaAlert = X.UI.createAriaAlert("rn_" + this.instanceID);
    // ...
};

X.Widget.X.prototype = {
    _someMethod: function(){
        this._ariaAlert("Loading");
        // ...
        this._ariaAlert("");
    }
};

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.