Radio Example 2

<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" role="radio" tabindex="0" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Thai</li>
    <li id="r2" role="radio" tabindex="-1" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Subway</li>
    <li id="r3" role="radio" tabindex="-1" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Jimmy Johns</li>
    <li id="r4" role="radio" tabindex="-1" aria-checked="true"> <img role="presentation" src="images/unchecked.gif"   alt=""/>Radio Maria</li>
    <li id="r5" role="radio" tabindex="0" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Rainbow Gardens</li>  
  </ul>  

<!-- Start of second Radio Group  -->

  <h3 id="rg2_label">Drink Options</h3>
  
  <ul id="rg2"
     role="radiogroup"
   aria-labelledby="rg2_label"
   >
    <li id="r6"  role="radio" tabindex="0"  aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Water</li>
    <li id="r7"  role="radio" tabindex="-1" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Tea</li>
    <li id="r8"  role="radio" tabindex="-1" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Coffee</li>
    <li id="r9"  role="radio" tabindex="-1" aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Cola</li>
    <li id="r10" role="radio" tabindex="0"  aria-checked="false"><img role="presentation" src="images/unchecked.gif" alt=""/>Ginger Ale</li>  
  </ul>  


</div>

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

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

  <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() {
  
  this.node = document.getElementById( this.id );

  var obj = this;

  // 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")
      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 changin states

  if( (index >= 0 ) && (index < radio_group.radio_buttons.length) ) {

    // Set all radio buttons to not selected
    // Change SRC of the IMG element for the visual rendering to unchecked radio button
    // 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");
      radio_group.radio_buttons[i].image_node.src = "images/unchecked.gif";
      radio_group.radio_buttons[i].node.tabIndex = -1;
    }  // endfor

    // Set radio button based on the index value
    // Change SRC of the IMG element for the visual rendering to checked radio button
    // 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");
    radio_group.radio_buttons[index].image_node.src = "images/checked.gif";
    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 ) {
      radio_group.radio_buttons[index].node.focus();
  }  // endif
  
  radio_group.radio_focus = index;

    // Keep track of the last radio button selected
    
    radio_group.radio_selected = index;

  } // 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 );
   this.image_node = this.node.getElementsByTagName("img")[0];
   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);
         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_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)) ||
     (radio_group.radio_buttons[i].image_node == browser.target(e))
     ) {
      selectRadioButton( radio_group, i);
  } // endif  
  } // end for

} // end handleRadioGroupClickEvent


  </script>

  <style type="text/css">
ul[role="radiogroup"] {
  padding: 0;
  margin: 0;
  margin-left: 1em;
  list-style: none;
}

ul[role="radiogroup"] li img {
  padding: 0;
  margin: 0;
  padding-right: .25em;
}


li[aria-checked="true"] {
  
}    

li[aria-checked="true"]:active,
li[aria-checked="true"]:focus{
    border: black 1px solid;
  font-weight: bold;
  width:10em;
  
}

li[aria-checked="false"]:active,
li[aria-checked="false"]:focus{
    border: black 1px solid;
  font-weight: bold;
  width: 10em;
}
  </style>