From 95d6c162c601112fae327a83561488026c278ee4 Mon Sep 17 00:00:00 2001
From: Jesse <jesse.greenberg@colorado.edu>
Date: Mon, 28 Oct 2024 18:20:10 -0400
Subject: [PATCH] re-generate a11y views

---
 fourier-making-waves_a11y_view.html | 31 +++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/fourier-making-waves_a11y_view.html b/fourier-making-waves_a11y_view.html
index b81e6902..2c06fa3d 100644
--- a/fourier-making-waves_a11y_view.html
+++ b/fourier-making-waves_a11y_view.html
@@ -215,7 +215,7 @@ <h3>State Descriptions for Fourier: Making Waves</h3>
           State Descriptions are a combination of static state descriptions (descriptions that never change) and dynamic
           state descriptions (descriptions that update silently as the simulation changes). Together, they form a
           complete description of the current state at any given moment. These are the descriptions that a screen reader
-          users can read through or review as they feel the need when they accessing a simulation (i.e., not the A11y
+          user can read through or review as they feel the need when they are accessing a simulation (i.e., not the A11y
           View tool).
         </details>
         <div id="dom-copy-container" class="dom_copy_container" role="presentation"></div>
@@ -274,6 +274,10 @@ <h3>State Descriptions for Fourier: Making Waves</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
    */
@@ -369,18 +373,23 @@ <h3>State Descriptions for Fourier: Making Waves</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 );
+          }
+        } );
       }
     }
   }