Inserting new DOM nodes breaks tabbing, how do I make it stop?

Inserting new DOM nodes breaks tabbing, how do I make it stop?

I have XHTML (1.0 transitional) that looks as follows

  1. <div id="projectContent">
  2.     <div class="project" id="dataLorem">
  3.         <div class="projectImage">
  4.             <img src="images/lorem-ipsum.png" alt="image alt text" />
  5.         </div>
  6.         <div class="projectDataHead">
  7.             <div class="projectClient">
  8.                 <div class="dataName">Client</div>
  9.                 <div class="dataValue">Lorem Ipsum</div>
  10.             </div>
  11.             <div class="projectTitle">
  12.                 <div class="dataName">Project</div>
  13.                 <div class="dataValue">Development &amp; content management</div>
  14.             </div>
  15.             <div class="projectSkillsRelated">
  16.                 <div class="dataName">Primary Skills</div>
  17.                 <div class="dataValue">HTML, CSS, Javascript</div>
  18.             </div>
  19.             <div class="projectSkillsSupport">
  20.                 <div class="dataName">Supporting Skills</div>
  21.                 <div class="dataValue">Microsoft Office</div>
  22.             </div>
  23.         </div>
  24.         <div class="projectDescription">
  25.             <div class="dataName">Description</div>
  26.             <div class="dataValue">
  27.                 <p>Description goes here.</p>
  28.                 <p>
  29.                     Examples of work:
  30.                 </p>
  31.                 <ul>
  32.                     <li><a href="#">Link</a></li>
  33.                     <li><a href="#">Link</a></li>
  34.                     <li><a href="#">Link</a></li>
  35.                 </ul>
  36.             </div>
  37.         </div>
  38.     </div>
  39.     <div class="project" id="dataFoobar">
  40.         ...
  41.     </div>
  42.     <!--etc-->
  43. </div>

I want to create a menu based on each project in projectContent, but I don't want the menu to appear at all for agents that don't have javascript. Simple enough right? Create new nodes and insert them into the DOM.

Here is the code I expect the nodes to represent once inserted into the DOM. In this particular case It will be inserted as a sibling before projectContent.

  1. <div class="projectNav">
  2.     <ul>
  3.         <li>
  4.             <a href="#dataLorem">
  5.                 <span class="one">Lorem Ipsum</span>
  6.                 <span class="two">Development &amp; content management</span>
  7.             </a>
  8.         </li>
  9.         <li>
  10.             <a href="#dataFoobar">
  11.                 <span class="one">Foobar</span>
  12.                 <span class="two">Web application prototype</span>
  13.             </a>
  14.         </li>
  15.         <li>
  16.             <a href="#dataClientC">
  17.                 <span class="one">Client Name C</span>
  18.                 <span class="two">Hello World!</span>
  19.             </a>
  20.         </li>
  21.         <!--etc-->
  22.     </ul>
  23. </div>
  24. <div id="projectContent">
  25.         ...
  26. </div>

I have attempted this with jQuery 1.4.2 and raw (well, almost raw) javascript, but something strange happens.

First I mocked up the styles and everything using flat html. Great, wonderful, everything works fine. When I create the elementNodes with javascript some wierd stuff started happening.

Using my keyboard I tab through the page until I reach the menu inserted into the DOM. I can tab into the first link generated then I become stuck. It will not allow me to tab forward nor backwards (shift + tab). Since accessibility is important to me, this is a problem. I am also concerned that I may be missing something really obvious. I even tried manually setting tabindex="0" with no effect. onClick  and onKeyDown events fire, the href has no trouble and the styles look just fine, so it is just the tabbing that is really leaving me scratching my head.

I tried viewing generated source (web master toolbar for Firefox), then copying the code created into flat xhtml, and it works fine!

I am using the file hosted by google.
  1. <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Here is the jQuery I attempted using:

  1. function initPage()
  2. {
  3.     var aProjects = $('#projectContent .projectData');
  4.    
  5.     var sOut = '<div class="projectNav">';
  6.     sOut += '<ul>';
  7.     for(var x = 0; x < aProjects.length; x++)
  8.     {
  9.         oElem = $(aProjects[x]);
  10.         sOut += '<li>';
  11.         sOut += '<a href="#'+oElem.attr('id')+'" onclick="toggleProject(this); return false;" onkeydown="if(keyIsEnter(event)){toggleProject(this);}; return false;" taborder="0">';
  12.         sOut += '<span class="one">'+oElem.find('.projectClient .dataValue').html()+'</span>';
  13.         sOut += '<span class="two">'+oElem.find('.projectTitle .dataValue').html()+'</span>';
  14.         sOut += '</a>';
  15.         sOut += '</li>';
  16.     };
  17.     sOut += '</ul>';
  18.     sOut += '</div>';
  19.    
  20.     $("#projectContent").before(sOut);
  21. }
  22. $(initPage);

  24. function toggleProject(argAnchor)
  25. {
  26.     $('.projectNav .active').removeClass('active');
  27.     $(argAnchor.parentNode).addClass('active');
  28. }

  30. function keyIsEnter(e)
  31. {
  32.     var evt = (e) ? e : window.event;       //IE reports window.event
  33.     return (evt.keyCode==13)?true:false;
  34. }

Which had the same results as almost no jQuery:

  1. function initPage()
  2. {
  3.     var aProjects = $('#projectContent .projectData');
  4.    
  5.     var oContainer = document.createElement('div');
  6.     oContainer.setAttribute('class','projectNav');
  7.     var oList = document.createElement('ul');
  8.    
  9.     for(var x = 0; x < aProjects.length; x++)
  10.     {
  11.         oElem = $(aProjects[x]);
  12.        
  13.         oListItem = document.createElement('li');
  14.        
  15.         oAnchor = document.createElement('a');
  16.         oAnchor.href = '#'+oElem.attr('id');
  17.         oAnchor.onclick   = function(e){toggleProject(this); return false;};
  18.         oAnchor.onkeydown = function(e){if(keyIsEnter(e)){toggleProject(this);}; return false;};
  19.        
  20.         oSpan1 = document.createElement('span');
  21.         oSpan1.setAttribute('class','one');
  22.         sSpan1Text = document.createTextNode(oElem.find('.projectClient .dataValue').html());
  23.         oSpan1.appendChild(sSpan1Text);
  24.        
  25.         oSpan2 = document.createElement('span');
  26.         oSpan2.setAttribute('class','two');
  27.         sSpan2Text = document.createTextNode(oElem.find('.projectTitle .dataValue').html());
  28.         oSpan2.appendChild(sSpan2Text);
  29.        
  30.         oAnchor.appendChild(oSpan1);
  31.         oAnchor.appendChild(oSpan2);
  32.         oListItem.appendChild(oAnchor);
  33.         oList.appendChild(oListItem);
  34.        
  35.     };
  36.     oContainer.appendChild(oList);
  37.    
  38.     // Add Navigation to document
  39.     (document.getElementById('projectContent').parentNode).insertBefore(oContainer, document.getElementById('projectContent'));

  41. }
  42. $(initPage);

  44. function toggleProject(argAnchor)
  45. {
  46.     $('.projectNav .active').removeClass('active');
  47.     $(argAnchor.parentNode).addClass('active');
  48. }

  50. function keyIsEnter(e)
  51. {
  52.     var evt = (e) ? e : window.event;       //IE reports window.event
  53.     return (evt.keyCode==13)?true:false;
  54. }
What is happening? How can I make it work using compliant code?