Back to canadapt home

Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

Explanation of the problem

On a Tablist if one of the tabs has aria-selected="true",
then the Screen reader will assume that all of the tabs are selected
until it runs into a tab that isn't.
To counter this make sure that all of the inactive tabs have aria-selected="false"

Code extract

	 	
// Activates any given tab panel
	
	
   		function activateTab (tab, setFocus) {
   		setFocus = setFocus || true;
  
// Deactivate all other tabs

		deactivateTabs();
  
//Remove tabindex attribute
				
		tab.removeAttribute('tabindex');

// Set the tab as selected
	
	tab.setAttribute('aria-selected', 'true');

 //Get the value of aria-controls (which is an ID)
  
    	var controls = tab.getAttribute('aria-controls');
	
// Remove hidden attribute from tab panel to make it visible

	document.getElementById(controls).removeAttribute('hidden');

// Set focus when required

				if (setFocus) {
      							tab.focus();
   									 };

 									 };
 									 
 									 
function deactivateTabs () {
    for (t = 0; t < tabs.length; t++) {
      tabs[t].setAttribute('tabindex', '-1');
      tabs[t].setAttribute('aria-selected', 'false');
    };

    for (p = 0; p < panels.length; p++) {
      panels[p].setAttribute('hidden', 'hidden');
    };
  };