OAA WIDGET_6: Child roles must be contained by the proper parent role
Details
- For each valid role that is required to have a container, check to make sure the role is housed in the appropiate container.
Rulesets
- WCAG 2.0 Requirement 4.1.2 Name, Role, Value
- Status: Accepted
- Severity: Violation
- Priority: Priority 1
- IITAA 1.0 13.1 Ensure that scripted functions are usable with assistive technologies.
- Type:
- Severity: Violation
- Priority: Priority 1
- Status: Accepted
Markup References
- ARIA 1.0: [role="columnheader"]
- ARIA 1.0: [role="gridcell"]
- ARIA 1.0: [role="listitem"]
- ARIA 1.0: [role="menuitem"]
- ARIA 1.0: [role="menuitemcheckbox"]
- ARIA 1.0: [role="menuitemradio"]
- ARIA 1.0: [role="option"]
- ARIA 1.0: [role="row"]
- ARIA 1.0: [role="rowgroup"]
- ARIA 1.0: [role="rowheader"]
- ARIA 1.0: [role="treeitem"]
Validation Code
Message
The role %1$S must be contained by an element with role %2$S.
Dependencies
None
Context
*[@role]
Parameters
None
Code
function (ruleContext) {
var passed = true;
var roleNameArr = new Array();
//Get the role value
var role = ruleContext.getAttribute("role");
// - a role value of null indicates no role attribute is present in (FF,Opera, Safari, Chrome).
// - '' value indicates the role is set to an empty string for all browsers except
// IE which also returns '' if no role attribute is present
// neither of these values allow for unsupported state to be tested
// Make sure the role value is consistent with IE as you don't want to push a null on the stack
if (role==null)
role='';
var designPatterns = OpenAjax.a11y.aria.designPatterns;
// If there is a valid role and the role is required to have a container check to make sure the role is housed in the appropiate container
if (role != '' && designPatterns[role] && designPatterns[role].container != null) {
for(var i=0; i< designPatterns[role].container.length; i++) {
var xp = "parent::*[@role='" + designPatterns[role].container[i] + "']"; // SMF TODO get direct children only, this includes grandchildren
var xpathResult = OpenAjax.a11y.xpath.evaluate(xp, ruleContext, util.defaultNSResolver, OpenAjax.a11y.xpath.XPathResult.ANY_TYPE, null);
var r = xpathResult.iterateNext();
if (!r) roleNameArr.push(designPatterns[role].container[i]);
}
}
var retMsg = new Array();
retMsg.push (role);
retMsg.push (roleNameArr.toString());
var passed = roleNameArr.length == 0;
return new ValidationResult(passed, [ruleContext], '', '', retMsg);
}
>