Skip to content

Commit

Permalink
fix lint common code a11y views, phetsims/chipper#1408
Browse files Browse the repository at this point in the history
  • Loading branch information
zepumph committed Sep 29, 2023
1 parent eeef160 commit 935eedd
Showing 1 changed file with 22 additions and 7 deletions.
29 changes: 22 additions & 7 deletions fourier-making-waves_a11y_view.html
Original file line number Diff line number Diff line change
Expand Up @@ -166,10 +166,16 @@ <h1>A11y View: Fourier: Making Waves</h1>
<details>
<summary>About the A11y View Tool</summary>
<p>
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.
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> 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.
<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>
Expand All @@ -186,7 +192,11 @@ <h3 class="activity-log-heading-item">Activity log of Responsive Descriptions</h
</div>
<details>
<summary>About Responsive Descriptions</summary>
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.
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'>
Expand All @@ -202,7 +212,11 @@ <h3 class="activity-log-heading-item">Activity log of Responsive Descriptions</h
<h3>State Descriptions for Fourier: Making Waves</h3>
<details>
<summary>About State Descriptions</summary>
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).
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>
Expand Down Expand Up @@ -257,7 +271,6 @@ <h3>State Descriptions for Fourier: Making Waves</h3>
</script>

<script>
/* eslint-disable bad-phet-library-text */
// Number of alerts that remain in the Activity log before fading out.
const ACTIVITY_LOG_LENGTH = 10;

Expand Down Expand Up @@ -519,10 +532,12 @@ <h3>State Descriptions for Fourier: Making Waves</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' );
Expand Down

0 comments on commit 935eedd

Please sign in to comment.