Recently, I have been testing a PrimeFaces web application using the WAVE browser extension.
I noticed some unusual behavior when I tried to analyze a page that contained a PrimeFaces data table with radio buttons for selecting rows.
The radio buttons needed to have a label associated with them, or else WAVE would report an accessibility error for each button.
I managed to get around this by running the following Javascript code on page load:
Code: Select all
// This code was taken from the Mozilla tutorial on XPath.
function evaluateXPath(aNode, aExpr) {
const xpe = new XPathEvaluator();
const nsResolver = xpe.createNSResolver(
aNode.ownerDocument === null
? aNode.documentElement
: aNode.ownerDocument.documentElement
);
const result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
const found = [];
let res;
while ((res = result.iterateNext())) found.push(res);
return found;
}
$(document).ready(function() {
var radioButtonInputs = evaluateXPath(document, "//input[@type='radio']");
var radioButtonDivs = evaluateXPath(document, "//div[input/@type='radio']");
var i;
for(i = 0; radioButtonInputs.length > i; i++)
{
var radioButtonInput = radioButtonInputs[i];
radioButtonInput.setAttribute("id", "inputRadio" + i);
var radioButtonDiv = radioButtonDivs[i];
var textNode = document.createElement("label");
textNode.innerHTML = "Select this user";
textNode.setAttribute("for", "inputRadio" + i);
radioButtonDiv.appendChild(textNode);
}
});