Difference between revisions of "ARIA Tabs- Javascript"

From Level Access Web Labs
Jump to navigation Jump to search
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Note: Page is still in debugging mode.
 
 
 
<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 45: Line 41:
 
<div role="panel" id="tabpanel2" class="panel container-hidden" aria-labelledby="tab2" tabindex="-1">
 
<div role="panel" id="tabpanel2" class="panel container-hidden" aria-labelledby="tab2" tabindex="-1">
 
<h2>Our Services and What we Do</h2>
 
<h2>Our Services and What we Do</h2>
<p>This is information regarding the Services tab</p>
+
<p>This is information regarding the Services tab</p> Visit the <a href="http://www.ssbbartgroup.com">SSB BART Group website</a> to learn more.  <p>You can also send us an email. 
 +
<button id="btncontact">Contact Us</button>
 
</div>
 
</div>
 
<div role="panel" id="tabpanel3" class="panel container-hidden" aria-labelledby="tab3" tabindex="-1">
 
<div role="panel" id="tabpanel3" class="panel container-hidden" aria-labelledby="tab3" tabindex="-1">
Line 72: Line 69:
 
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 118:
 
   
 
   
 
    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 140:
 
}
 
}
  
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;

Latest revision as of 13:06, 12 February 2016

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

Visit the SSB BART Group website to learn more.

You can also send us an email.

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