Return to Snippet

Revision: 34865
at October 29, 2010 06:57 by brettb


Updated Code
//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("");
    }
};

Revision: 34864
at October 29, 2010 06:55 by brettb


Initial Code
//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("");
    }
};

Initial URL


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

Initial Title
Aria in Widgets

Initial Tags


Initial Language
JavaScript