Frage zum Wiki-Artikel „zugängliche Registerkarten“

[beatovich]

hallo

Hallo, ich möchte dieses TabPanel gerne 2 mal auf einer Seite einbauen. Was muss geändert werden, damit das TabPanel 2 unabhängig vom TabPanel1 funktioniert?

Zuerst mal sollte man dieses zugängliche Beispiel fertig machen.

Da findet sich nämlich so code:

  <ul role="tablist" id="tablist">
    <li id="link1" role="tab" aria-controls="panel-1" aria-selected="true" tabindex="0">1 - Button</li>
    <li id="link2" role="tab" aria-controls="panel-2" aria-selected="false" tabindex="0">2 - Button</li>
    <li id="link3" role="tab" aria-controls="panel-3" aria-selected="false" tabindex="0">3 - Button</li>
  </ul>

tabindex="0" schaltet nämlich den Focus für solche Elemente ab.

Man hätte hier besser effektiv <button>-Elemente verwenden sollen.

Was du aber ändern müsstst um mehrere Tab-Bereiche zu vwerwenden wird hier klar:

function init() {     
      var tab = document.getElementById('tabpanel');
      tab.addEventListener('click',clickHandler);
      tab.addEventListener('keypress', keyHandler);
    }

statt id=tabpanel einfach class= "tabpanel" verwenden.

dann oben ändern zu

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