Radio Navigation Menu
Radio Example 1
Validate DOM (HTML5)
Lunch Options
- Thai
- Subway
- Jimmy Johns
- Radio Maria
- Rainbow Gardens
Drink Options
- Water
- Tea
- Coffee
- Cola
- Ginger Ale
Keyboard Shortcuts
- Tab: Move focus between radio button groups
- If no radio button has been checked, TAB moves focus to the first radio button in the group, but does not check the radio button
- If no radio button has been checked, SHIFT+TAB moves focus to the last radio button in the group, but does not check the radio button
- if a radio button is checked, TAB and SHIFT+TAB move focus to the radio button that is checked
- Up Arrow: Move focus to the radio button before the current radio button with focus, if the first radio button has focus, focus is moved to the last radio button. The radio button is checked.
- Down Arrow: Move focus to the radio button after the current radio button with focus, if the last radio button has focus, focus is moved to the first radio button. The radio button is checked.
- Space Bar: Checks the radio button that currently has focus
ARIA Roles and Properties used
-
Roles:
role="application"role="radiogroup"role="radio"
- States and properties:
aria-checkedaria-labelledby
Compatible Browsers
HTML Version
- Internet Explorer 6.0+
- Mozilla Firefox 1.5+
xhtml Version
HTML Source Code
Show HTML Source Code: radio1_inline.inc
<div role="application">
<!--
The id attriute of elements are used to identify which elements to initialize as Radio Group and Radio buttons.
The init() method of the Radio Group will be used to intialize Radio group and Radio button widgets.
-->
<script type="text/javascript">
rg1 = new RadioGroup("rg1");
widgets.add(rg1);
r1 = new Radio("r1");
rg1.add(r1);
r2 = new Radio("r2");
rg1.add(r2);
r3 = new Radio("r3");
rg1.add(r3);
r4 = new Radio("r4");
rg1.add(r4);
r5 = new Radio("r5");
rg1.add(r5);
rg2 = new RadioGroup("rg2");
widgets.add(rg2);
r6 = new Radio("r6");
rg2.add(r6);
r7 = new Radio("r7");
rg2.add(r7);
r8 = new Radio("r8");
rg2.add(r8);
r9 = new Radio("r9");
rg2.add(r9);
r10 = new Radio("r10");
rg2.add(r10);
</script>
<!-- Start of first Radio Group -->
<h3 id="rg1_label">Lunch Options</h3>
<ul id="rg1"
role="radiogroup"
aria-labelledby="rg1_label"
>
<li id="r1" tabindex="0" role="radio" aria-checked="false">Thai</li>
<li id="r2" tabindex="-1" role="radio" aria-checked="false">Subway</li>
<li id="r3" tabindex="-1" role="radio" aria-checked="false">Jimmy Johns</li>
<li id="r4" tabindex="-1" role="radio" aria-checked="false">Radio Maria</li>
<li id="r5" tabindex="0" role="radio" aria-checked="false">Rainbow Gardens</li>
</ul>
<!-- Start of second Radio Group -->
<h3 id="rg2_label">Drink Options</h3>
<ul id="rg2"
tabindex="-1"
role="radiogroup"
aria-labelledby="rg2_label"
>
<li id="r6" tabindex="0" role="radio" aria-checked="false">Water</li>
<li id="r7" tabindex="-1" role="radio" aria-checked="false">Tea</li>
<li id="r8" tabindex="-1" role="radio" aria-checked="true">Coffee</li>
<li id="r9" tabindex="-1" role="radio" aria-checked="false">Cola</li>
<li id="r10" tabindex="0" role="radio" aria-checked="false">Ginger Ale</li>
</ul>
</div>
Javascript Source Code
Show Javascript Source Code: globals.js
<script type="text/javascript">
/**
*
* The Globale Variables
*/
if (!window.Node) {
var Node = { // If there is no Node object, define one
ELEMENT_NODE: 1, // with the following properties and values.
ATTRIBUTE_NODE: 2, // Note that these are HTML node types only.
TEXT_NODE: 3, // For XML-specific nodes, you need to add
COMMENT_NODE: 8, // other constants here.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
var KEY_PAGEUP = 33;
var KEY_PAGEDOWN = 34;
var KEY_END = 35;
var KEY_HOME = 36;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_SPACE = 32;
var KEY_TAB = 9;
var KEY_BACKSPACE = 8;
var KEY_DELETE = 46;
var KEY_ENTER = 13;
var KEY_INSERT = 45;
var KEY_ESCAPE = 27;
var KEY_F1 = 112;
var KEY_F2 = 113;
var KEY_F3 = 114;
var KEY_F4 = 115;
var KEY_F5 = 116;
var KEY_F6 = 117;
var KEY_F7 = 118;
var KEY_F8 = 119;
var KEY_F9 = 120;
var KEY_F10 = 121;
var KEY_M = 77;
var NS_XHTML = "http://www.w3.org/1999/xhtml"
var NS_STATE = "http://www.w3.org/2005/07/aaa";
// **********************************************
// *
// * Commonly used helper functions
// *
// **********************************************
/**
*
* nextSiblingElement
*
* @contructor
*/
function nextSiblingElement( node ) {
var next_node = node.nextSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* previousSiblingElement
*
* @param ( node ) node object for which you are looking for the next sibling element node
*
* @return ( node) next sibling or "null"
*/
function previousSiblingElement( node ) {
var next_node = node.previousSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.previousSibling;
} // endwhile
return next_node;
}
/**
*
* firstChildElement
*
* @param ( node ) node object for which you are looking for the first child element node
*
* @return ( node) next sibling or "null"
*/
function firstChildElement( node ) {
var next_node = node.firstChild;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* getTextContentOfNode
*
* @contructor
*/
function getTextContentOfNode( node ) {
var next_node = node.firstChild;
var str = "";
while( next_node ) {
if( (next_node.nodeType == Node.TEXT_NODE ) &&
(next_node.length > 0 )
)
str += next_node.data;
next_node = next_node.nextSibling;
} // endwhile
return str;
}
/**
*
* setTextContentOfNode
*
* @contructor
*/
function setTextContentOfNode( node, text ) {
// Generate a new text node with the text value
var text_node = document.createTextNode(text);
// Remove child nodes to remove text
while (node.firstChild) {
node.removeChild(node.firstChild);
} // while
// Append new text to the container element
node.appendChild( text_node );
}
</script>
Show Javascript Source Code: widgets_inline.js
<script type="text/javascript">
// JavaScript Document
if (!window.Node) {
var Node = { // If there is no Node object, define one
ELEMENT_NODE: 1, // with the following properties and values.
ATTRIBUTE_NODE: 2, // Note that these are HTML node types only.
TEXT_NODE: 3, // For XML-specific nodes, you need to add
COMMENT_NODE: 8, // other constants here.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
var ARIA_STATE = "aria-";
/**
* Widgets Object is used to initialize a set of controls
* and provide a conveinence fuction to cancel event propagration
* @construtor
*/
function Widgets() {
this.widgets = new Array();
}
/**
* add is member of the Widgets Object
* and used add a widget ot the list of widgets to be intitialized
* as part of the onload event
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.add = function(obj) {
this.widgets[this.widgets.length] = obj;
}
/**
* init is member of the Widgets Object
* and is called by the onload event to initialize widgets in the web resource
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.init = function() {
for(var i = 0; i < this.widgets.length; i++ )
this.widgets[i].init();
}
//
// convience function for getting the node based on id
function _$( id ) {
return document.getElementById( id );
}
//
// WebBrowser object to abstract accessibility API differences between web standards supporting browsers and Internet Explorer 7.0
//
// The state variable keeps track of current state of checkbox
function WebBrowser() {
}
//
// keyCode is a function to get the keycode from a keypress event
//
// @param ( event object) event is an event object
//
// @return ( keycode )
WebBrowser.prototype.keyCode = function( event ) {
var e = event || window.event;
return e.keyCode;
}
/**
* OnClick Event Simulator
*
* @param ( node ) DOM node object
* @return nothing
*/
if( document.createEvent ) {
// If a web standards based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
// W3C DOM Events way to trigger a "click" event
var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
node.dispatchEvent( e );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
var e = document.createEventObject();
node.fireEvent( "onclick", e );
} // endif
}
if ( document.addEventListener ) {
// If a web standards based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( clickHandler )
document.addEventListener( "click", clickHandler, true );
if( downHandler )
document.addEventListener( "mousedown", downHandler, true );
if( moveHandler )
document.addEventListener( "mousemove", moveHandler, true );
if( upHandler)
document.addEventListener( "mouseup", upHandler, true );
}
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler)
document.removeEventListener( "mouseup", upHandler, true );
if( moveHandler )
document.removeEventListener( "mousemove", moveHandler, true );
if( downHandler )
document.removeEventListener( "mousedown", downHandler, true );
if( clickHandler )
document.removeEventListener( "click", clickHandler, true );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
node.setCapture();
if( clickHandler)
node.attachEvent( "onclick", clickHandler );
if( downHandler)
node.attachEvent( "onmousedown", downHandler );
if( moveHandler )
node.attachEvent( "onmousemove", moveHandler );
if( upHandler )
node.attachEvent( "onmouseup", upHandler );
} // endif
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler )
node.detachEvent( "onmouseup", upHandler );
if( moveHandler )
node.detachEvent( "onmousemove", moveHandler );
if( downHandler)
node.detachEvent( "onmousedown", downHandler );
if( clickHandler)
node.detachEvent( "onclick", clickHandler );
node.releaseCapture();
} // endif
}
if (typeof document.documentElement.setAttributeNS != 'undefined') {
WebBrowser.prototype.stopPropagation = function( event ) {
event.stopPropagation();
event.preventDefault();
return false;
}
WebBrowser.prototype.target = function( event ) {
return event.target;
}
WebBrowser.prototype.attrName = function( event ) {
return event.attrName
}
WebBrowser.prototype.charCode = function(event) {
return event.charCode;
}
WebBrowser.prototype.calculateOffsetLeft = function( node ) {
return node.offsetLeft;
}
WebBrowser.prototype.calculateOffsetTop = function( node ) {
return node.offsetTop;
}
WebBrowser.prototype.pageX = function( e ) {
return e.pageX;
}
WebBrowser.prototype.pageY = function( e ) {
return e.pageY;
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
node.style.left = left+"px";
node.style.top = top+"px";
}
} else {
WebBrowser.prototype.stopPropagation = function( event ) {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
WebBrowser.prototype.charCode = function(event) {
return window.browser.keyCode( event );
}
WebBrowser.prototype.target = function( event ) {
return event.srcElement;
}
WebBrowser.prototype.attrName = function( event ) {
return event.propertyName;
}
WebBrowser.prototype.calculateOffsetLeft = function(node) {
var offset = 0;
while( node ) {
offset += node.offsetLeft;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.calculateOffsetTop = function(node) {
var offset = 0;
while( node ) {
offset = offset + node.offsetTop;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.pageX = function( e ) {
return e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
}
WebBrowser.prototype.pageY = function( e ) {
return e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
offsetx = 0;
offsety = 0;
nnode = node.offsetParent
while( nnode ) {
offsetx = offsetx + nnode.offsetLeft;
offsety = offsety + nnode.offsetTop;
nnode = nnode.offsetParent;
}
node.style.left = left-offsetx+"px";
node.style.top = top-offsety+"px";
}
};
if (document.addEventListener) {
// Functions for W3C Standards compliant implementation of adding event handlers
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.addEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.removeEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
elmTarget.addEventListener("DOMAttrModified", fCallback, false);
returnValue = true;
};
} else {
if(document.attachEvent) {
// IE Specific Event handler functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.attachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.detachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
returnValue = elmTarget.attachEvent("onpropertychange", fCallback);
};
} else {
// For browsers that do not support W3C or IE event functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
return false;
};
}
}
widgets_flag = true;
var widgets = new Widgets();
var browser = new WebBrowser();
function initApp() {
widgets.init();
}
</script>
Show Javascript Source Code: radio1_inline.js
<script type="text/javascript">
/**
*
* The RadioGroup object is used to maintain information about a radio group widget
* including the collection of Radio button objects
*
* @constructor
*/
function RadioGroup( id ) {
this.id = id;
this.radio_buttons = new Array();
this.radio_selected = -1;
this.radio_focus = -1;
} // end RadioGroup
/**
* init is a subclass of RadioGroup and is used to initialize the event handlers and
* radio buttons of a radio group.
*
* @member RadioGroup
*
* @return none
*/
RadioGroup.prototype.init = function() {
var obj = this;
this.node = document.getElementById( this.id );
// Initialize radio Buttons
for(var i = 0; i < this.radio_buttons.length; i++ ) {
this.radio_buttons[i].init();
} // endfor
// Check to see if any radio buttons is selected in the group from markup
for(var i = 0; i < this.radio_buttons.length; i++ ) {
if( this.radio_buttons[i].node.getAttribute("aria-checked") =="true") {
this.radio_buttons[i].node.className = "";
selectRadioButton( this, i, (0) );
}
} // endfor
// Add event handlers for first and last radio buttons to emulate IE radio button behavior for TAB navigation
browser.addEvent(this.radio_buttons[0].node, "focus", function(event) {handleRadioFirstFocus(event, obj);}, false);
browser.addEvent(this.radio_buttons[0].node, "blur", function(event) {handleRadioFirstBlur(event, obj);}, false);
browser.addEvent(this.radio_buttons[this.radio_buttons.length-1].node, "focus", function(event) {handleRadioLastFocus(event, obj);}, false);
browser.addEvent(this.radio_buttons[this.radio_buttons.length-1].node, "blur", function(event) {handleRadioLastBlur(event, obj);}, false);
// Add event handlers for selecting a radio button
browser.addEvent(this.node, "keydown", function(event) {handleRadioGroupKeyDownEvent(event, obj);}, false);
browser.addEvent(this.node, "click", function(event) {handleRadioGroupClickEvent(event, obj);}, false);
} // end RadioGroup.prototype.init
/**
* add is a subclass of RadioGroup and adds a Radio object to the RadioGroup list
*
* @member RadioGroup
*
* @param ( Radio object ) obj Radio button to be added to radio button list
*
* @return none
*/
RadioGroup.prototype.add = function( obj ) {
this.radio_buttons[this.radio_buttons.length] = obj;
} // end RadioGroup.prototype.add
/**
* selectRadioButton is called by event handlers to select one of the radio buttons in a group
*
* @param ( RadioGroup object ) radio_group Radio Group to change selected radio button
* @param ( integer ) index Index of radio button to be selected
* @param ( integer ) focus_flag If value is set to 1 then keyboard focus will be moved to the selected radio button
*
* @return none
*/
function selectRadioButton( radio_group, index, focus_flag ) {
// Check to see if index is larger than the number of buttons, if so wrap to first button
if( index >= radio_group.radio_buttons.length )
index = 0;
// Check to see if index is less than zero, if so wrap to last radio button
if( index < 0)
index = radio_group.radio_buttons.length - 1;
// Check to make sure the index value is valid before changing states
if( (index >= 0 ) && (index < radio_group.radio_buttons.length) ) {
// Set all radio buttons to not selected
// CSS selectors based on the "checked" attribute value change the visual rendering
// The checked attribute is used communicate radio button state information to assitive technologies
// Tabindex is set to -1 so the control can still receive focus, but is removed from tab order
for(var i = 0; i < radio_group.radio_buttons.length; i++ ) {
radio_group.radio_buttons[i].node.setAttribute("aria-checked","false");
// Kick IE 7 to update styling based on ARIA attribute
radio_group.radio_buttons[i].node.className = "";
radio_group.radio_buttons[i].node.tabIndex = -1;
} // endfor
// Set radio button based on the index value
// CSS selectors based on the "checked" attribute change the visual rendering
// The checked attribute is used communicate radio button state information to assitive technologies
// Tabindex is set to 0 so the control is added to tab order
radio_group.radio_buttons[index].node.setAttribute("aria-checked","true");
// Kick IE 7 to update styling based on ARIA attribute
radio_group.radio_buttons[index].node.className += "";
radio_group.radio_buttons[index].node.tabIndex = 0;
// Check focus flag to see if keyboard focus should be moved to selected control
if( focus_flag == 1 ) {
radio_group.radio_buttons[index].node.focus();
// keep track of the last radio button with focus
radio_group.radio_focus = index;
} // end if
// Keep track of the last radio button selected
// Once a Radio button is selected the RadioGroup is removed from tab order by setting its tabindex to -1
radio_group.radio_selected = index;
radio_group.node.tabIndex = -1;
} // endif
} // end selectRadioButton
/**
*
* The Radio object is used to maintain information about a radio button widget
* including the collection of Radio button objects
*
* @constructor
*/
function Radio( id ) {
this.id = id;
} // end Radio
/**
* init is a subclass of Radio and is used to initialize the state and tabindex of
* the radio button
*
* @member Radio
*
* @return none
*/
Radio.prototype.init = function() {
this.node = document.getElementById( this.id );
var obj = this;
// Add event handlers for a radiobutton geeting and losing focus
browser.addEvent(this.node, "focus", function(event) {handleRadioButtonFocusEvent(event);}, false);
browser.addEvent(this.node, "blur", function(event) {handleRadioButtonBlurEvent(event); }, false);
} // end Radio.prototype.init
/**
* handleRadioButtonFocusEvent processes keys associated with a Radio_group
*
* @param ( event ) event is the event handler for the event
* @param ( RadioGroup object ) radio_group is the RadioGroup object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio_group, else true
*/
handleRadioButtonFocusEvent = function(event) {
var e = event || window.event;
// Kick IE 7 to update styling based on ARIA attribute
browser.target(e).className += "";
return true;
} // end handleRadioGroupFocusEvent
/**
* handleRadioGroupBlurEvent processes keys associated with a radio_group
*
* @param ( event ) event is the event handler for the event
* @param ( RadioGroup object ) radio_group is the RadioGroup object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio_group, else true
*/
handleRadioButtonBlurEvent = function(event) {
var e = event || window.event;
// Kick IE 7 to update styling based on ARIA attribute
browser.target(e).className += "";
return true;
} // end handleRadioGroupBlurEvent
/**
* handleRadioFirstFocus processes onFocus event when TAB has been pressed
*
* @param ( event ) event is the event handler for the event
* @param ( RadioGroup object ) radio_group is the Radio Group object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio group, else true
*/
function handleRadioFirstFocus( event, radio_group ) {
// check to see if any radio buttons are selected
if( radio_group.radio_selected < 0 ) {
// if a radio button is not selected, remove the last radio button to tab order
radio_group.radio_buttons[radio_group.radio_buttons.length-1].node.tabIndex = -1;
// keep track of the last radio button with focus
radio_group.radio_focus = 0;
} // end if
return true;
} // end handleRadioFirstFocus
/**
* handleRadioFirstBlur processes onBlur event when TAB has been pressed
*
* @param ( event ) event is the event handler for the event
* @param ( RadioGroup object ) radio_group is the Radio Group object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio group, else true
*/
function handleRadioFirstBlur( event, radio_group ) {
// check to see if any radio buttons are selected
if( radio_group.radio_selected < 0 ) {
// if a radio button is not selected, add the last radio button to tab order
radio_group.radio_buttons[radio_group.radio_buttons.length-1].node.tabIndex = 0;
} // end if
return true;
} // end handleRadioFirstBlur
/**
* handleRadioLastFocus processes onFocus event when SHIFT+TAB has been pressed
*
* @param ( event ) event is the event handler for the event
* @param ( RadioGroup object ) radio_group is the Radio Group object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio group, else true
*/
function handleRadioLastFocus( event, radio_group ) {
// check to see if any radio buttons are selected
if( radio_group.radio_selected < 0 ) {
// if a radio button is not selected, remove the first radio button to tab order
radio_group.radio_buttons[0].node.tabIndex = -1;
// keep track of the last radio button with focus
radio_group.radio_focus = radio_group.radio_buttons.length-1;
} // end if
return true;
} // end handleRadioLastFocus
/**
* handleRadioLastBlur processes onBlur event when SHIFT+TAB has been pressed
*
* @param ( event ) event is the event handler for the event
* @param ( RadioGroup object ) radio_group is the Radio Group object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio group, else true
*/
function handleRadioLastBlur( event, radio_group ) {
// check to see if any radio buttons are selected
if( radio_group.radio_selected < 0 ) {
// if a radio button is not selected, the add the first radio button to tab order
radio_group.radio_buttons[0].node.tabIndex = 0;
} // end if
return true;
} // end handleRadioLastBlur
/**
* handleRadioGroupKeyDownEvent processes keys associated with a radio button group
*
* @param ( event ) event is the event handler for the event
* @param ( RadioGroup object ) radio_group is the Radio Group object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio group, else true
*/
function handleRadioGroupKeyDownEvent( event, radio_group ) {
// If IE get the IE event object
var e = event || window.event;
// If any modifier keys are pressed do not process this event
if( e.altKey || e.ctrlKey || e.shiftKey )
return true;
switch( e.keyCode ) {
case KEY_DOWN:
// Hitting down will switch the focus and selected to the next item in the radio group
if( (radio_group.radio_selected < 0 ) &&
(radio_group.radio_focus >= 0 ) ){
selectRadioButton( radio_group, (radio_group.radio_focus + 1), 1);
radio_group.radio_buttons[radio_group.radio_focus ].node.className += "";
}
else {
selectRadioButton( radio_group, (radio_group.radio_selected + 1), 1);
radio_group.radio_buttons[radio_group.radio_selected ].node.className += "";
}
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation( e );
break;
case KEY_UP:
// Hitting up will switch the focus and selected to the previous item in the radio group
if( (radio_group.radio_selected < 0 ) &&
(radio_group.radio_focus >= 0 ) )
selectRadioButton( radio_group, (radio_group.radio_focus - 1), 1);
else
selectRadioButton( radio_group, (radio_group.radio_selected - 1), 1);
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation( e );
break;
case KEY_SPACE:
// Hitting space will select the current item in the radio group
if( (radio_group.radio_selected < 0 ) &&
(radio_group.radio_focus >= 0 ) )
selectRadioButton( radio_group, radio_group.radio_focus, 1);
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation( e );
break;
} // end switch
return true;
} // end handleRadioGroupKeyDownEvent
/**
* handleRadioGroupClickEvent processes pointer click events with in the radio group
*
* @param ( event ) event is the event handler for the event
* @param ( RadioGroup object ) radio_group is the Radio Group object that is the target of the pointer event
*
* @return false if pointer event was used by radio group, else true
*/
function handleRadioGroupClickEvent( event, radio_group ) {
// If IE get the IE event object
var e = event || window.event;
// Select a radio button by clicking
for(var i = 0; i < radio_group.radio_buttons.length; i++ ) {
if( radio_group.radio_buttons[i].node == browser.target(e) ) {
selectRadioButton( radio_group, i, 1);
} // endif
} // end for
} // end handleRadioGroupClickEvent
</script>
CSS Source Code
Show CSS Source Code: radio1_inline.css
<style type="text/css">
ul[role="radiogroup"] {
margin: 0;
padding: 0;
margin-left: 1em;
list-style: none;
}
li[role="radio"]{
padding-left: 16px;
background-repeat: no-repeat;
background-position: left center;
background-image: url('images/unchecked.gif');
}
li[aria-checked="true"] {
background-repeat: no-repeat;
background-position: left center;
background-image: url('images/checked.gif');
}
li[aria-checked="true"]:active,
li[aria-checked="true"]:focus{
border: black 1px solid;
font-weight: bold;
width:10em;
background-repeat: no-repeat;
background-position: left center;
background-image: url('images/checked.gif');
}
li[aria-checked="false"]:active,
li[aria-checked="false"]:focus{
border: black 1px solid;
font-weight: bold;
width: 10em;
}
</style>