Live Regions Example 1

<div role="application">
<script type="text/javascript">
  var messagesArray1 = new Array("0","1","2","3","4","5","6","7","8","9");  
  var live1 = new LiveRegion('liveregion1', 'timer1()', messagesArray1, 1000, 0, 'time1', 'live1', 'channel1', 'atomic1', 'relevant1');
  function timer1 () { updateRegion( live1 ) };
  widgets.add( live1 );

  var messagesArray2 = new Array(
   "The birch canoe slid on the smooth planks.",
   "Glue the sheet to the dark blue background.",
   "It's easy to tell the depth of a well.",
   "These days a chicken leg is a rare dish.",
   "Rice is often served in round bowls.",
   "The juice of lemons makes fine punch.",
   "The box was thrown beside the parked truck.",
   "The hogs were fed chopped corn and garbage.",
   "Four hours of steady work faced us.",
   "Large size in stockings is hard to sell."
  );  
  var live2 = new LiveRegion('liveregion2', 'timer2()', messagesArray2, 5000, 1, 'time2', 'live2', 'channel2', 'atomic2', 'relevant2');
  function timer2 () { updateRegion( live2 ) };
  widgets.add( live2 );
  
</script>

<h2>Live Region 1: Simple Counter</h2>

<ul>
  <li><label for="time1">Change Interval </label>
      <select id="time1"  onchange="liveRegionSetTimer( live1 );">
         <option selected="selected">1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
         <option>6</option>
         <option>7</option>
         <option>8</option>
         <option>9</option>
         <option>10</option>
      </select> Seconds
  </li>

  <li><label for="live1">Live Property Value </label>
      <select id="live1" onchange="liveRegionSetLive( live1 );">
         <option>off</option>
         <option>polite</option>
         <option selected="selected">assertive</option>
         <option>rude</option>
       </select>
  </li>

  <li><label for="channel1">Channel Property Value </label>
      <select id="channel1" onchange="liveRegionSetChannel( live1 );">
         <option>main</option>
         <option selected="selected">notify</option>
       </select>
  </li>

  <li><label for="atomic1">Atomic Property Value </label>
      <select id="atomic1" onchange="liveRegionSetAtomic( live1 );">
         <option>true</option>
         <option selected="selected">false</option>
       </select>
  </li>

  <li><label for="relevant1">Relevant Property Value </label>
      <select id="relevant1" onchange="liveRegionSetRelevant( live1 );">
         <option>additions</option>
         <option>removals</option>
         <option>text</option>
         <option selected="selected">all</option>
       </select>
  </li>


</ul>

<p id="liveregion1"
   class="region"  
   role="description"
   aria-live="assertive"
   aria-atomic="true"
   aria-relevant="all"
   aria-channel="notify">
   Changing Value: <span>XXX</span>
</p>

<h2>Live Region 2: Text Log</h2>

<ul>
  <li><label for="time2">Change Interval </label>
      <select id="time2"  onchange="liveRegionSetTimer(live2);">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option selected="selected">5</option>
         <option>6</option>
         <option>7</option>
         <option>8</option>
         <option>9</option>
         <option>10</option>
      </select> Seconds
  </li>

  <li><label for="live2">Live Property Value </label>
      <select id="live2" onchange="liveRegionSetLive(live2);">
         <option>off</option>
         <option selected="selected">polite</option>
         <option>assertive</option>
         <option>rude</option>
       </select>
  </li>

  <li><label for="channel2">Channel Property Value </label>
      <select id="channel2" onchange="liveRegionSetChannel(live2);">
         <option selected="selected">main</option>
         <option>notify</option>
       </select>
  </li>

  <li><label for="atomic2">Atomic Property Value </label>
      <select id="atomic2" onchange="liveRegionSetAtomic(live2);">
         <option selected="selected">true</option>
         <option>false</option>
       </select>
  </li>

  <li><label for="relevant2">Relevant Property Value </label>
      <select id="relevant2" onchange="liveRegionSetRelevant(live2);">
         <option selected="selected">additions</option>
         <option>removals</option>
         <option>text</option>
         <option>all</option>
       </select>
  </li>

</ul>

<h3>Log Text</h3>

<ul id="liveregion2"
    class="region"
  role="log"
  aria-live="polite"
  aria-atomic="true"
  aria-relevant="additions"
  aria-channel="main">
</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
// Widgets is a way to initialize widgets in the ARIA examples


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();
}

var widgets = new Widgets();

function initApp() {
  widgets.init();
}

  </script>

  <script type="text/javascript">
// JavaScript Document
// This module is to abstract browser dependencies
// This makes the widget code cleaner and earier to read by making most browser specfic coding
// in one place rather han scatered throghot documents
var ARIA_STATE = "aria-";

//
// 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 ) {
    if( event.stopPropagation )
      event.stopPropagation();
    if( event.preventDefault )
      event.preventDefault();
    return false;
  }

  WebBrowser.prototype.target = function( event ) {
  return event.target;
  }
  
  WebBrowser.prototype.attrName = function( event ) {
  return event.attrName;
  }

  WebBrowser.prototype.testAttrName = function( event , attrName) {
  return event.attrName == 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.testAttrName = function( event , attrName) {
        
        var str = attrName;
        
        if( attrName.indexOf("aria-") >=0 ) {
            str = attrName.replace(/aria-/,"");
            var node = document.getElementById('test1');
            if( node )
               node.innerHTML = str.substr(0,1).toUpperCase();
            var len  = str.length;
            str = "aria" + str.substr(0,1).toUpperCase() + str.substr(1, len);
            var node = document.getElementById('test2');
//            if( node )
//               node.innerHTML = node.innerHTML + "<li>" + str + "</li>";
        }
        
        return event.propertyName == str;
  }
    
  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;
     };

  }

}

var browser = new WebBrowser();

  </script>

  <script type="text/javascript">
/**
*
* The LiveRegion object is used to maintain information about a live region
* @contructor
* @param ( id ) id of element that is a live region
* @param ( messages ) an array of messages to update the live region
* @return nothing
*/

function LiveRegion ( id , func, messages, time, add, time_id, live_id, channel_id, atomic_id, relevant_id ) {

  this.id = id;
  this.messages = messages;
  this.index = 0;
  this.interval = time;
  this.func = func;
  this.add = add;
  
  this.time_id = time_id;
  this.live_id = live_id;
  this.channel_id = channel_id;
  this.atomic_id = atomic_id;
  this.relevant_id = relevant_id;

}

/**
*
* The LiveRegion initialization
* @return nothing
*/

LiveRegion.prototype.init = function () {
  
   this.node = document.getElementById( this.id );

   updateRegion( this );

   this.intervalID = setInterval( this.func, this.interval );

   //
   // update properties
   liveRegionSetTimer( this );
   liveRegionSetLive( this );
   liveRegionSetChannel( this );
   liveRegionSetAtomic( this );
   liveRegionSetRelevant( this );
}

/**
*
* The setLive updates the live attribute
* @param ( id ) id of the select control with the new timer value
*
* @return nothing
*/

function liveRegionSetTimer( live_region ) {
  
   // get control with new interval value
   control = document.getElementById(live_region.time_id);
  
   // get new interval value from select control
   new_interval = control.options[control.selectedIndex].text;

   // convert number to miiliseconds
   live_region.interval = new_interval * 1000;

   // stop current timer
   clearInterval(  live_region.intervalID );
    
   // restart imter with new timer value  
   live_region.intervalID = setInterval( live_region.func, live_region.interval );

}


/**
*
* The setLive updates the live attribute
* @param ( id ) id of the select control with the new live region value
* @return nothing
*/

function liveRegionSetLive( live_region ) {
  
   control = document.getElementById(live_region.live_id);
  
   live_region.node.setAttribute("aria-live", control.options[control.selectedIndex].text);  

}

/**
*
* The setChannel sets the channel property
* @param ( id ) id of the select control with the new channel value
* @return nothing
*/

function liveRegionSetChannel( live_region ) {
  
   control = document.getElementById(live_region.channel_id);
  
   live_region.node.setAttribute("aria-channel", control.options[control.selectedIndex].text);  

}

/**
*
* The setAtomic sets the atomic property
* @param ( id ) id of the select control with the new atomic value
* @return nothing
*/

function liveRegionSetAtomic( live_region ) {
  
   control = document.getElementById(live_region.atomic_id);
  
   live_region.node.setAttribute("aria-atomic", control.options[control.selectedIndex].text);  

}

/**
*
* The setRelevant sets the relavent property
* @param ( id ) id of the select control with the new atomic value
* @return nothing
*/

function liveRegionSetRelevant( live_region ) {
  
   control = document.getElementById(live_region.relevant_id);
  
   live_region.node.setAttribute("aria-relevant", control.options[control.selectedIndex].text);  

}



/**
*
* The updateRegion updates the live region with new content basedon messageArray from a timer event
* @param ( live_region ) LiveRegion obj
* @return nothing
*/

function updateRegion ( live_region ) {

   if( live_region.add > 0 ) {

   // If add=1 then add content  
     text = live_region.messages[live_region.index++];

     if( live_region.index >= live_region.messages.length )
        live_region.index = 0;

     mes = document.createTextNode( text );
     elm = document.createElement( "li" );
  
   // add text to new li node
   elm.appendChild( mes );
  
   // add li node to list
   live_region.node.appendChild( elm );
    
   } else {
    
   // If add=0 then replace content  
     text = live_region.messages[live_region.index++];
     mes = document.createTextNode( text );

     if( live_region.index >= live_region.messages.length )
        live_region.index = 0;

     // Get SPAN element in region to change content
     span_node = live_region.node.getElementsByTagName( 'span' )[0];
  
     // Get child nodes of the SPAN element
     span_children = span_node.childNodes;
     num = span_children.length;
  
     // Delete the children of the SPAN element
     for( i = num-1; i >= 0; i--) {
      span_node.removeChild(span_children[i]);
     } //endfor
  
     span_node.appendChild( mes );
  
   }
  
  
}


  </script>

  <style type="text/css">
p.region span {
  padding: .25em;
  border: thin black solid;
}

ul#liveregion2 {
  padding: .25em;
  list-style: none;
  border: thin black solid;
}   </style>