Appendix JS_C_A9

Requirement: Maintain a logical focus order for interactive components.

Details: Insert dynamic content into the DOM immediately following its trigger element.

<blockquote>
    <p>
        Assistive technologies can derive information from 
        their attributes and text; for example, a dynamic 
        menu would be made using links organised into nested 
        lists, in which the menu levels are denoted by the 
        hierarchy, and by the use of 
        <span id="demo"><a href="...">structural labels</a></span> 
        around each top-level link.
    </p>
</blockquote>

var span = document.getElementById('demo');
var trigger = span.getElementsByTagName('a').item(0);
 
var infotext, layer = null;
 
trigger.addEventListener('click', function(e)
{
    if(layer === null)
    {
        infotext = trigger.getAttribute('title');
        trigger.removeAttribute('title');
 
        layer = document.createElement('span');
        layer.className = 'layer';
 
        var info = layer.appendChild(
            document.createElement('em'));
        info.appendChild(document.createTextNode(
            ' (' + infotext + ') '));
 
        layer.appendChild(document.createTextNode('[ '));
 
        var more = layer.appendChild(
            document.createElement('a'));
        more.setAttribute('href', 
            trigger.getAttribute('href'));
        more.appendChild(
            document.createTextNode('reference'));
 
        layer.appendChild(document.createTextNode(' | '));
 
        var google = layer.appendChild(
            document.createElement('a'));
        google.setAttribute('href', 
         'http://www.google.com/search?q=Structural+Labels');
        google.appendChild(
            document.createTextNode('search'));
 
        layer.appendChild(document.createTextNode(' ]'));
 
        layer = span.appendChild(layer);
    }
    else
    {
        trigger.setAttribute('title', infotext);
 
        span.removeChild(layer);
        layer = null;
    }
 
    e.preventDefault();
 
}, false);