Merge branch 'master' into preferences

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 {
 

package.json

@@ -23,7 +23,9 @@
     "generatedUnitTests": true,
     "supportsSound": true,
     "supportsEnhancedSound": true,
-    "supportsInteractiveDescription": true,
+    "features":{
+      "supportsInteractiveDescription": true
+    },
     "supportedBrands": [
       "phet",
       "phet-io",

ratio-and-proportion-tests.html

@@ -46,7 +46,9 @@
         "generatedUnitTests": true,
         "supportsSound": true,
         "supportsEnhancedSound": true,
-        "supportsInteractiveDescription": true,
+        "features": {
+          "supportsInteractiveDescription": true
+        },
         "supportedBrands": [
           "phet",
           "phet-io",

ratio-and-proportion_a11y_view.html

@@ -230,10 +230,10 @@ <h3>PDOM & Descriptions for Ratio and Proportion</h3>
   }
 
   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=true' );
 
   const repoLocale = 'ratio-and-proportion_en';
   const filenameEnding = IS_BUILT ? '_phet.html' : '.html';
@@ -325,44 +325,48 @@ <h3>PDOM & Descriptions for Ratio and Proportion</h3>
     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 );
+        }
       }
     }
   }

ratio-and-proportion_en.html

@@ -45,7 +45,9 @@
         "generatedUnitTests": true,
         "supportsSound": true,
         "supportsEnhancedSound": true,
-        "supportsInteractiveDescription": true,
+        "features": {
+          "supportsInteractiveDescription": true
+        },
         "supportedBrands": [
           "phet",
           "phet-io",