Difference between revisions of "Focus order.js"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "(function () { var nl = document.querySelectorAll("[tabindex], button, a[href], area, input, select, textarea, iframe"); var ar = [] var ar_position = 0; var positive ...")
 
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
(function () {
 
(function () {
   var nl = document.querySelectorAll("[tabindex], button, a[href], area, input, select, textarea, iframe");
+
   var gi_order = 1;
  var ar = []
 
  var ar_position = 0;
 
  var positive = [];
 
  var positive_position = 0;
 
  
  for (var i=0; i < nl.length; i++) {
+
traverseFrames(document);
if (!nl[i].hasAttribute('disabled') ) {
 
  if (nl[i].hasAttribute('tabindex') ) {
 
          if ( nl[i].getAttribute('tabindex') == 0 ) {
 
            ar[ar_position] = nl[i];
 
            ar_position++;
 
  
          }
+
  function traverseFrames(doc) {
          else if ( nl[i].getAttribute('tabindex') > 0 ) {
+
// check for sr-only class in current document and then check it's frames
            positive[positive_position] = nl[i];
+
      var nl = doc.querySelectorAll("[tabindex], button, a[href], area, input:not([type=hidden]) , select, textarea, iframe");
            positive_position++;
 
          }
 
      }
 
      else {
 
ar[ar_position] = nl[i];
 
ar_position++;
 
      }
 
    }
 
  }
 
  
  positive.sort(function(a, b) {
+
  initHelper(doc,nl);
    return parseInt(a.getAttribute('tabindex'),10) - parseInt(b.getAttribute("tabindex"),10);
+
// go through for each frame's document if there are any frames
  });
+
var frametypes= ['frame','iframe'];
 +
for (var i=0; i<frametypes.length; i++) {
 +
var myframes=doc.getElementsByTagName(frametypes[i]);
 +
for (var z=0;z<myframes.length;z++) {
 +
try {
 +
  traverseFrames(myframes[z].contentWindow.document);
 +
    }
 +
  catch(e) {
 +
}
 +
}
 +
}
 +
}
 +
 +
function initHelper(doc, nl) {
 +
var ar = [];
 +
var positive = [];
 +
var ar_position = 0;
 +
var positive_position = 0;
  
  for (var i=0; i < positive.length; i++) {
+
 
+
for (var i=0; i < nl.length; i++) {
s = document.createElement('span');
+
if (!nl[i].hasAttribute('disabled') ) {
t = document.createTextNode(i+1);
+
s.appendChild(t);
+
if (nl[i].hasAttribute('tabindex') ) {
s.style.backgroundColor = 'darkblue';
+
if ( nl[i].getAttribute('tabindex') == 0 ) {
s.style.color = 'white';
+
s.style.fontSize = "small";
+
ar[ar_position] = nl[i];
positive[i].parentNode.insertBefore(s,positive[i]);
+
ar_position++;
 
+
}
  }
+
else if ( parseInt(nl[i].getAttribute('tabindex')) > 0 ) {
  for (var i=0; i < ar.length; i++) {
+
positive[positive_position] = nl[i];
s = document.createElement('span');
+
positive_position++;
t = document.createTextNode(positive.length+i+1);
+
}
s.appendChild(t);
+
}
s.style.backgroundColor = 'darkblue';
+
else {  // no tabindex
s.style.color = 'white';
+
s.style.display = "inline-block";
+
ar[ar_position] = nl[i];
s.style.fontSize = "small";
+
ar_position++;
ar[i].parentNode.insertBefore(s,ar[i]);
+
}
  }
+
}
 +
}
 +
   
 +
 +
positive.sort(function(a, b) {
 +
return parseInt(a.getAttribute('tabindex'),10) - parseInt(b.getAttribute("tabindex"),10);
 +
});
  
 +
for (var i=0; i < positive.length; i++) {
 +
s = doc.createElement('span');
 +
t = doc.createTextNode(gi_order);
 +
gi_order++;
 +
s.appendChild(t);
 +
s.style.backgroundColor = 'darkblue';
 +
s.style.color = 'white';
 +
s.style.fontSize = "small";
 +
s.style.paddingLeft = ".1em";
 +
s.style.paddingRight = ".1em";
 +
positive[i].style.border = "thin dotted darkblue ";
 +
positive[i].parentNode.insertBefore(s,positive[i]);
 +
}
 +
for (var i=0; i < ar.length; i++) {
 +
s = doc.createElement('span');
 +
t = doc.createTextNode(gi_order);
 +
gi_order++;
 +
s.appendChild(t);
 +
s.style.backgroundColor = 'darkblue';
 +
s.style.color = 'white';
 +
s.style.display = "inline-block";
 +
s.style.fontSize = "small";
 +
s.style.paddingLeft = ".1em";
 +
s.style.paddingRight = ".1em";
 +
ar[i].style.border = "thin dotted darkblue";
 +
ar[i].parentNode.insertBefore(s,ar[i]);
 +
}
 +
}
 +
 
 
})();
 
})();

Latest revision as of 21:25, 16 December 2017

(function () {

 var gi_order = 1;

traverseFrames(document);

 	function traverseFrames(doc) {

// check for sr-only class in current document and then check it's frames

     var nl = doc.querySelectorAll("[tabindex], button, a[href], area, input:not([type=hidden]) , select, textarea, iframe");	

initHelper(doc,nl); // go through for each frame's document if there are any frames var frametypes= ['frame','iframe']; for (var i=0; i<frametypes.length; i++) { var myframes=doc.getElementsByTagName(frametypes[i]); for (var z=0;z<myframes.length;z++) { try { traverseFrames(myframes[z].contentWindow.document); }

  				catch(e) {

} } } }

function initHelper(doc, nl) { var ar = []; var positive = []; var ar_position = 0; var positive_position = 0;


for (var i=0; i < nl.length; i++) { if (!nl[i].hasAttribute('disabled') ) {

if (nl[i].hasAttribute('tabindex') ) { if ( nl[i].getAttribute('tabindex') == 0 ) {

ar[ar_position] = nl[i]; ar_position++; } else if ( parseInt(nl[i].getAttribute('tabindex')) > 0 ) { positive[positive_position] = nl[i]; positive_position++; } } else { // no tabindex

ar[ar_position] = nl[i]; ar_position++; } } }


positive.sort(function(a, b) { return parseInt(a.getAttribute('tabindex'),10) - parseInt(b.getAttribute("tabindex"),10); });

for (var i=0; i < positive.length; i++) { s = doc.createElement('span'); t = doc.createTextNode(gi_order); gi_order++; s.appendChild(t); s.style.backgroundColor = 'darkblue'; s.style.color = 'white'; s.style.fontSize = "small"; s.style.paddingLeft = ".1em"; s.style.paddingRight = ".1em"; positive[i].style.border = "thin dotted darkblue "; positive[i].parentNode.insertBefore(s,positive[i]); } for (var i=0; i < ar.length; i++) { s = doc.createElement('span'); t = doc.createTextNode(gi_order); gi_order++; s.appendChild(t); s.style.backgroundColor = 'darkblue'; s.style.color = 'white'; s.style.display = "inline-block"; s.style.fontSize = "small"; s.style.paddingLeft = ".1em"; s.style.paddingRight = ".1em"; ar[i].style.border = "thin dotted darkblue"; ar[i].parentNode.insertBefore(s,ar[i]); } }

})();