forked from phetsims/friction
-
Notifications
You must be signed in to change notification settings - Fork 0
/
friction_a11y_view.html
446 lines (362 loc) · 15.5 KB
/
friction_a11y_view.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
<!DOCTYPE HTML>
<!-- Top-level HTML file for viewing, generated by 'grunt generate-a11y-view-html' DO NOT EDIT THIS FILE ONCE BUILT-->
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="phet-sim-level" content="production">
<!--have to scroll right and left! allows to resize also-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A11y View: Friction</title>
<style>
html {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
}
body {
display: block;
margin: 1em 1em 2em;
width: 100%;
background: #ccc;
}
h3 {
margin-top: 0
}
.alert_copy_container ul {
-webkit-padding-start: 20px
}
.left {
position: fixed;
width: 47%;
}
/* This class was found online as a way to preserve an iframe aspect ratio,
see https://fettblog.eu/blog/2013/06/16/preserving-aspect-ratio-for-embedded-iframes/*/
.aspect-ratio {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 67%;
}
iframe {
width: 43%;
height: 30vw;
max-height: 30vw;
position: fixed;
}
div.right {
background: #ccc;
float: right;
width: 47%;
overflow: auto;
}
div.clearfix {
clear: both;
}
p.alert {
opacity: 0.6;
}
div.alert_copy_container {
background: #e5c45b;
border-radius: 1em;
padding: .25em .75em 1em;
min-height: 7em;
}
p.alert_copy {
min-height: 5em;
}
div.dom_copy_container {
background: #a0e1e7;
border-radius: 1em;
padding: 1em;
}
div.dom_copy_container li {
margin-bottom: .5em;
}
div.wrapper {
height: auto;
width: 95%;
margin-bottom: 2em;
}
.dynamic {
background-color: #9adaa6;
border-bottom: double 3px #000; /*or a border in dark green*/
}
em { /* this is the same as the dynamic class, but should be changed as part of https://github.com/phetsims/a11y-research/issues/67*/
background-color: #9adaa6;
border-bottom: double 3px #000; /*or a border in dark green*/
}
.highlight {
border: thick double red;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="content">
<div class="left">
<h1>A11y View: Friction</h1>
<div class="aspect-ratio">
<iframe id="iframe" allowfullscreen scrolling="no" title="Interact with Friction"></iframe>
</div>
<div id="alerts">
<h3>Activity log of Interactive Alerts</h3>
<p>
Interactive alerts are read out as the user interacts providing a description of what is happening in
real-time. Alerts appear in reverse chronological order with the latest on top.
</p>
<div id=alert-copy-container class=alert_copy_container>
<div id='polite-element-container'>
<ul class='alert_copy' id='alert-list'></ul>
</div>
</div>
</div>
</div>
<!--The PDOM copy will be placed in this container, along with a section just for alerts -->
<div class="right">
<div id="intro">
<h2>What is the A11y View?</h2>
<p>
The A11y View is a design and presentation tool that allows us to visually demonstrate the accessibility layer
of the simulation. We refer to this layer as the Parallel DOM, or PDOM. The PDOM (copied into the blue box)
exposes the simulation’s full document structure and all the dynamic descriptive content that lives within
that structure to a student accessing the simulation using assistive technology, such as screen reader
software. The activity log (copied into the orange box), exposes the interactive alerts that a student would
hear in real-time as they interact with the simulation. Interact with the accessible version of
Friction in the iframe, with either a keyboard or a mouse, and notice how the activity log (orange
box) and the content of the PDOM (blue box) update as you interact.
</p>
<p>
<b>Please note</b> that students do not use the A11y View, they use the accessible simulation, alone, which is
rendered here inside the iframe.
</p>
</div>
<h3>PDOM & Descriptions for Friction</h3>
<p>Content in the blue box updates in real-time to provide an always-available description of the current state of
the sim.</p>
<div id="dom-copy-container" class="dom_copy_container" role="presentation"></div>
</div>
<!--clear the blocks after the float effect-->
<div class="clearfix"></div>
</div>
</div>
<script type="application/javascript">
var IS_BUILT_STRING = '{{IS_BUILT}}';
var IS_BUILT = IS_BUILT_STRING.indexOf( '{{' ) !== 0;
// Grab all query parameters to pass to the simulation, and a couple of params that are required for this test
var simulationQueryString = window.location.search;
if ( simulationQueryString.indexOf( '?' ) >= 0 ) {
simulationQueryString += '&';
}
else {
simulationQueryString += '?';
}
var noPostMessage = simulationQueryString.indexOf( 'postMessageOnLoad&postMessageOnError' ) === -1;
var noAccessibility = simulationQueryString.indexOf( 'accessibility' ) === -1;
noPostMessage && ( simulationQueryString += 'postMessageOnLoad&postMessageOnError&' );
noAccessibility && ( simulationQueryString += 'accessibility' );
var repoLocale = 'friction_en';
var filenameEnding = IS_BUILT ? '_phet.html' : '.html';
var simURL = repoLocale + filenameEnding + simulationQueryString;
// set the source of the sim iframe
document.getElementById( 'iframe' ).setAttribute( 'src', simURL );
</script>
<script type="application/javascript">
/**
* Get all 'element' nodes off the parent element, placing them in an array for easy traversal. Note that this
* includes all elements, even those that are 'hidden' or purely for structure.
*
* @param {HTMLElement} ancestor - parent whose children will be linearized
* @returns {HTMLElement[]}
* @private
*/
function getAllDOMElementsAsLinear( ancestor ) {
// gets ALL descendant children for the element
var children = ancestor.getElementsByTagName( '*' );
var linearDOM = [];
for ( var i = 0; i < children.length; i++ ) {
// searching for the HTML element nodes (NOT Scenery nodes)
if ( children[ i ].nodeType === Node.ELEMENT_NODE ) {
linearDOM[ i ] = ( children[ i ] );
}
}
return linearDOM;
}
/**
* Apply the necessary styling to the PDOM copy so that it looks and behaves well. This includes removing from
* navigation order and ensuring that all of the styling copied from the actual PDOM is removed so that the copy
* is visible and elements have proper dimensions.
*
* @param {HTMLElement} root - ancestor element, this and all descendants will be styled
*/
function styleCopy( root ) {
var allElements = getAllDOMElementsAsLinear( root );
for ( var i = 0; i < allElements.length; i++ ) {
var element = allElements[ i ];
// 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
if ( element.className !== "pdom-style" ) {
element.removeAttribute( 'style' );
}
}
}
// handling messages from sims
window.addEventListener( 'message', function( evt ) {
if ( !evt.data ) {
return;
}
var data = JSON.parse( evt.data );
// if load is successful, create a visualization of the parallel DOM
if ( data.type === 'load' ) {
var simFrame = document.getElementById( 'iframe' );
var innerDoc = simFrame.contentDocument || simFrame.contentWindow.document;
// copy of the parallel DOM
var PDOMRoot = simFrame.contentWindow.phet.joist.sim.display.accessibleDOMElement;
var PDOMCopy = PDOMRoot.cloneNode( true );
// get the alert dom elements from the iframe's inner document
var politeElement1 = innerDoc.getElementById( 'polite-1' );
var politeElement2 = innerDoc.getElementById( 'polite-2' );
var politeElement3 = innerDoc.getElementById( 'polite-3' );
var politeElement4 = innerDoc.getElementById( 'polite-4' );
// get the alert dom elements from the PDOM copy
var alertList = document.getElementById( 'alert-list' );
// strip the styling from the copied DOM elements
PDOMCopy.removeAttribute( 'style' );
alertList.removeAttribute( 'style' );
// strip style from all elements in the DOM
getAllDOMElementsAsLinear( PDOMCopy ).forEach( function( element ) {
element.removeAttribute( 'style' );
} );
// get the parent container for the parallel DOM copy and the alert content
var copyContainer = document.getElementById( 'dom-copy-container' );
// add the copies to the outer document
copyContainer.appendChild( PDOMCopy );
styleCopy( PDOMCopy );
/**
* Convert the inline ARIA labels with label information to input values or additional label elements in the
* PDOM copy so that they are visible in demonstrations. For example, this could be an aria-label, aria-valuetext,
* and so on.
*
* @param {HTMLElement} rootNode - descendants of this root are traversed so we have
*/
function addInlineAttributesTHTML( rootNode ) {
// all elements in the PDOM - a defensive copy since we may be adding new elements to the DOM
var allElements = Array.prototype.slice.call( rootNode.getElementsByTagName( "*" ) );
for ( var i = 0; i < allElements.length; i++ ) {
var element = allElements[ i ];
if ( element.hasAttribute( 'aria-label' ) && element.innerHTML === '' ) {
var ariaLabel = element.getAttribute( 'aria-label' );
// remove the style
element.removeAttribute( 'style' );
if ( element.tagName.toLowerCase() === 'input' ) {
if ( element.type === 'button' ) {
// set the value of the input to be the same as the aria-label appears inside the button
element.setAttribute( 'value', ariaLabel );
}
else {
// add a special label element to appear before the input element
var labelElement = document.createElement( 'label' );
labelElement.textContent = ariaLabel;
var parentElement = element.parentNode;
parentElement.insertBefore( labelElement, parentElement.firstChild );
}
}
else {
// if not an input, then add it to the innerHTML of an element, without overriding what is already there.
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
var valueTextElement = document.createElement( 'p' );
valueTextElement.className = "pdom-style";
valueTextElement.style.opacity = 0.55;
valueTextElement.textContent = element.getAttribute( 'aria-valuetext' );
element.parentNode.appendChild( valueTextElement );
}
}
}
addInlineAttributesTHTML( PDOMCopy );
// whenever an element in the parallel DOM changes, we need to update its copied element as well
var domObserver = new MutationObserver( function( mutations ) {
// 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() {
// 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
copyContainer.removeChild( PDOMCopy );
PDOMCopy = PDOMRoot.cloneNode( true );
PDOMCopy.removeAttribute( 'style' );
copyContainer.appendChild( PDOMCopy );
addInlineAttributesTHTML( PDOMCopy );
// we have to update styles of all elements when they are cloned
styleCopy( PDOMCopy );
}, 10 );
} );
// configuration of the dom observer:
var config = { attributes: true, childList: true, characterData: true, subtree: true };
// pass in the target node, as well as the observer options
domObserver.observe( PDOMRoot, config );
// add mutation observers to each of the aria-live elements
function addLiveObserver( originalElement, listElement ) {
var liveObserver = new MutationObserver( function( mutations ) {
mutations.forEach( function( mutation ) {
var alertText = mutation.target.textContent;
// update the text content of the copied element to match the element in the iframe document
// create a list item to add to the alert list
if ( alertText.length > 0 ) {
var listItem = document.createElement( 'li' );
listItem.style.opacity = 1.0;
listItem.textContent = alertText;
listElement.insertBefore( listItem, listElement.children[ 0 ] );
// items fade out as they get older
for ( var j = 0; j < listElement.children.length; j++ ) {
listElement.children[ j ].style.opacity = 1.0 / ( j + 1 ) + 0.25;
}
// if the list is too large, remove the last items from the list
var childrenArray = Array.prototype.slice.call( listElement.children );
var fadeArray = childrenArray.slice( 5, childrenArray.length );
for ( var i = 0; i < fadeArray.length; i++ ) {
var fadeChild = fadeArray[ i ];
var fadeout = function() {
fadeChild.style.opacity = fadeChild.style.opacity * 0.95;
// stop animating and remove child
if ( listElement.contains( fadeChild ) && fadeChild.style.opacity < 0.1 ) {
window.clearInterval( intervalId );
listElement.removeChild( fadeChild );
}
};
var intervalId = window.setInterval( fadeout, 20 );
}
}
} );
} );
liveObserver.observe( originalElement, config )
}
// observe each of the live elements and add new text content to the list view
addLiveObserver( politeElement1, alertList );
addLiveObserver( politeElement2, alertList );
addLiveObserver( politeElement3, alertList );
addLiveObserver( politeElement4, alertList );
// set focus to the loaded iframe
document.getElementById( 'iframe' ).focus();
// Provide fake focus highlighting to the PDOM copy based on what is actually highlighted in the sim.
var previousElement = null;
setInterval( function() {
if ( previousElement ) {
previousElement.classList.remove( 'highlight' );
}
previousElement = document.getElementById( 'iframe' ).contentWindow.document.activeElement;
previousElement.classList.add( 'highlight' );
}, 500 );
}
} );
</script>
</body>
</html>