cthulhu/test/html/aria-tabpanel.html

264 lines
7.4 KiB
HTML

<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>