Skip to content

Commit c0571d7

Browse files
IsaDCgithub-actions[bot]
IsaDC
authored and
github-actions[bot]
committed
Generate .html source files with scripts automatically
1 parent f895f61 commit c0571d7

File tree

3 files changed

+240
-0
lines changed

3 files changed

+240
-0
lines changed

‎tests/vertical-temperature-slider/reference/2022-8-2_134950/slider-temperature.setFocusAfterSlider.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>Vertical Temperature Slider Example</title>
8+
9+
<link rel="stylesheet" href="css/slider-temperature.css">
10+
<script src="js/slider-temperature.js"></script>
11+
12+
<!-- Generated by create-example-tests.js -->
13+
<script>
14+
(function() {
15+
function setupScript(testPageDocument) {
16+
// setFocusAfterSlider
17+
// sets focus on a link after the slider
18+
testPageDocument.querySelector('#afterlink').focus();
19+
20+
};
21+
document.addEventListener('click', function(event) {
22+
if (event.target.classList.contains('button-run-test-setup')) {
23+
event.target.disabled = true;
24+
setupScript(document);
25+
}
26+
});
27+
})();
28+
</script>
29+
<!-- End of generated output --></head>
30+
<body>
31+
<main>
32+
<h1>Vertical Temperature Slider Example</h1>
33+
<div class="advisement">
34+
<p>
35+
The following example is a vertically oriented temperature control that implements the
36+
<a href="https://w3c.github.io/aria-practices/#slider">slider design pattern.</a>
37+
The slider illustrates use of <code>aria-orientation</code> to specify vertical orientation and use of <code>aria-valuetext</code> to convey unit of measure for numeric values to assistive technology users by appending <q>degrees Celsius</q> to the current value.
38+
</p>
39+
<section>
40+
<div class="example-header">
41+
<h2 id="ex_label">Example</h2>
42+
</div>
43+
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
44+
<div id="ex1" class="example">
45+
<div class="slider-temperature">
46+
<a id="beforelink" href="#beforelink">Navigate forwards from here</a>
47+
<div id="id-temp-label" class="label">Temperature</div>
48+
49+
<svg role="none" class="slider-group" width="145" height="360">
50+
<text class="temp-value" x="28" y="35">25°C</text>
51+
<rect class="rail" x="60" y="47" width="8" height="300" rx="5" aria-hidden="true"/>
52+
<g role="slider"
53+
id="id-temp-slider"
54+
aria-orientation="vertical"
55+
tabindex="0"
56+
aria-valuemin="10.0"
57+
aria-valuenow="25.0"
58+
aria-valuetext="25.0 degrees Celsius"
59+
aria-valuemax="38.0"
60+
aria-labelledby="id-temp-label">
61+
<text class="value" x="94" y="150">25°C</text>
62+
<rect class="focus-ring"
63+
x="35" y="170" width="105" height="24" rx="12" />
64+
<rect class="thumb"
65+
x="35" y="145" width="48" height="14" rx="5"/>
66+
</g>
67+
</svg>
68+
<a id="afterlink" href="#afterlink">Navigate backwards from here</a>
69+
</div>
70+
</div>
71+
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
72+
</section>
73+
74+
<!-- Generated by create-example-tests.js -->
75+
<div style="position: relative; left: 0; right: 0; height: 2rem;">
76+
<button class="button-run-test-setup" autofocus style="height: 100%; width: 100%;">Run Test Setup</button>
77+
</div>
78+
<!-- End of generated output --></main>
79+
</body>
80+
</html>

‎tests/vertical-temperature-slider/reference/2022-8-2_134950/slider-temperature.setFocusBeforeSlider.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>Vertical Temperature Slider Example</title>
8+
9+
<link rel="stylesheet" href="css/slider-temperature.css">
10+
<script src="js/slider-temperature.js"></script>
11+
12+
<!-- Generated by create-example-tests.js -->
13+
<script>
14+
(function() {
15+
function setupScript(testPageDocument) {
16+
// setFocusBeforeSlider
17+
// sets focus on a link before the slider
18+
testPageDocument.querySelector('#beforelink').focus();
19+
20+
};
21+
document.addEventListener('click', function(event) {
22+
if (event.target.classList.contains('button-run-test-setup')) {
23+
event.target.disabled = true;
24+
setupScript(document);
25+
}
26+
});
27+
})();
28+
</script>
29+
<!-- End of generated output --></head>
30+
<body>
31+
<main>
32+
<h1>Vertical Temperature Slider Example</h1>
33+
<div class="advisement">
34+
<p>
35+
The following example is a vertically oriented temperature control that implements the
36+
<a href="https://w3c.github.io/aria-practices/#slider">slider design pattern.</a>
37+
The slider illustrates use of <code>aria-orientation</code> to specify vertical orientation and use of <code>aria-valuetext</code> to convey unit of measure for numeric values to assistive technology users by appending <q>degrees Celsius</q> to the current value.
38+
</p>
39+
<section>
40+
<div class="example-header">
41+
<h2 id="ex_label">Example</h2>
42+
</div>
43+
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
44+
<div id="ex1" class="example">
45+
<div class="slider-temperature">
46+
<a id="beforelink" href="#beforelink">Navigate forwards from here</a>
47+
<div id="id-temp-label" class="label">Temperature</div>
48+
49+
<svg role="none" class="slider-group" width="145" height="360">
50+
<text class="temp-value" x="28" y="35">25°C</text>
51+
<rect class="rail" x="60" y="47" width="8" height="300" rx="5" aria-hidden="true"/>
52+
<g role="slider"
53+
id="id-temp-slider"
54+
aria-orientation="vertical"
55+
tabindex="0"
56+
aria-valuemin="10.0"
57+
aria-valuenow="25.0"
58+
aria-valuetext="25.0 degrees Celsius"
59+
aria-valuemax="38.0"
60+
aria-labelledby="id-temp-label">
61+
<text class="value" x="94" y="150">25°C</text>
62+
<rect class="focus-ring"
63+
x="35" y="170" width="105" height="24" rx="12" />
64+
<rect class="thumb"
65+
x="35" y="145" width="48" height="14" rx="5"/>
66+
</g>
67+
</svg>
68+
<a id="afterlink" href="#afterlink">Navigate backwards from here</a>
69+
</div>
70+
</div>
71+
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
72+
</section>
73+
74+
<!-- Generated by create-example-tests.js -->
75+
<div style="position: relative; left: 0; right: 0; height: 2rem;">
76+
<button class="button-run-test-setup" autofocus style="height: 100%; width: 100%;">Run Test Setup</button>
77+
</div>
78+
<!-- End of generated output --></main>
79+
</body>
80+
</html>

‎tests/vertical-temperature-slider/reference/2022-8-2_134950/slider-temperature.setFocusOnSlider.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>Vertical Temperature Slider Example</title>
8+
9+
<link rel="stylesheet" href="css/slider-temperature.css">
10+
<script src="js/slider-temperature.js"></script>
11+
12+
<!-- Generated by create-example-tests.js -->
13+
<script>
14+
(function() {
15+
function setupScript(testPageDocument) {
16+
// setFocusOnSlider
17+
// sets focus on the slider
18+
testPageDocument.querySelector('[role="slider"]').focus();
19+
20+
};
21+
document.addEventListener('click', function(event) {
22+
if (event.target.classList.contains('button-run-test-setup')) {
23+
event.target.disabled = true;
24+
setupScript(document);
25+
}
26+
});
27+
})();
28+
</script>
29+
<!-- End of generated output --></head>
30+
<body>
31+
<main>
32+
<h1>Vertical Temperature Slider Example</h1>
33+
<div class="advisement">
34+
<p>
35+
The following example is a vertically oriented temperature control that implements the
36+
<a href="https://w3c.github.io/aria-practices/#slider">slider design pattern.</a>
37+
The slider illustrates use of <code>aria-orientation</code> to specify vertical orientation and use of <code>aria-valuetext</code> to convey unit of measure for numeric values to assistive technology users by appending <q>degrees Celsius</q> to the current value.
38+
</p>
39+
<section>
40+
<div class="example-header">
41+
<h2 id="ex_label">Example</h2>
42+
</div>
43+
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
44+
<div id="ex1" class="example">
45+
<div class="slider-temperature">
46+
<a id="beforelink" href="#beforelink">Navigate forwards from here</a>
47+
<div id="id-temp-label" class="label">Temperature</div>
48+
49+
<svg role="none" class="slider-group" width="145" height="360">
50+
<text class="temp-value" x="28" y="35">25°C</text>
51+
<rect class="rail" x="60" y="47" width="8" height="300" rx="5" aria-hidden="true"/>
52+
<g role="slider"
53+
id="id-temp-slider"
54+
aria-orientation="vertical"
55+
tabindex="0"
56+
aria-valuemin="10.0"
57+
aria-valuenow="25.0"
58+
aria-valuetext="25.0 degrees Celsius"
59+
aria-valuemax="38.0"
60+
aria-labelledby="id-temp-label">
61+
<text class="value" x="94" y="150">25°C</text>
62+
<rect class="focus-ring"
63+
x="35" y="170" width="105" height="24" rx="12" />
64+
<rect class="thumb"
65+
x="35" y="145" width="48" height="14" rx="5"/>
66+
</g>
67+
</svg>
68+
<a id="afterlink" href="#afterlink">Navigate backwards from here</a>
69+
</div>
70+
</div>
71+
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
72+
</section>
73+
74+
<!-- Generated by create-example-tests.js -->
75+
<div style="position: relative; left: 0; right: 0; height: 2rem;">
76+
<button class="button-run-test-setup" autofocus style="height: 100%; width: 100%;">Run Test Setup</button>
77+
</div>
78+
<!-- End of generated output --></main>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)