var tabSetList = document.getElementsByClassName('paragraph--type--horizontal-tabs'); for (var set = 0; set < tabSetList.length; set++) { var tabList = new Array; var tabSections = tabSetList[set].children[0]; for (var section = 0; section < tabSections.children.length; section++) { var headObj = tabPanel.children[0].children[0]; var tabPanel = tabSections.children[section]; /* Add every panel section heading to our tabList array */ tabList.push(headObj.children[0].innerHTML); /* Hide the original heading */ headObj.style.position = 'absolute'; headObj.style.left = '-10000px'; /* Set proper WAI-ARIA attributes on the tab panel */ tabPanel.id = 'gtTab_' + set + '_' + section; tabPanel.setAttribute('role', 'tabpanel'); tabPanel.setAttribute('aria-labelledby', 'gtTabTitle_' + set + '_' + section); if (section > 0) { tabPanel.style.display = 'none'; } }
Making JavaScript Powered UI Accessible