Difference between revisions of "ARIA Tabs- Javascript"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
NOT COMPLETED: still debuggin
 
 
 
<html lang="en-us">
 
<html lang="en-us">
 
<head>
 
<head>
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
<title>ARIA Tab List and Tab Panels</title>
+
<title>Tab List and Tab Panels</title>
 
<style>
 
<style>
 
body{font-family:verdana, arial, 'sans-serif'; font-size:100%;}
 
body{font-family:verdana, arial, 'sans-serif'; font-size:100%;}
h1{font-size:1.5rem;}  
+
h1{font-size:1.5rem;}
 
h2{font-size:1.25rem;}
 
h2{font-size:1.25rem;}
  
Line 21: Line 19:
  
 
.off-screen{height:1; left:-500px; overflow:hidden; position: absolute; top:0; width:1;}
 
.off-screen{height:1; left:-500px; overflow:hidden; position: absolute; top:0; width:1;}
 
 
  
 
.tab-container ul li:focus{border:2px solid red;}
 
.tab-container ul li:focus{border:2px solid red;}
Line 72: Line 68:
 
activeElem= links[i];
 
activeElem= links[i];
 
links[i].addEventListener("keydown", navigateTabs);
 
links[i].addEventListener("keydown", navigateTabs);
 +
links[i].addEventListener("click", activatePanels, false);
 
}
 
}
 
};
 
};
  
 +
function activatePanels(elem){
 +
this.setAttribute('aria-selected', 'true');
 +
this.setAttribute('tabindex', '0');
 +
 +
var aParent=this.parentNode;
 +
var nextSib= aParent.nextElementSibling;
 +
var prevSib=aParent.previousElementSibling;
 +
if(nextSib !=null){//For IE
 +
nextSib.childNodes[0].setAttribute('aria-selected', 'false');
 +
nextSib.childNodes[0].setAttribute('tabindex', '-1');
 +
nextSib.removeAttribute('class');
 +
}
 +
 +
if (prevSib != null){
 +
prevSib.childNodes[0].setAttribute('aria-selected', 'false');
 +
prevSib.childNodes[0].setAttribute('tabindex', '-1');
 +
prevSib.removeAttribute('class');
 +
}
 +
aParent.setAttribute('class', 'selected');
 +
setPanel(this);
 +
 +
}
  
//todo: need to DRY this out a bit more
 
 
function navigateTabs(e){
 
function navigateTabs(e){
 
     e = e || window.event;
 
     e = e || window.event;
Line 99: Line 117:
 
   
 
   
 
    if (e.which==32){      
 
    if (e.which==32){      
    setPanel(e, activeElem);
+
    setPanel(activeElem);
 
    var aParent=activeElem.parentNode;
 
    var aParent=activeElem.parentNode;
    aParent.nextElementSibling.childNodes[0].setAttribute('aria-selected', 'false');
+
    if (aParent.nextElementSibling != null){
    aParent.previousElementSibling.childNodes[0].setAttribute('aria-selected', 'false');
+
    aParent.nextElementSibling.childNodes[0].setAttribute('aria-selected', 'false');
 +
    }
 +
   
 +
    if (aParent.previousElementSibling != null){
 +
    aParent.previousElementSibling.childNodes[0].setAttribute('aria-selected', 'false');
 +
    }
 +
   
 
    activeElem.setAttribute('aria-selected', 'true');
 
    activeElem.setAttribute('aria-selected', 'true');
 
    activeElem.setAttribute('tabindex', '0');
 
    activeElem.setAttribute('tabindex', '0');
Line 115: Line 139:
 
}
 
}
  
function setPanel(e, activeElem){
+
function setPanel(activeElem){
 
var eID= activeElem.getAttribute('id').toString();
 
var eID= activeElem.getAttribute('id').toString();
 
var pID= null;
 
var pID= null;

Revision as of 13:46, 17 April 2014

Tab List and Tab Panels

ARIA Tabs and Tab Panels

Home Information

This is information regarding the home tab

Our Services and What we Do

This is information regarding the Services tab

General Information About Accessibility

This is information regarding the General tab

Who We Are

This is information regarding the About Us

Ways to Contact Us

This is information about the Contact us tab