for (var section = 0; section < accordSections.children.length; section++) { var accordSection = accordSections.children[section]; var headObj = accordSection.children[0].children[0].children[0]; var contentObj = accordSection.children[0].children[1]; /* Turn the existing heading text into an expand/compress link with appropriate attributes */ var headHTMLButton = document.createElement('button'); headHTMLButton.id = 'gtAccordionToggle_' + set + '_' + section; headHTMLButton.setAttribute('data-accord-set', set); headHTMLButton.setAttribute('data-accord-section', section); headHTMLButton.addEventListener('click', gtJSUI_selectAccordion, false); headHTMLButton.innerHTML = headObj.innerHTML; headHTMLButton.setAttribute('aria-controls', 'gtAccordionPanel_' + set + '_' + section); headHTMLButton.setAttribute('aria-expanded', (section == 0 ? 'true' : 'false')); /* Create a +/- toggle status SPAN and insert it before the heading text in the button text */ var statusHTML = document.createElement('i'); statusHTML.className = (openFirst && (section == 0) ? 'svg-accordminus' : 'svg-accordplus'); statusHTML.setAttribute('aria-hidden', 'true'); headHTMLButton.insertBefore(statusHTML, headHTMLButton.childNodes[0]); /* Heading ID used with aria-labelledby property below */ headObj.id = 'gtAccordionHeading_' + set + '_' + section; /* Remove the heading element's content and add the new BUTTON object, set ID and attributes */ headObj.removeChild(headObj.childNodes[0]); headObj.appendChild(headHTMLButton); headObj.className = 'gtAccordionToggle'; /* Set up the content body as the actual 'panel' */ contentObj.id = 'gtAccordionPanel_' + set + '_' + section; contentObj.setAttribute('role', 'region'); contentObj.setAttribute('aria-labelledby', 'gtAccordionHeading_' + set + '_' + section); contentObj.style.display = (section == 0 ? 'block' : 'none'); }
Making JavaScript Powered UI Accessible