Skip to content

Commit

Permalink
lint and disable lint in many html files, phetsims/chipper#1405
Browse files Browse the repository at this point in the history
  • Loading branch information
@zepumph
zepumph committed Oct 7, 2023
1 parent 84c230c commit d456b0b
Showing 1 changed file with 27 additions and 37 deletions.
64 changes: 27 additions & 37 deletions ph-scale-basics_a11y_view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'>
Expand All @@ -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>
Expand All @@ -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;
Expand Down Expand Up @@ -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' );
Expand All @@ -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;

Expand Down Expand Up @@ -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' );
}
Expand Down Expand Up @@ -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' );
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -496,7 +491,7 @@ <h3>State Descriptions for pH Scale: Basics</h3>
} );
} );

liveObserver.observe( originalElement, mutationConfig )
liveObserver.observe( originalElement, mutationConfig );
}

/**
Expand All @@ -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 = {
Expand Down Expand Up @@ -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
Expand All @@ -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( () => {

Expand Down

0 comments on commit d456b0b

Please sign in to comment.