Frage zum Wiki-Artikel „zugängliche Registerkarten“

[beatovich]

hallo

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"]');

Da du mehrere tab-panels verwendest willst du nur das Element ändern, IN WELCHEM der Event stattfindet. Deshalb:

var selectedTab = elem.querySelector('[aria-selected="true"]');

  selectedTab.setAttribute('aria-selected', false);
  target.setAttribute('aria-selected', true);
  var panels = document.querySelector('[aria-hidden="false"]');

auch hier:

var panels = elem.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>