JavaScript ARIA Role equivalent of nodeName

August 5, 2022

If I want to get the nodeName for all HTML ins elements I can use

nodes =       document.querySelectorAll("ins");
        for (let n = 0; n < nodes.length; n++) {
          nodes[n].setAttribute("data-name-prohibited", nodes[n].nodeName);
        }

This returns data-name-prohibited="ins”

I want to get the ARIA Role type

nodes = document.querySelectorAll("[role=insertion]");
        for (let n = 0; n < nodes.length; n++) {
          nodes[n].setAttribute("data-name-prohibited", nodes[n].roleName);
        }

roleName is just an example. What I want is data-name-prohibited="insertion"

>Solution :

You can get the role attribute value and pass that to the data-name-prohibited attribute.

const nodes = document.querySelectorAll("[role=insertion]");
for (let n = 0; n < nodes.length; n++) {
  const currentNode = nodes[n];
  const role = currentNode.getAttribute('role');
  currentNode.setAttribute("data-name-prohibited", role);
}

But if you use the [role=insertion] query, then you already know the role value, so you could simply hardcode it.

const role = 'insertion';
const nodes = document.querySelectorAll(`[role=${role}]`);
for (let n = 0; n < nodes.length; n++) {
  nodes[n].setAttribute("data-name-prohibited", role);
}