From d456b0bec9b25b230e94ad13d6fdacd269ccb521 Mon Sep 17 00:00:00 2001
From: Michael Kauzmann <michael.kauzmann@colorado.edu>
Date: Sat, 7 Oct 2023 09:30:43 -0600
Subject: [PATCH] lint and disable lint in many html files,
 https://github.com/phetsims/chipper/issues/1405

---
 ph-scale-basics_a11y_view.html | 64 ++++++++++++++--------------------
 1 file changed, 27 insertions(+), 37 deletions(-)

diff --git a/ph-scale-basics_a11y_view.html b/ph-scale-basics_a11y_view.html
index c81285e..c0823eb 100644
--- a/ph-scale-basics_a11y_view.html
+++ b/ph-scale-basics_a11y_view.html
@@ -166,17 +166,16 @@ <h1>A11y View: pH Scale: Basics</h1>
       <details>
         <summary>About the A11y View Tool</summary>
         <p>
-          The A11y View is a design and presentation tool that we use to visually review and demonstrate the Interactive
-          Description design of a simulation. The descriptions we design live within our accessibility layer, we call
-          the Parallel DOM, or PDOM. The HTML of the PDOM provides document and interaction semantics for State
-          Descriptions (copied into the blue box), and timely delivery of Responsive Descriptions (copied into the
-          orange box). For a learner accessing the simulation with screen reader software, the State Descriptions
-          provide on-demand access the current state of simulation while Responsive Descriptions deliver relevant
-          changes - in real time - as the learner interacts with the simulation.
+          The A11y View is a design and presentation tool that visually displays a copy of the descriptions we design
+          for the Interactive Description feature. The State Descriptions (blue box) track the current state of the
+          simulation. The Responsive Descriptions (orange box) deliver relevant changes in real time as they happen.
+          Using this tool, designers can test and assess the descriptions during the design process without using a
+          screen reader. Educators can also use this tool to see if the content of the descritpions meets their teaching
+          and learning needs.
         </p>
         <p>
-          <b>Please note</b> that learners who use screen reader software do not use this A11y View, they use the same
-          simulation that all learners use.
+          <b>Please note:</b> The A11y View is not for learners. In learning contexts, screen reader users access the
+          Interactive Desctiption feature using the same simulation as everyone else.
         </p>
       </details>
     </div>
@@ -193,12 +192,11 @@ <h3 class="activity-log-heading-item">Activity log of Responsive Descriptions</h
         </div>
         <details>
           <summary>About Responsive Descriptions</summary>
-          Responsive Descriptions deliver changes made to interactive objects (Object Responses) and changes to the
-          surrounding context (Context Responses). Only responses powered by ARIA Live appear in the activity log below,
-          and most are Context Responses. Most responses powered by ARIA Live are delivered politely, but some are
-          really important so we make them assertive (occasional line highlighted in pink). Note that many Object
-          Responses are delivered using the aria-valuetext attribute (see grey text under slider interactions in the
-          blue box).
+          Responsive Descriptions are a combination of object responses, descriptions of changes made directly to
+          interactive objects, and context responses, descriptions of changes to the surrounding context. Together, they
+          are designed to deliver relevant changes in real time as they happen. The object and context responses powered
+          by ARIA Live appear in the activity log below. The object responses for slider interactions are powered by the
+          aria-valuetext attribute, and are found in grey text under slider interactions in the blue box.
         </details>
         <div id='alert-copy-container' class='alert_copy_container' role='presentation'>
           <div id='polite-element-container'>
@@ -214,10 +212,11 @@ <h3 class="activity-log-heading-item">Activity log of Responsive Descriptions</h
         <h3>State Descriptions for pH Scale: Basics</h3>
         <details>
           <summary>About State Descriptions</summary>
-          State Descriptions provide on-demand access to a full description of the current state of the simulation. This
-          lengthy description is accessible to the learner from the moment the simulation loads, and during any point as
-          they explore. The dynamic parts of the State Descriptions update silently as the learner interacts and makes
-          changes.
+          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
+          View tool).
         </details>
         <div id="dom-copy-container" class="dom_copy_container" role="presentation"></div>
       </div>
@@ -231,7 +230,7 @@ <h3>State Descriptions for pH Scale: Basics</h3>
 
 <script type="application/javascript">
   const IS_BUILT_STRING = '{{IS_BUILT}}';
-  const IS_BUILT = IS_BUILT_STRING.indexOf( '\{\{' ) !== 0; // escape for better syntax highlighting support
+  const IS_BUILT = IS_BUILT_STRING.indexOf( '{{' ) !== 0; // escape for better syntax highlighting support
 
   // Grab all query parameters to pass to the simulation, and a couple of params that are required for this test
   let simulationQueryString = window.location.search;
@@ -260,9 +259,9 @@ <h3>State Descriptions for pH Scale: Basics</h3>
   // apply sticky styling for all browsers except chrome.
   const left = document.getElementById( 'left' );
   const ua = navigator.userAgent.toLowerCase();
-  if ( ua.indexOf( 'safari' ) != -1 ) {
+  if ( ua.indexOf( 'safari' ) !== -1 ) {
     if ( ua.indexOf( 'chrome' ) > -1 ) {
-      left.classList.add( 'left' )
+      left.classList.add( 'left' );
     }
     else {
       left.classList.add( 'left-safari' );
@@ -272,7 +271,6 @@ <h3>State Descriptions for pH Scale: Basics</h3>
 </script>
 
 <script>
-
   // Number of alerts that remain in the Activity log before fading out.
   const ACTIVITY_LOG_LENGTH = 10;
 
@@ -316,12 +314,10 @@ <h3>State Descriptions for pH Scale: Basics</h3>
     for ( let i = 0; i < allElements.length; i++ ) {
       const element = allElements[ i ];
 
-      // TODO: see https://github.com/phetsims/chipper/issues/740, for some reason this makes Chrome very slow
       // make sure nothing in copy is focusable
       element.tabIndex = '-1';
 
       // make sure that styling is removed, unless some styling was added just for the copy
-      // TODO: pdom-style is not used anywhere. Should we keep it? https://github.com/phetsims/chipper/issues/916
       if ( element.className !== 'pdom-style' ) {
         element.removeAttribute( 'style' );
       }
@@ -398,7 +394,6 @@ <h3>State Descriptions for pH Scale: Basics</h3>
 
     // This is extremely inefficient every time the document changes, make a new copy, remove
     // the visual DOM, and add a new one
-    // TODO: Work on refining this, and only modifying the elements that change in the PDOM https://github.com/phetsims/chipper/issues/916
     copyContainer.innerHTML = '';
     const pdomCopy = pdomRoot.cloneNode( true );
     pdomCopy.removeAttribute( 'style' );
@@ -427,7 +422,7 @@ <h3>State Descriptions for pH Scale: Basics</h3>
 
         // update the PDOM copy after a delay to fix a FF/Safari bug where cloneNode prevents hidden DOM elements
         // in the iframe from staying hidden - see https://github.com/phetsims/chipper/issues/648
-        setTimeout( function() {
+        setTimeout( () => {
           setPDOMCopyContent( pdomRoot, copyContainer );
           dirty = false;
         }, 10 );
@@ -496,7 +491,7 @@ <h3>State Descriptions for pH Scale: Basics</h3>
       } );
     } );
 
-    liveObserver.observe( originalElement, mutationConfig )
+    liveObserver.observe( originalElement, mutationConfig );
   }
 
   /**
@@ -509,10 +504,6 @@ <h3>State Descriptions for pH Scale: Basics</h3>
     }
   }
 
-</script>
-
-<script type="application/javascript">
-
   // constants
   // see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit for details
   const MUTATION_OBSERVER_CONFIG = {
@@ -541,24 +532,24 @@ <h3>State Descriptions for pH Scale: Basics</h3>
 
       const simFrame = document.getElementById( 'iframe' );
       const innerWindow = simFrame.contentWindow;
-      const PDOMRoot = innerWindow.phet.joist.display.pdomRootElement; // copy of the parallel DOM
+      // eslint-disable-next-line dot-notation
+      const PDOMRoot = innerWindow[ 'phet' ].joist.display.pdomRootElement; // copy of the parallel DOM
 
       // get the alert dom elements from the iframe's inner document
-      const ariaLiveElementsContainer = innerWindow.phet.joist.sim.display.descriptionUtteranceQueue.announcer.ariaLiveContainer;
+      // eslint-disable-next-line dot-notation
+      const ariaLiveElementsContainer = innerWindow[ 'phet' ].joist.sim.display.descriptionUtteranceQueue.announcer.ariaLiveContainer;
 
       // get the alert dom elements from the PDOM copy
       const alertList = document.getElementById( 'alert-list' );
 
       // strip the styling from the copied DOM elements
 
-      // TODO: why do we do this? Isn't this an element purely in the a11y view? https://github.com/phetsims/chipper/issues/916
       alertList.removeAttribute( 'style' );
 
       // get the parent container for the parallel DOM copy and the alert content
       const copyContainer = document.getElementById( 'dom-copy-container' );
 
       // once for initial setup
-      // TODO: do we have to do this? https://github.com/phetsims/chipper/issues/916
       setPDOMCopyContent( PDOMRoot, copyContainer );
 
       // update the PDOM copy whenever the sim's PDOM changes
@@ -577,7 +568,6 @@ <h3>State Descriptions for pH Scale: Basics</h3>
       document.getElementById( 'iframe' ).focus();
 
       // Provide fake focus highlighting to the PDOM copy based on what is actually highlighted in the sim.
-      // TODO: is polling the best way to do this? If so why 500? https://github.com/phetsims/chipper/issues/916
       let previousElement = null;
       setInterval( () => {