<html>
<head>
<title>Tabbed UI</title>
<style type="text/css">
.tab {
  color: navy;
  background-color: lightgrey;
  border: thin solid navy;
  text-align: center;
  font: 9pt Verdana,sans-serif;
  padding: 4px;
  padding-left: 2em;
  padding-right: 2em;
}

.tabActive {
  color:black;
  font-weight:bold;
  border:thin dashed black;
  background-color: beige;
  border-bottom: thin solid beige;
  border-left: thin solid navy;
  border-top: thin solid navy;
  border-right: thin solid navy;
}

div[aria-hidden="true"] { display: none; }

.panel {
  position: relative;
  top: 3px;
  background-color: beige;
  color: navy;
  width: 95%;
  height: 85%;
  font: 12pt Verdana,sans-serif;
  border: thin solid navy;
  padding: 10px;
  overflow: auto;
}

</style>

<script>
<!--
// global to store the item to be focused
gFocusItem = null;

function doFocus()
{
    if (gFocusItem != null) {
      gFocusItem.focus();
      gFocusItem=null;
    }
}

var KEY_UP = 38;
var KEY_DOWN = 40;
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_ESCAPE = 27;
var KEY_M = 77;
var KEY_F10 = 121;
var KEY_SPACE = 32;
var KEY_TAB = 9;
var KEY_PAGEUP = 33;
var KEY_PAGEDOWN = 34;

// globals to store current tab information
var gCurrentTabNum = -1;
var gNumTabs = 5;

function selectTab(nextTabNum)
{
  var newTab = document.getElementById("tab" + nextTabNum);
  gFocusItem = newTab;
  setTimeout("doFocus()", 0);
}

function doNavigation(event)
{
  var key = event.keyCode; //alert(key);
  var bEventContinue = true;
  var nextTabNum;
  var bDoNextTab = true;  // requires less code if init to true
  var bCtrlKey = event.ctrlKey;
  var bAltKey = event.altKey;
  var direction = 0;
  var bCycle = false;
  if ((key == KEY_LEFT || key == KEY_RIGHT) && !bAltKey) {
    bCycle = false;
    bEventContinue = false;
    if (key == KEY_RIGHT) {
      direction = 1;
    }
    else if (key == KEY_LEFT) {
      direction = -1;
    }
  }
  else if (bCtrlKey && event.shiftKey) {
    bCycle = true;  //ctrl-shift-pageup, ctrl-shift-pagedown,
    switch (key) {
    case KEY_PAGEUP:
      direction = -1;
      break;
    case KEY_PAGEDOWN:
      direction = 1;
      break;
    default:
      bDoNextTab = false;
      break;
    } // end switch
  } // end of if ctrlKey and shiftKey
  else {
    // not a key we care about
    bDoNextTab = false;
  }

  if (bDoNextTab == true) {
    if (direction > 0) {
      nextTabNum = gCurrentTabNum + 1;
    }
    else if  (direction < 0) {
      nextTabNum = gCurrentTabNum -1;
    }
    if (nextTabNum == gNumTabs && bCycle == true) {
      nextTabNum = 0;
    }
    else if (nextTabNum < 0 && bCycle == true) {
      nextTabNum = gNumTabs -1;
    }
    else if ((nextTabNum == gNumTabs || nextTabNum < 0) && bCycle == false)  {
      bDoNextTab = false; // do nothing
    }
    // test again - last section may have changed value of bDoNextTab
    if (bDoNextTab == true)  {
      selectTab(nextTabNum);
    }
  }

  return bEventContinue;
}

function handleFocus(event)
{
  var newTab = event.target;
  if (newTab.getAttribute("role") != "tab")
    return;

  newTabNum = parseInt(newTab.id.charAt(3));
  if (newTabNum == gCurrentTabNum)
    return;

  if (gCurrentTabNum >= 0) {
    var curTab = document.getElementById("tab" + gCurrentTabNum);
    var curPanel = document.getElementById("panel" + gCurrentTabNum);
    curPanel.setAttribute("aria-hidden", "true");
    curPanel.className += ""; // Force refresh of attribute selectors
    curTab.setAttribute("class", "tab");
    curTab.tabIndex = "-1";
  }

  var newTab = document.getElementById("tab" + newTabNum);
  var newPanel = document.getElementById("panel" + newTabNum);
  newPanel.removeAttribute("aria-hidden");
  newPanel.className += ""; // Force refresh of attribute selectors
  newTab.setAttribute("class", "tab tabActive");
  newTab.tabIndex = "0";

  gCurrentTabNum = newTabNum;
}

-->
</script>
<style type="text/css"></style></head>
<body onload="selectTab(0);">
<div role="tablist" onkeydown="return doNavigation(event);">
  <span id="tab0" tabindex="0" class="tab tabActive" role="tab" onclick="selectTab(0);" onfocus="handleFocus(event);">
    Tab Zero
  </span>
  <span id="tab1" tabindex="-1" class="tab" role="tab" onclick="selectTab(1);" onfocus="handleFocus(event);">
    Tab One
  </span>
  <span id="tab2" tabindex="-1" class="tab" role="tab" onclick="selectTab(2);" onfocus="handleFocus(event);">
    Tab Two
  </span>
  <span id="tab3" tabindex="-1" class="tab" role="tab" onclick="selectTab(3);" onfocus="handleFocus(event);">
    Tab Three
  </span>
  <span id="tab4" tabindex="-1" class="tab" role="tab" onclick="selectTab(4);" onfocus="handleFocus(event);">
    Tab Four
  </span>
</div>

<div id="tabpanels" role="presentation">
  <div id="panel0" class="panel" tabindex="-1" role="tabpanel" aria-labelledby="tab0">
    <span>Panel 0</span>
    <p>This example requires Firefox 3 or later to work with screen readers -- it
       uses ARIA properties without namespaces, which is now the correct
       markup.</p>
    <div>Use tab key to reach the tab. Once a tab has focus use:
      <ul>
        <li>left and right arrows to move from tab to tab. Panel is made visible when
            tab gets focus. Arrow keys do not cycle around the tabs</li>
        <li>ctrl-left and ctrl-right arrows behave the same as left and right arrows</li>
        <li>ctrl-shift-pageup / ctrl-shift-pagedown is the same as left and right arrows but WILL
            cycle around the tab order (shift was added as a modifier so as not to
            conflict with the Firefox tabbing keys)</li>
        <li>Ctrl-shift-tab /ctrl-tab are not implemented since these keys conflict with browser tab switching keys.</li>
      </ul>
    </div>
  </div>

  <div id="panel1" class="panel" tabindex="-1" role="tabpanel" aria-hidden="true" aria-labelledby="tab1">
    <span>Panel 1</span>
    <div>Some fields on the panel </div>
    <div>
      <p>Enter month and year: <label for="month">Select Month</label>
      <select id="month">
      <option value="1">01</option>
      <option value="2">02</option>
      <option value="3">03</option>
      <option value="4">04</option>
      <option value="5">05</option>
      <option value="6">06</option>
      <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      </select>
      <label for="year">Select Year</label>
      <select id="year">
      <option value="2004">2004</option>
      <option value="2005">2005</option>
      <option value="2006">2006</option>
      </select>
      </p>
    </div>
  </div>

  <div id="panel2" class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="tab2">
    <span>Panel 2</span>
    <div>Some fields on the panel</div>
    <div>
        <input id="internal" name="urlType" value="internal" checked="true" type="radio"><label for="internal">Internal Portal Bookmark</label>
        <input id="external" name="urlType" value="external" type="radio"><label for="external">External URL</label>
        <br><label for="externalAssoc">URL: </label><input id="externalAssoc" value="" type="text">
        <hr>
    </div>
  </div>

  <div id="panel3" class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="tab3">
    <span>Panel 3</span>
  </div>

  <div id="panel4" class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="tab4">
    <span>Panel 4</span>
  </div>
</div> 
</body>
</html>