From b1a088c6399246b2316f8357b463d36204dcf0ef Mon Sep 17 00:00:00 2001 From: Jesse Date: Wed, 14 Apr 2021 15:24:09 -0400 Subject: [PATCH 1/5] Regenerate a11y view, see https://github.com/phetsims/chipper/issues/1036 --- ratio-and-proportion_a11y_view.html | 60 +++++++++++++++-------------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/ratio-and-proportion_a11y_view.html b/ratio-and-proportion_a11y_view.html index 7522a8d0..02710041 100644 --- a/ratio-and-proportion_a11y_view.html +++ b/ratio-and-proportion_a11y_view.html @@ -325,44 +325,48 @@

PDOM & Descriptions for Ratio and Proportion

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 ); + } } } } From e0bf77f4b61941340b6a84dc9e54d7e7ac93020e Mon Sep 17 00:00:00 2001 From: samreid Date: Fri, 16 Apr 2021 08:17:02 -0600 Subject: [PATCH 2/5] Update documentation, see https://github.com/phetsims/wave-interference/issues/520 --- js/common/view/sound/TickMarkBumpSoundClip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/common/view/sound/TickMarkBumpSoundClip.js b/js/common/view/sound/TickMarkBumpSoundClip.js index e8d0b7c1..916ccd8f 100644 --- a/js/common/view/sound/TickMarkBumpSoundClip.js +++ b/js/common/view/sound/TickMarkBumpSoundClip.js @@ -11,7 +11,7 @@ import tickMarkCrossBump from '../../../../../tambo/sounds/general-soft-click_mp import ratioAndProportion from '../../../ratioAndProportion.js'; // This value was copied from similar sound work done in Waves Intro -const MIN_INTER_CLICK_TIME = ( 1 / 60 * 1000 ) * 2; // min time between clicks, in milliseconds, empirically determined +const MIN_INTER_CLICK_TIME = ( 1 / 60 * 1000 ) * 2; // min time between clicking sounds, in milliseconds, empirically determined class TickMarkBumpSoundClip extends SoundClip { From b63e921d59489c77a0d6281093f9fe34afb70ee8 Mon Sep 17 00:00:00 2001 From: zepumph Date: Mon, 19 Apr 2021 14:37:32 -0800 Subject: [PATCH 3/5] rename supportsDescription -> supportsInteractiveDescription, https://github.com/phetsims/chipper/issues/1031 --- ratio-and-proportion_a11y_view.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ratio-and-proportion_a11y_view.html b/ratio-and-proportion_a11y_view.html index 02710041..3eafe02e 100644 --- a/ratio-and-proportion_a11y_view.html +++ b/ratio-and-proportion_a11y_view.html @@ -230,10 +230,10 @@

PDOM & Descriptions for Ratio and Proportion

} const noPostMessage = simulationQueryString.indexOf( 'postMessageOnLoad&postMessageOnError' ) === -1; - const noAccessibility = simulationQueryString.indexOf( 'supportsDescription' ) === -1; + const noAccessibility = simulationQueryString.indexOf( 'supportsInteractiveDescription' ) === -1; noPostMessage && ( simulationQueryString += 'postMessageOnLoad&postMessageOnError&' ); - noAccessibility && ( simulationQueryString += 'supportsDescription' ); + noAccessibility && ( simulationQueryString += 'supportsInteractiveDescription' ); const repoLocale = 'ratio-and-proportion_en'; const filenameEnding = IS_BUILT ? '_phet.html' : '.html'; From e592161125f9b323ccfa2952e747749a0b5ff3bb Mon Sep 17 00:00:00 2001 From: zepumph Date: Mon, 19 Apr 2021 15:04:05 -0800 Subject: [PATCH 4/5] convert supportsInteractiveDescription to a boolean QP, https://github.com/phetsims/chipper/issues/1031 --- ratio-and-proportion_a11y_view.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ratio-and-proportion_a11y_view.html b/ratio-and-proportion_a11y_view.html index 3eafe02e..185707e5 100644 --- a/ratio-and-proportion_a11y_view.html +++ b/ratio-and-proportion_a11y_view.html @@ -233,7 +233,7 @@

PDOM & Descriptions for Ratio and Proportion

const noAccessibility = simulationQueryString.indexOf( 'supportsInteractiveDescription' ) === -1; noPostMessage && ( simulationQueryString += 'postMessageOnLoad&postMessageOnError&' ); - noAccessibility && ( simulationQueryString += 'supportsInteractiveDescription' ); + noAccessibility && ( simulationQueryString += 'supportsInteractiveDescription=true' ); const repoLocale = 'ratio-and-proportion_en'; const filenameEnding = IS_BUILT ? '_phet.html' : '.html'; From ff81ea582bc28a4fb6af06f5d28fab10581254c1 Mon Sep 17 00:00:00 2001 From: zepumph Date: Mon, 19 Apr 2021 15:34:25 -0800 Subject: [PATCH 5/5] nest supportsInteractiveDescription under "features" in package.json, https://github.com/phetsims/chipper/issues/1031 --- package.json | 4 +++- ratio-and-proportion-tests.html | 4 +++- ratio-and-proportion_en.html | 4 +++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 0b76d877..4b34fb01 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,9 @@ "generatedUnitTests": true, "supportsSound": true, "supportsEnhancedSound": true, - "supportsInteractiveDescription": true, + "features":{ + "supportsInteractiveDescription": true + }, "supportedBrands": [ "phet", "phet-io", diff --git a/ratio-and-proportion-tests.html b/ratio-and-proportion-tests.html index 7c1182f0..1f9c7f9e 100644 --- a/ratio-and-proportion-tests.html +++ b/ratio-and-proportion-tests.html @@ -46,7 +46,9 @@ "generatedUnitTests": true, "supportsSound": true, "supportsEnhancedSound": true, - "supportsInteractiveDescription": true, + "features": { + "supportsInteractiveDescription": true + }, "supportedBrands": [ "phet", "phet-io", diff --git a/ratio-and-proportion_en.html b/ratio-and-proportion_en.html index f010d8a8..68f16fe9 100644 --- a/ratio-and-proportion_en.html +++ b/ratio-and-proportion_en.html @@ -45,7 +45,9 @@ "generatedUnitTests": true, "supportsSound": true, "supportsEnhancedSound": true, - "supportsInteractiveDescription": true, + "features": { + "supportsInteractiveDescription": true + }, "supportedBrands": [ "phet", "phet-io",