root / dijit / trunk / _base / wai.js

dojo.provide("dijit._base.wai");

dijit.wai = {
        onload: function(){
                // summary:
                //              Detects if we are in high-contrast mode or not

                // This must be a named function and not an anonymous
                // function, so that the widget parsing code can make sure it
                // registers its onload function after this function.
                // DO NOT USE "this" within this function.

                // create div for testing if high contrast mode is on or images are turned off
                var div = dojo.create("div",{
                        id: "a11yTestNode",
                        style:{
                                cssText:'border: 1px solid;'
                                        + 'border-color:red green;'
                                        + 'position: absolute;'
                                        + 'height: 5px;'
                                        + 'top: -999px;'
                                        + 'background-image: url("' + (dojo.config.blankGif || dojo.moduleUrl("dojo", "resources/blank.gif")) + '");'
                        }
                }, dojo.body());

                // test it
                var cs = dojo.getComputedStyle(div);
                if(cs){
                        var bkImg = cs.backgroundImage;
                        var needsA11y = (cs.borderTopColor == cs.borderRightColor) || (bkImg != null && (bkImg == "none" || bkImg == "url(invalid-url:)" ));
                        dojo[needsA11y ? "addClass" : "removeClass"](dojo.body(), "dijit_a11y");
                        if(dojo.isIE){
                                div.outerHTML = "";             // prevent mixed-content warning, see http://support.microsoft.com/kb/925014
                        }else{
                                dojo.body().removeChild(div);
                        }
                }
        }
};

// Test if computer is in high contrast mode.
// Make sure the a11y test runs first, before widgets are instantiated.
if(dojo.isIE || dojo.isMoz){    // NOTE: checking in Safari messes things up
        dojo._loaders.unshift(dijit.wai.onload);
}

dojo.mixin(dijit, {
        _XhtmlRoles: /banner|contentinfo|definition|main|navigation|search|note|secondary|seealso/,

        hasWaiRole: function(/*Element*/ elem, /*String*/ role){
                // summary:
                //              Determines if an element has a particular non-XHTML role.
                // returns:
                //              True if elem has the specific non-XHTML role attribute and false if not.
                //              For backwards compatibility if role parameter not provided,
                //              returns true if has non XHTML role
                var waiRole = this.getWaiRole(elem);
                return role ? (waiRole.indexOf(role) > -1) : (waiRole.length > 0);
        },

        getWaiRole: function(/*Element*/ elem){
                // summary:
                //              Gets the non-XHTML role for an element (which should be a wai role).
                // returns:
                //              The non-XHTML role of elem or an empty string if elem
                //              does not have a role.
                 return dojo.trim((dojo.attr(elem, "role") || "").replace(this._XhtmlRoles,"").replace("wairole:",""));
        },

        setWaiRole: function(/*Element*/ elem, /*String*/ role){
                // summary:
                //              Sets the role on an element.
                // description:
                //              Replace existing role attribute with new role.
                //              If elem already has an XHTML role, append this role to XHTML role
                //              and remove other ARIA roles.

                var curRole = dojo.attr(elem, "role") || "";
                if(!this._XhtmlRoles.test(curRole)){
                        dojo.attr(elem, "role", role);
                }else{
                        if((" "+ curRole +" ").indexOf(" " + role + " ") < 0){
                                var clearXhtml = dojo.trim(curRole.replace(this._XhtmlRoles, ""));
                                var cleanRole = dojo.trim(curRole.replace(clearXhtml, ""));
                                dojo.attr(elem, "role", cleanRole + (cleanRole ? ' ' : '') + role);
                        }
                }
        },

        removeWaiRole: function(/*Element*/ elem, /*String*/ role){
                // summary:
                //              Removes the specified non-XHTML role from an element.
                //              Removes role attribute if no specific role provided (for backwards compat.)

                var roleValue = dojo.attr(elem, "role");
                if(!roleValue){ return; }
                if(role){
                        var t = dojo.trim((" " + roleValue + " ").replace(" " + role + " ", " "));
                        dojo.attr(elem, "role", t);
                }else{
                        elem.removeAttribute("role");
                }
        },

        hasWaiState: function(/*Element*/ elem, /*String*/ state){
                // summary:
                //              Determines if an element has a given state.
                // description:
                //              Checks for an attribute called "aria-"+state.
                // returns:
                //              true if elem has a value for the given state and
                //              false if it does not.

                return elem.hasAttribute ? elem.hasAttribute("aria-"+state) : !!elem.getAttribute("aria-"+state);
        },

        getWaiState: function(/*Element*/ elem, /*String*/ state){
                // summary:
                //              Gets the value of a state on an element.
                // description:
                //              Checks for an attribute called "aria-"+state.
                // returns:
                //              The value of the requested state on elem
                //              or an empty string if elem has no value for state.

                return elem.getAttribute("aria-"+state) || "";
        },

        setWaiState: function(/*Element*/ elem, /*String*/ state, /*String*/ value){
                // summary:
                //              Sets a state on an element.
                // description:
                //              Sets an attribute called "aria-"+state.

                elem.setAttribute("aria-"+state, value);
        },

        removeWaiState: function(/*Element*/ elem, /*String*/ state){
                // summary:
                //              Removes a state from an element.
                // description:
                //              Sets an attribute called "aria-"+state.

                elem.removeAttribute("aria-"+state);
        }
});