Frage zum Wiki-Artikel „zugängliche Registerkarten“

[mAndreas]

Mir ist es schon fast unangenehm aber nachfolgend der geänderte Stand, der leider nicht funktioniert:

<script>
'use strict';
function init() {     
  document.queryselectorAll('.tabpanel')
  .forEach(function(item){
    item.addEventListener('click',clickHandler);
    item.addEventListener('keypress', keyHandler); 
  });
}

	function clickHandler(elem) {
		var target = elem.target;
		var selectedTab = document.querySelector('[aria-selected="true"]');
		selectedTab.setAttribute('aria-selected', false);
		target.setAttribute('aria-selected', true);
		var panels = document.querySelector('[aria-hidden="false"]');
		panels.setAttribute('aria-hidden', true);
		var panelId = target.getAttribute('aria-controls'),
			panel = document.getElementById(panelId);
		panel.setAttribute('aria-hidden', false);
	}
	document.addEventListener("DOMContentLoaded", function () {
		init();
	});
}());

</script>

<div class="tabpanel">
          <ul role="tablist" id="tablist">
            <h2>
              <li id="link1" role="tab" aria-controls="panel-1" aria-selected="true">Button1</li>
              <li id="link2" role="tab" aria-controls="panel-2" aria-selected="false">Button2</li>
            </h2>
          </ul>
          
          <div id="tabcontent">
            <div id="panel-1" role="tabpanel" aria-labelledby="link1" aria-hidden="false">
              
          Text1
              
            </div>
          </div>
          <div id="tabcontent">
            <div id="panel-2" role="tabpanel" aria-labelledby="link2" aria-hidden="true">

          Text2
            
            </div>
          </div>  
     
</div>

Darauf folgen andere Inhalte… bevor es mit dem gewünschten zweiten TabPanel weiter geht

<div class="tabpanel">
          <ul role="tablist" id="tablist">
            <h2>
              <li id="link3" role="tab" aria-controls="panel-3" aria-selected="true">Button3</li>
              <li id="link4" role="tab" aria-controls="panel-4" aria-selected="false">Button4</li>
              <li id="link5" role="tab" aria-controls="panel-5" aria-selected="false">Button5</li>
            </h2>
          </ul>


  
          
          <div id="tabcontent">
            <div id="panel-3" role="tabpanel" aria-labelledby="link3" aria-hidden="false">
              
            Text3             
 
            </div>
          </div>

          <div id="tabcontent">
            <div id="panel-4" role="tabpanel" aria-labelledby="link4" aria-hidden="true">
              
            Text4

            </div>
          </div>

          <div id="tabcontent">
            <div id="panel-5" role="tabpanel" aria-labelledby="link5" aria-hidden="true">
              
            Text5

            </div>
          </div>
            
                
    </div>