show aria-expanded in the a11y view

templates/sim-a11y-view.html

@@ -274,6 +274,10 @@ <h3>State Descriptions for {{PHET_SIM_TITLE}}</h3>
   // Number of alerts that remain in the Activity log before fading out.
   const ACTIVITY_LOG_LENGTH = 10;
 
+  // The attributes that we want to display as additional data in the PDOM copy. Otherwise these are invisible unless you
+  // inspect the DOM.
+  const IMPORTANT_ARIA_ATTRIBUTES = [ 'aria-valuetext', 'aria-expanded' ];
+
   /*******************************************************************************
    * Helper Functions
    */
@@ -370,18 +374,23 @@ <h3>State Descriptions for {{PHET_SIM_TITLE}}</h3>
             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' );
+        IMPORTANT_ARIA_ATTRIBUTES.forEach( attribute => {
+          if ( element.hasAttribute( attribute ) ) {
+            const value = element.getAttribute( attribute );
 
-          // 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 );
-        }
+            // add a new element to the DOM that displays the value of the attribute
+            const valueElement = document.createElement( 'p' );
+            valueElement.className = 'pdom-style';
+            valueElement.style.opacity = 0.55;
+            valueElement.style.display = 'inline-block';
+            valueElement.style.paddingLeft = '1em';
+            valueElement.textContent = `(${attribute}: ${value})`;
+
+            // insert directly after the element that has the attribute. 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( valueElement, element.nextSibling );
+          }
+        } );
       }
     }
   }