diff --git a/tambo_a11y_view.html b/tambo_a11y_view.html index 07063855..4096d0eb 100644 --- a/tambo_a11y_view.html +++ b/tambo_a11y_view.html @@ -325,44 +325,48 @@

PDOM & Descriptions for Tambo Demo

for ( let i = 0; i < allElements.length; i++ ) { const element = allElements[ i ]; - if ( element.hasAttribute( 'aria-label' ) && element.innerHTML === '' ) { - const ariaLabel = element.getAttribute( 'aria-label' ); + // this check works because PDOMInstance sets hidden on the entire subtree of PDOMInstances when not visible on + // an accessible display rather than just the hidden ancestor + if ( !element.hidden ) { + if ( element.hasAttribute( 'aria-label' ) && element.innerHTML === '' ) { + const ariaLabel = element.getAttribute( 'aria-label' ); - // remove the style - element.removeAttribute( 'style' ); + // remove the style + element.removeAttribute( 'style' ); + + if ( element.tagName.toLowerCase() === 'input' ) { + if ( element.type === 'button' ) { - if ( element.tagName.toLowerCase() === 'input' ) { - if ( element.type === 'button' ) { + // set the value of the input to be the same as the aria-label appears inside the button + element.setAttribute( 'value', ariaLabel ); + } + else { - // set the value of the input to be the same as the aria-label appears inside the button - element.setAttribute( 'value', ariaLabel ); + // add a special label element to appear before the input element + const labelElement = document.createElement( 'label' ); + labelElement.textContent = ariaLabel; + const parentElement = element.parentNode; + parentElement.insertBefore( labelElement, parentElement.firstChild ); + } } else { - // add a special label element to appear before the input element - const labelElement = document.createElement( 'label' ); - labelElement.textContent = ariaLabel; - const parentElement = element.parentNode; - parentElement.insertBefore( labelElement, parentElement.firstChild ); + // if not an input, then add it to the innerHTML of an element, without overriding what is already there. + element.innerHTML = ariaLabel + element.innerHTML; } } - else { + if ( element.hasAttribute( 'aria-valuetext' ) ) { - // if not an input, then add it to the innerHTML of an element, without overriding what is already there. - element.innerHTML = ariaLabel + element.innerHTML; - } - } - if ( element.hasAttribute( 'aria-valuetext' ) ) { + // if the element has aria-valuetext, render this text in a new element so we can see the content of this + // inline attribute + const valueTextElement = document.createElement( 'p' ); + valueTextElement.className = 'pdom-style'; + valueTextElement.style.opacity = 0.55; + valueTextElement.textContent = element.getAttribute( 'aria-valuetext' ); - // if the element has aria-valuetext, render this text in a new element so we can see the content of this - // inline attribute - const valueTextElement = document.createElement( 'p' ); - valueTextElement.className = 'pdom-style'; - valueTextElement.style.opacity = 0.55; - valueTextElement.textContent = element.getAttribute( 'aria-valuetext' ); - - // insert directly after the element that has the valuetext. This handles the case if element is last, see https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib - element.parentNode.insertBefore( valueTextElement, element.nextSibling ); + // insert directly after the element that has the valuetext. This handles the case if element is last, see https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib + element.parentNode.insertBefore( valueTextElement, element.nextSibling ); + } } } }