├── -assets
    ├── aom.js
    ├── search.jpg
    ├── shared.css
    └── shared.js
├── .gitignore
├── LICENSE
├── README.md
├── aria-directory
    └── index.html
├── aria-haspopup
    └── index.html
├── aria-hidden
    └── index.html
├── aria-img
    └── index.html
├── aria-landmark-form
    └── index.html
├── aria-list
    └── group.html
├── aria-live
    ├── default-alert.html
    ├── default-assertive.html
    ├── default-empty.html
    ├── default-log.html
    ├── default-marquee.html
    ├── default-polite.html
    ├── default-progressbar.html
    ├── default-status.html
    ├── default-timer.html
    ├── index.html
    ├── shadow.html
    ├── svg.html
    └── timer.html
├── aria-none
    └── index.html
├── aria-option
    └── index.html
├── aria-owns
    └── index.html
├── aria-readonly-chk
    └── index.html
├── aria-region
    └── index.html
├── aria-vs-html-roles
    └── index.html
├── attr-html
    ├── _support
    │   ├── ElephantsDream.mp4
    │   ├── style.css
    │   ├── subtitles-en.vtt
    │   └── subtitles-es.vtt
    ├── abbr.html
    ├── accept-charset.html
    ├── accept.html
    ├── accesskey.html
    ├── action.html
    ├── allow.html
    ├── allowfullscreen.html
    ├── allowpaymentrequest.html
    ├── alt-area.html
    ├── alt-img.html
    ├── alt-input.html
    ├── as.html
    ├── async.html
    ├── autocapitalize-form.html
    ├── autocapitalize.html
    ├── autoccomplete-form.html
    ├── autoccomplete.html
    ├── autofocus-ahref.html
    ├── autofocus-contenteditablehtml.html
    ├── autofocus-p.html
    ├── autofocus-summary.html
    ├── autofocus.html
    ├── autoplay-controls-audio.html
    ├── autoplay-controls-video.html
    ├── charset.html
    ├── checked.html
    ├── cite.html
    ├── cols.html
    ├── colspan.html
    ├── contenteditable.html
    ├── decoding.html
    ├── defer.html
    ├── loop-audio.html
    ├── loop-video.html
    ├── minlength.html
    ├── pattern.html
    ├── ping.html
    ├── playsinline.html
    ├── reversed.html
    ├── rows.html
    ├── tabindex-a-href.html
    └── tabindex-a.html
├── attr-indeterminate
    └── index.html
├── css-content
    └── index.html
├── css-text
    └── index.html
├── html-a
    ├── a-aria-disabled.html
    ├── a-no-href.html
    └── placeholder.html
├── html-abbr
    └── index.html
├── html-address
    └── index.html
├── html-area
    ├── index.html
    └── yellow.jpg
├── html-article
    └── index.html
├── html-b
    └── index.html
├── html-bdi
    └── index.html
├── html-bdo
    └── index.html
├── html-blockquote
    ├── desc.html
    ├── index.html
    └── names.html
├── html-button
    ├── font-awesome.html
    ├── naming-1.html
    └── naming.html
├── html-cite
    └── index.html
├── html-code
    └── index.html
├── html-custom-element
    └── index.html
├── html-data
    └── index.html
├── html-del
    └── index.html
├── html-details-summary
    ├── index.html
    └── mixed-content.html
├── html-dl
    └── index.html
├── html-fieldset-legend
    ├── index.html
    ├── legends.html
    ├── radios.html
    └── roles.html
├── html-figure-figcaption
    ├── index.html
    └── screen-reader-results
    │   ├── earth.jpg
    │   ├── icon.svg
    │   └── index.html
├── html-footer
    └── contentinfo-landmark-tests.html
├── html-header
    ├── banner-landmark-tests.html
    └── firefox-a11ytree-aug2019.jpg
├── html-headings
    ├── 6plus.html
    ├── index.html
    └── within-legend.html
├── html-hgroup
    └── index.html
├── html-history-test
    ├── index.html
    └── test.html
├── html-hr
    └── index.html
├── html-i
    └── index.html
├── html-iframe
    └── index.html
├── html-img
    ├── broken.html
    ├── index.html
    ├── lazy-images-2.html
    ├── lazy-img-links.html
    ├── sample-usemap.png
    ├── usemap.html
    ├── whitespace.html
    ├── yellow-small.jpg
    └── yellow.jpg
├── html-inputs
    ├── double-label.html
    ├── example-req-checkbox-group.html
    ├── input-checkbox-required-group.html
    ├── input-checkbox-required.html
    ├── input-img.html
    ├── input-radio.html
    ├── input-range.html
    ├── input-steps.html
    ├── labelling.html
    ├── readonly.html
    └── size.html
├── html-ins
    └── index.html
├── html-kbd
    └── index.html
├── html-landmark-contentinfo
    └── index.html
├── html-landmarks
    ├── header-footer-main-no-div.html
    └── header-footer-main.html
├── html-lang
    └── index.html
├── html-lists
    ├── direct.html
    ├── empty.html
    ├── ol.html
    └── ul.html
├── html-menu
    ├── index.html
    └── menu.html
├── html-meter
    └── index.html
├── html-output
    ├── accessible-name.html
    ├── add.html
    ├── index.html
    ├── inject-text-only.html
    ├── reduced-test.html
    ├── toastput-aria.html
    └── toastput.html
├── html-p
    └── index.html
├── html-progress
    ├── auto-update-named.html
    ├── auto-update-unnamed.html
    └── index.html
├── html-ruby
    └── index.html
├── html-s
    └── index.html
├── html-samp
    └── index.html
├── html-select
    ├── index.html
    ├── label-value-attrs.html
    └── versions.html
├── html-small
    └── index.html
├── html-span
    └── aria-label.html
├── html-strong
    └── index.html
├── html-tables
    ├── empty-cells.html
    ├── expose-table.html
    └── index.html
├── html-title
    └── index.html
├── html-u
    └── index.html
└── html-var
    └── index.html


/-assets/aom.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Run through all test instances and duplicate the
 3 |  * tested code into a code block.
 4 |  */
 5 | (function ( doc, w, undefined ) {
 6 | 	'use strict';
 7 | 	var tests = doc.querySelectorAll('.test');
 8 | 	var el;
 9 | 	var resultArea;
10 | 
11 | 	var testCase = '.test__case button';
12 | 	var testResults = '.test__info__results__aom';
13 | 
14 | 	for ( var i = 0; i < tests.length; i++ ) {
15 | 		el = tests[i].querySelector(testCase);
16 | 		resultArea = tests[i].querySelector(testResults);
17 | 		var elID = el.id;
18 | 
19 | 		var name;
20 | 		var desc;
21 | 
22 | 		if ( el.ariaLabelledBy ) {
23 | 			name = doc.getElementById(el.ariaLabelledBy).innerText
24 | 		}
25 | 		else if ( el.ariaLabel ) {
26 | 			name = el.ariaLabel
27 | 		}
28 | 		else if ( el.parentNode.tagName === 'LABEL' ) {
29 | 			// if had additional label via for, append
30 | 			name = el.parentNode.textContent;
31 | 		}
32 | 		else if ( elID ) {
33 | 			name = document.querySelector('label[for="'+elID+'"]').innerText
34 | 		}
35 | 		else {
36 | 			name = el.innerText
37 | 		}
38 | 
39 | 		if ( el.ariaDescribedBy ) {
40 | 			desc = doc.getElementById(el.ariaDescribedBy).innerText
41 | 		}
42 | 		else if ( el.title ) {
43 | 			desc = el.title
44 | 		}
45 | 		else if ( el.tagName === 'BUTTON' && el.value ) {
46 | 			desc = el.value
47 | 		}
48 | 
49 | 		var label;
50 | 		resultArea.innerHTML = 'element: ' + el.tagName +
51 | 		'<br> role: ' + el.role +
52 | 		'<br> accName: ' + name +
53 | 		'<br> accDesc: ' + desc;
54 | 	}
55 | })(document, window);
56 | 


--------------------------------------------------------------------------------
/-assets/search.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scottaohara/tests/3b4e77239183b3d7af1437e36d14570e5e49c5d4/-assets/search.jpg


--------------------------------------------------------------------------------
/-assets/shared.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::before,
  3 | *::after {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | html,
  8 | body {
  9 | 	font-family: arial;
 10 | 	margin: 0;
 11 | 	padding: 0;
 12 | }
 13 | 
 14 | body {
 15 |   counter-reset: tests;
 16 |   overflow-x: hidden;
 17 | }
 18 | 
 19 | #app {
 20 | 	margin: auto;
 21 | 	max-width: 50em;
 22 | 	padding: 1.125em;
 23 | }
 24 | 
 25 | #app.fullwidth {
 26 |   max-width: 100%;
 27 | }
 28 | 
 29 | 
 30 | /**
 31 |  * test wrapper and related info element styles
 32 |  */
 33 | .test {
 34 | 	margin: 2em 0 1.25em 0;
 35 | }
 36 | 
 37 | .test > h2 {
 38 | 	margin-top: 0;
 39 | }
 40 | 
 41 | .test > h2::before {
 42 |   content: "Test " counter(tests) ": ";
 43 |   counter-increment: tests;
 44 | }
 45 | 
 46 | .test__info pre {
 47 | 	background: #111;
 48 | 	color: #fff;
 49 | 	margin: 0;
 50 | 	padding: .75em;
 51 |   overflow: auto;
 52 |   -moz-tab-size: 2;
 53 |   tab-size: 2;
 54 | }
 55 | 
 56 | .test__info details {
 57 | 	border: 1px solid #ccc;
 58 | 	display: block;
 59 | 	margin-top: -1px;
 60 | }
 61 | 
 62 | .test__info summary {
 63 |   cursor: default;
 64 | }
 65 | 
 66 | .test__info summary:focus,
 67 | .test__info summary:hover {
 68 |   outline: 2px solid blue;
 69 | }
 70 | 
 71 | .test__info summary,
 72 | .test__info details > div {
 73 |   padding: .75em;
 74 | }
 75 | 
 76 | .test__info details > div :last-child {
 77 |   margin-bottom: 0;
 78 | }
 79 | 
 80 | .test__info details > div :first-child {
 81 |   margin-top: 0
 82 | }
 83 | 
 84 | .test__case {
 85 | 	border: 1px solid #ccc;
 86 | 	padding: .825em;
 87 | }
 88 | 
 89 | 
 90 | 
 91 | /**
 92 |  * Results tables
 93 |  */
 94 | .results-table-wrap {
 95 |   overflow: auto;
 96 | }
 97 | 
 98 | .results-table-wrap.large table {
 99 |   table-layout: auto;
100 | }
101 | 
102 | .results-table-wrap.large td {
103 |   padding: .5em;
104 |   vertical-align: top;
105 | }
106 | 
107 | .results-table-wrap table {
108 |   border-spacing: 0;
109 |   border: 1px solid #111;
110 |   margin-left: 0;
111 |   margin-right: 0;
112 |   min-width: 820px;
113 |   table-layout: fixed;
114 |   text-align: left;
115 |   width: 100%;
116 | }
117 | 
118 | .results-table-wrap caption {
119 |   background: #eee;
120 |   border: 1px solid #111;
121 |   border-bottom: 0;
122 |   padding: .825em;
123 |   text-align: left;
124 | }
125 | 
126 | .results-table-wrap thead th {
127 |   background: #ddd;
128 | }
129 | 
130 | .results-table-wrap tbody tr:not(:last-of-type) > *,
131 | .results-table-wrap thead tr > * {
132 |   border-bottom: 1px solid #111;
133 | }
134 | 
135 | .results-table-wrap td,
136 | .results-table-wrap th {
137 |   padding: .25em;
138 | }
139 | 
140 | .results-table-wrap td:not(:last-of-type),
141 | .results-table-wrap th:not(:last-of-type) {
142 |   border-right: 1px solid #111;
143 | }
144 | 
145 | .results-table-wrap td:first-child,
146 | .results-table-wrap th:first-child {
147 |   border-right: 1px solid #111;
148 | }
149 | 
150 | 
151 | .results-table-wrap .na {
152 |   background: #eee;
153 | }
154 | 
155 | .results-table-wrap .na[contenteditable] {
156 |   background: #fff;
157 | }
158 | 
159 | .results-table-wrap .partial {
160 |   background: lightyellow;
161 | }
162 | 
163 | .results-table-wrap .fail {
164 |   background: darkred;
165 |   color: #fff;
166 | }
167 | 
168 | .results-table-wrap .pass {
169 |   background: darkgreen;
170 |   color: #fff;
171 | }
172 | 
173 | 
174 | 
175 | 
176 | 
177 | /**
178 |  * Some normalization for elements within tests
179 |  */
180 | button,
181 | input {
182 | 	font-size: inherit;
183 | }
184 | 


--------------------------------------------------------------------------------
/-assets/shared.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Run through all test instances and duplicate the
 3 |  * tested code into a code block.
 4 |  */
 5 | (function ( doc, w, undefined ) {
 6 | 	'use strict';
 7 | 	var template = doc.createElement('template');
 8 | 	template.innerHTML = "<div class='test__info__pattern'><details><summary></summary><pre><code></code></pre></details></div>";
 9 | 	var tests = doc.querySelectorAll('.test');
10 | 	var testArea;
11 | 	var infoArea;
12 | 	var printPattern;
13 | 	var patternLabel;
14 | 	var resultsLabel;
15 | 	var hasResults;
16 | 
17 | 	var testCase = '.test__case';
18 | 	var testInfo = '.test__info'
19 | 	var testPattern = '.test__info__pattern';
20 | 	var testResults = '.test__info__results';
21 | 
22 | 	for ( var i = 0; i < tests.length; i++ ) {
23 | 		testArea = tests[i].querySelector(testCase).innerHTML;
24 | 		infoArea = tests[i].querySelector(testInfo);
25 | 
26 | 		// just in case an info area has not been added
27 | 		if ( infoArea ) {
28 | 			infoArea.insertBefore(template.content.cloneNode(true), infoArea.firstChild);
29 | 
30 | 			patternLabel = tests[i].querySelector(testPattern + ' summary');
31 | 			printPattern = tests[i].querySelector(testPattern + ' details code');
32 | 			hasResults = tests[i].querySelector(testResults + ' summary');
33 | 
34 | 			patternLabel.textContent = 'Test ' + (i+1) + ' markup';
35 | 			printPattern.textContent = testArea.trim();
36 | 
37 | 			if ( hasResults ) {
38 | 				resultsLabel = hasResults.textContent;
39 | 				hasResults.textContent = 'Test ' + (i+1) + ' ' + resultsLabel;
40 | 			}
41 | 		}
42 | 	}
43 | })(document, window);
44 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Scott O'Hara
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # tests
2 | A place to share test files
3 | 


--------------------------------------------------------------------------------
/aria-list/group.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <h1>Testing ARIA lists with group</h1>
 3 | <p>Published <span>September 11, 2019</span></p>
 4 | 
 5 | <h2>Control list</h2>
 6 | <div role="list">
 7 |     <div role="listitem">item 1</div>
 8 |     <div role="listitem">item 2</div>
 9 |     <div role="listitem">item 3</div>
10 | </div>
11 | 
12 | <h2>List containing 2 groups</h2>
13 | <div role="list">
14 |   <div role="group">
15 |     <div role="listitem">item 1</div>
16 |     <div role="listitem">item 2</div>
17 |     <div role="listitem">item 3</div>
18 |   </div>
19 |   <div role="group" aria-label='foo'>
20 |     <div role="listitem">item 4</div>
21 |     <div role="listitem">item 5</div>
22 |     <div role="listitem">item 6</div>
23 |   </div>
24 | </div>
25 | 
26 | 
27 | 
28 | <hr>
29 | <p>
30 | role=list with groups in it breaks Safari + VO being able to discover the list.
31 | <p>
32 | role=list with 2 groups in it with Chrome + VO exposes a list of 2 items. individual items are not announced as being x of y.
33 | <p>
34 |   No issues with JAWS + Chrome/Firefox.  Group only announced by JAWS if has author provided name, and user navigates with virtual cursor.  Not announced if navigating by list items.
35 | 
36 | <p>
37 |   NVDA + Firefox announce list with 2 groups as a list with 2 items.  All items are accessible when navigating by list items.  Group name not announced when navigating by list item or virtual cursor.
38 | 
39 | <p>
40 |   NVDA + Chrome announce list with 2 groups as a list with 2 items.  All items are accessible when navigating by list items.  Accessible name of second group is sometimes announced.  Not sure what causes it to be/not to be announced at times.
41 | 


--------------------------------------------------------------------------------
/aria-live/default-alert.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA live regions: alert default</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing ARIA live regions</h1>
16 |         <div class="dates">
17 |           <p>Published: <time>June 18, 2019</time></p>
18 |           <p>Updated: <time>June 19, 2019</time></p>
19 |         </div>
20 |       </header>
21 | 
22 |       <div class="test">
23 |         <h2><code>role="alert"</code> in the DOM on page load</h2>
24 |         <div class="test__case">
25 |           <div role="alert">Alert text</div>
26 |         </div>
27 | 
28 |         <div class="test__info">
29 |           <div class="test__info__results">
30 |             <details>
31 |               <summary>results</summary>
32 |               <div>
33 |                 <ul>
34 |                   <li>macOS 10.14.4 VoiceOver with Safari 12.1: inconsistently announced on page load or refresh.</li>
35 |                   <li>macOS 10.14.4 VoiceOver with Chrome 75: inconsistently announced on page load or refresh.</li>
36 | 
37 |                   <li>JAWS 2019 (june) with IE11: not announced on page load or refresh.</li>
38 |                   <li>JAWS 2019 (june) with Edge 76 dev: announced on page load and refresh.</li>
39 |                   <li>JAWS 2019 (june) with Chrome 75: announced on page load and refresh.</li>
40 |                   <li>JAWS 2019 (june) with Firefox 67.0.3: not announced on page load or refresh.</li>
41 | 
42 |                   <li>NVDA 2019.1.1 with IE11: not announced on page load or refresh.</li>
43 |                   <li>NVDA 2019.1.1 with Edge 76 dev: announced on page load and refresh.</li>
44 |                   <li>NVDA 2019.1.1 with Chrome 75: announced on page load and refresh.</li>
45 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: not announced on page load or refresh.</li>
46 | 
47 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: not announced on page load or refresh.</li>
48 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: announced (twice) on page load and refresh.</li>
49 |                   <li>iOS 12.3.1 VoiceOver with Safari: announced on page load and refresh.</li>
50 |                 </ul>
51 |               </div>
52 |             </details>
53 |           </div>
54 |         </div>
55 |       </div>
56 | 
57 | 
58 |     </div> <!-- /#app -->
59 | 
60 |     <script src="../-assets/shared.js"></script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/aria-live/default-assertive.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA live regions: assertive default</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing ARIA live regions</h1>
16 |         <div class="dates">
17 |           <p>Published: <time>June 18, 2019</time></p>
18 |           <p>Updated: <time>June 19, 2019</time></p>
19 |         </div>
20 |       </header>
21 | 
22 |       <div class="test">
23 |         <h2><code>aria-live="assertive"</code> in the DOM on page load</h2>
24 |         <div class="test__case">
25 |           <div aria-live="assertive">Assertive text</div>
26 |         </div>
27 | 
28 |         <div class="test__info">
29 |           <div class="test__info__results">
30 |             <details>
31 |               <summary>results</summary>
32 |               <div>
33 |                 <ul>
34 |                   <li>macOS 10.14.4 VoiceOver with Safari 12.1: inconsistently announced on page load or refresh.</li>
35 |                   <li>macOS 10.14.4 VoiceOver with Chrome 75: not announced on page load or refresh.</li>
36 | 
37 |                   <li>JAWS 2019 (june) with IE11: not announced on page load or refresh.</li>
38 |                   <li>JAWS 2019 (june) with Edge 76 dev: not announced on page load or refresh.</li>
39 |                   <li>JAWS 2019 (june) with Chrome 75: not announced on page load or refresh.</li>
40 |                   <li>JAWS 2019 (june) with Firefox 67.0.3: not announced on page load or refresh.</li>
41 | 
42 |                   <li>NVDA 2019.1.1 with IE11: not announced on page load or refresh.</li>
43 |                   <li>NVDA 2019.1.1 with Edge 76 dev: not announced on page load or refresh.</li>
44 |                   <li>NVDA 2019.1.1 with Chrome 75: not announced on page load or refresh.</li>
45 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: not announced on page load or refresh.</li>
46 | 
47 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: not announced on page load or refresh.</li>
48 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: announced on page load and refresh.</li>
49 |                   <li>iOS 12.3.1 VoiceOver with Safari: announced on page load and refresh.</li>
50 |                 </ul>
51 |               </div>
52 |             </details>
53 |           </div>
54 |         </div>
55 |       </div>
56 | 
57 | 
58 |     </div> <!-- /#app -->
59 | 
60 |     <script src="../-assets/shared.js"></script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/aria-live/default-log.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA live regions: log default</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing ARIA live regions: log</h1>
16 |         <div class="dates">
17 |           <p>Published: <time>June 19, 2019</time></p>
18 |           <!-- <p>Updated: <time>June 19, 2019</time></p> -->
19 |         </div>
20 |       </header>
21 | 
22 |       <div class="test">
23 |         <h2><code>role="log"</code> in the DOM on page load</h2>
24 |         <div class="test__case">
25 |           <div role="log">log text</div>
26 |         </div>
27 | 
28 |         <div class="test__info">
29 |           <div class="test__info__results">
30 |             <details>
31 |               <summary>results</summary>
32 |               <div>
33 |                 <ul>
34 |                   <li>macOS 10.14.4 VoiceOver with Safari 12.1: not announced on page load or refresh.</li>
35 |                   <li>macOS 10.14.4 VoiceOver with Chrome 75: not announced on page load or refresh.</li>
36 | 
37 |                   <li>JAWS 2019 (june) with IE11: not announced on page load or refresh.</li>
38 |                   <li>JAWS 2019 (june) with Edge 76 dev: not announced on page load or refresh.</li>
39 |                   <li>JAWS 2019 (june) with Chrome 75: not announced on page load or refresh.</li>
40 |                   <li>JAWS 2019 (june) with Firefox 67.0.3: not announced on page load or refresh.</li>
41 | 
42 |                   <li>NVDA 2019.1.1 with IE11: not announced on page load or refresh.</li>
43 |                   <li>NVDA 2019.1.1 with Edge 76 dev: not announced on page load or refresh.</li>
44 |                   <li>NVDA 2019.1.1 with Chrome 75: not announced on page load or refresh.</li>
45 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: not announced on page load or refresh.</li>
46 | 
47 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: not announced on page load or refresh.</li>
48 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: announced (twice) on page load and refresh.</li>
49 |                   <li>iOS 12.3.1 VoiceOver with Safari: announced on page load and refresh.</li>
50 |                 </ul>
51 |               </div>
52 |             </details>
53 |           </div>
54 |         </div>
55 |       </div>
56 | 
57 | 
58 |     </div> <!-- /#app -->
59 | 
60 |     <script src="../-assets/shared.js"></script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/aria-live/default-marquee.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA live regions: marquee default</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing ARIA live regions: marquee</h1>
16 |         <div class="dates">
17 |           <p>Published: <time>June 19, 2019</time></p>
18 |           <!-- <p>Updated: <time>June 19, 2019</time></p> -->
19 |         </div>
20 |       </header>
21 | 
22 |       <div class="test">
23 |         <h2><code>role="marquee"</code> in the DOM on page load</h2>
24 |         <div class="test__case">
25 |           <div role="marquee">marquee text</div>
26 |         </div>
27 | 
28 |         <div class="test__info">
29 |           <div class="test__info__results">
30 |             <details>
31 |               <summary>results</summary>
32 |               <div>
33 |                 <ul>
34 |                   <li>macOS 10.14.4 VoiceOver with Safari 12.1: not announced on page load or refresh.</li>
35 |                   <li>macOS 10.14.4 VoiceOver with Chrome 75: not announced on page load or refresh.</li>
36 | 
37 |                   <li>JAWS 2019 (june) with IE11: not announced on page load or refresh.</li>
38 |                   <li>JAWS 2019 (june) with Edge 76 dev: not announced on page load or refresh.</li>
39 |                   <li>JAWS 2019 (june) with Chrome 75: not announced on page load or refresh.</li>
40 |                   <li>JAWS 2019 (june) with Firefox 67.0.3: not announced on page load or refresh.</li>
41 | 
42 |                   <li>NVDA 2019.1.1 with IE11: not announced on page load or refresh.</li>
43 |                   <li>NVDA 2019.1.1 with Edge 76 dev: not announced on page load or refresh.</li>
44 |                   <li>NVDA 2019.1.1 with Chrome 75: not announced on page load or refresh.</li>
45 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: not announced on page load or refresh.</li>
46 | 
47 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: not announced on page load or refresh.</li>
48 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: not announced on page load or refresh.</li>
49 |                   <li>iOS 12.3.1 VoiceOver with Safari: not announced on page load or refresh.</li>
50 |                 </ul>
51 |               </div>
52 |             </details>
53 |           </div>
54 |         </div>
55 |       </div>
56 | 
57 | 
58 |     </div> <!-- /#app -->
59 | 
60 |     <script src="../-assets/shared.js"></script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/aria-live/default-polite.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA live regions: polite default</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing ARIA live regions</h1>
16 |         <div class="dates">
17 |           <p>Published: <time>June 18, 2019</time></p>
18 |           <p>Updated: <time>June 19, 2019</time></p>
19 |         </div>
20 |       </header>
21 | 
22 |       <div class="test">
23 |         <h2><code>aria-live="polite"</code> in the DOM on page load</h2>
24 |         <div class="test__case">
25 |           <div aria-live="polite">Polite text</div>
26 |         </div>
27 | 
28 |         <div class="test__info">
29 |           <div class="test__info__results">
30 |             <details>
31 |               <summary>results</summary>
32 |               <div>
33 |                 <ul>
34 |                   <li>macOS 10.14.4 VoiceOver with Safari 12.1: not announced on page load or refresh.</li>
35 |                   <li>macOS 10.14.4 VoiceOver with Chrome 75: not announced on page load or refresh.</li>
36 | 
37 |                   <li>JAWS 2019 (june) with IE11: not announced on page load or refresh.</li>
38 |                   <li>JAWS 2019 (june) with Edge 76 dev: not announced on page load or refresh.</li>
39 |                   <li>JAWS 2019 (june) with Chrome 75: not announced on page load or refresh.</li>
40 |                   <li>JAWS 2019 (june) with Firefox 67.0.3: not announced on page load or refresh.</li>
41 | 
42 |                   <li>NVDA 2019.1.1 with IE11: not announced on page load or refresh.</li>
43 |                   <li>NVDA 2019.1.1 with Edge 76 dev: not announced on page load or refresh.</li>
44 |                   <li>NVDA 2019.1.1 with Chrome 75: not announced on page load or refresh.</li>
45 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: not announced on page load or refresh.</li>
46 | 
47 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: not announced on page load or refresh.</li>
48 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: announced on page load and refresh.</li>
49 |                   <li>iOS 12.3.1 VoiceOver with Safari: may be announced on page load. Announced on refresh.</li>
50 |                 </ul>
51 |               </div>
52 |             </details>
53 |           </div>
54 |         </div>
55 |       </div>
56 | 
57 | 
58 |     </div> <!-- /#app -->
59 | 
60 |     <script src="../-assets/shared.js"></script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/aria-live/default-progressbar.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA live regions: progressbar default</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing ARIA live regions: progressbar</h1>
16 |         <div class="dates">
17 |           <p>Published: <time>June 19, 2019</time></p>
18 |           <!-- <p>Updated: <time>June 19, 2019</time></p> -->
19 |         </div>
20 |       </header>
21 | 
22 |       <div class="test">
23 |         <h2><code>role="progressbar"</code> in the DOM on page load. Value 50%, aria-label="Testing</h2>
24 |         <div class="test__case">
25 |           <div role="progressbar"
26 |             aria-label="Testing"
27 |             aria-valuenow="50"
28 |             aria-valuemin="0"
29 |             aria-valuemax="100">50%</div>
30 |         </div>
31 | 
32 |         <div class="test__info">
33 |           <div class="test__info__results">
34 |             <details>
35 |               <summary>results</summary>
36 |               <div>
37 |                 <ul>
38 |                   <li>macOS 10.14.4 VoiceOver with Safari 12.1: not announced on page load or refresh.</li>
39 |                   <li>macOS 10.14.4 VoiceOver with Chrome 75: not announced on page load or refresh.</li>
40 | 
41 |                   <li>JAWS 2019 (june) with IE11: not announced on page load or refresh.</li>
42 |                   <li>JAWS 2019 (june) with Edge 76 dev: not announced on page load or refresh.</li>
43 |                   <li>JAWS 2019 (june) with Chrome 75: not announced on page load or refresh.</li>
44 |                   <li>JAWS 2019 (june) with Firefox 67.0.3: not announced on page load or refresh.</li>
45 | 
46 |                   <li>NVDA 2019.1.1 with IE11: not announced on page load or refresh.</li>
47 |                   <li>NVDA 2019.1.1 with Edge 76 dev: not announced on page load or refresh.</li>
48 |                   <li>NVDA 2019.1.1 with Chrome 75: not announced on page load or refresh.</li>
49 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: not announced on page load or refresh.</li>
50 | 
51 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: not announced on page load or refresh.</li>
52 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: not announced on page load or refresh.</li>
53 |                   <li>iOS 12.3.1 VoiceOver with Safari: not announced on page load or refresh.</li>
54 |                 </ul>
55 |               </div>
56 |             </details>
57 |           </div>
58 |         </div>
59 |       </div>
60 | 
61 | 
62 |     </div> <!-- /#app -->
63 | 
64 |     <script src="../-assets/shared.js"></script>
65 |   </body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/aria-live/default-status.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA live regions: Status default</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing ARIA live regions</h1>
16 |         <div class="dates">
17 |           <p>Published: <time>June 18, 2019</time></p>
18 |           <p>Updated: <time>June 19, 2019</time></p>
19 |         </div>
20 |       </header>
21 | 
22 |       <div class="test">
23 |         <h2><code>role="status"</code> in the DOM on page load</h2>
24 |         <div class="test__case">
25 |           <div role="status">Status text</div>
26 |         </div>
27 | 
28 |         <div class="test__info">
29 |           <div class="test__info__results">
30 |             <details>
31 |               <summary>results</summary>
32 |               <div>
33 |                 <ul>
34 |                   <li>macOS 10.14.4 VoiceOver with Safari 12.1: inconsistently announced on page load or refresh.</li>
35 |                   <li>macOS 10.14.4 VoiceOver with Chrome 75: not announced on page load/refresh.</li>
36 | 
37 |                   <li>JAWS 2019 (june) with IE11: not announced on page load or refresh.</li>
38 |                   <li>JAWS 2019 (june) with Edge 76 dev: not announced on page load or refresh.</li>
39 |                   <li>JAWS 2019 (june) with Chrome 75: not announced on page load or refresh.</li>
40 |                   <li>JAWS 2019 (june) with Firefox 67.0.3: not announced on page load or refresh.</li>
41 | 
42 |                   <li>NVDA 2019.1.1 with IE11: not announced on page load or refresh.</li>
43 |                   <li>NVDA 2019.1.1 with Edge 76 dev: not announced on page load or refresh.</li>
44 |                   <li>NVDA 2019.1.1 with Chrome 75: not announced on page load or refresh.</li>
45 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: not announced on page load or refresh.</li>
46 | 
47 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: not announced on page load or refresh.</li>
48 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: announced on page load and refresh.</li>
49 |                   <li>iOS 12.3.1 VoiceOver with Safari: announced on page load and refresh.</li>
50 |                 </ul>
51 |               </div>
52 |             </details>
53 |           </div>
54 |         </div>
55 |       </div>
56 | 
57 | 
58 |     </div> <!-- /#app -->
59 | 
60 |     <script src="../-assets/shared.js"></script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/aria-live/default-timer.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA live regions: timer default</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing ARIA live regions: timer</h1>
16 |         <div class="dates">
17 |           <p>Published: <time>June 19, 2019</time></p>
18 |           <!-- <p>Updated: <time>June 19, 2019</time></p> -->
19 |         </div>
20 |       </header>
21 | 
22 |       <div class="test">
23 |         <h2><code>role="timer"</code> in the DOM on page load</h2>
24 |         <div class="test__case">
25 |           <div role="timer">timer text</div>
26 |         </div>
27 | 
28 |         <div class="test__info">
29 |           <div class="test__info__results">
30 |             <details>
31 |               <summary>results</summary>
32 |               <div>
33 |                 <ul>
34 |                   <li>macOS 10.14.4 VoiceOver with Safari 12.1: not announced on page load or refresh.</li>
35 |                   <li>macOS 10.14.4 VoiceOver with Chrome 75: not announced on page load or refresh.</li>
36 | 
37 |                   <li>JAWS 2019 (june) with IE11: not announced on page load or refresh.</li>
38 |                   <li>JAWS 2019 (june) with Edge 76 dev: not announced on page load or refresh.</li>
39 |                   <li>JAWS 2019 (june) with Chrome 75: not announced on page load or refresh.</li>
40 |                   <li>JAWS 2019 (june) with Firefox 67.0.3: not announced on page load or refresh.</li>
41 | 
42 |                   <li>NVDA 2019.1.1 with IE11: not announced on page load or refresh.</li>
43 |                   <li>NVDA 2019.1.1 with Edge 76 dev: not announced on page load or refresh.</li>
44 |                   <li>NVDA 2019.1.1 with Chrome 75: not announced on page load or refresh.</li>
45 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: not announced on page load or refresh.</li>
46 | 
47 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: not announced on page load or refresh.</li>
48 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: not announced on page load or refresh.</li>
49 |                   <li>iOS 12.3.1 VoiceOver with Safari: not announced on page load or refresh.</li>
50 |                 </ul>
51 |               </div>
52 |             </details>
53 |           </div>
54 |         </div>
55 |       </div>
56 | 
57 | 
58 |     </div> <!-- /#app -->
59 | 
60 |     <script src="../-assets/shared.js"></script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/aria-live/timer.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA live regions: timer</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 |       li:not(:last-of-type) { margin-bottom: .5em; }
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing ARIA <code>role=timer</code></h1>
16 |         <div class="dates">
17 |           <p>Published: <time>March 2, 2022</time></p>
18 |         </div>
19 |       </header>
20 |       
21 |       <p>A <a href="https://www.w3.org/TR/wai-aria-1.2/#timer"><code>role=timer</code></a> is a live region with an implicit <code>aria-live=off</code>.</p>
22 |       <p>An <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-live"><code>aria-live=off</code></a> 
23 |         is not meant to announce dynamic changes "unless the user is currently focused on that region".</p>
24 |       <p>The following test has a <code>role=timer</code> with a <code>tabindex=0</code> to allow for testing with Virtual Cursor "focus" as well as keyboard focus.</p>
25 | 
26 |       <div class="test">
27 |         <h2><code>role="timer"</code> in the DOM on page load</h2>
28 |         <div class="test__case">
29 |           <div role=timer tabindex=0></div>
30 |           <script>
31 |             const timer = document.querySelector('[role=timer]');
32 |             let maxTime = 60 * 5;
33 | 
34 |             function startTimer ( duration ) {
35 |               counter = duration;
36 |               let minutes;
37 |               let seconds;
38 | 
39 |               setInterval ( function () {
40 |                 minutes = parseInt(counter / 60, 10);
41 |                 seconds = parseInt(counter % 60, 10);
42 | 
43 |                 minutes = minutes < 10 ? + minutes : minutes;
44 |                 seconds = seconds < 10 ? "0" + seconds : seconds;
45 | 
46 |                 timer.textContent = minutes + ':' + seconds;
47 | 
48 |                 if ( --counter < 0 ) {
49 |                   counter = duration;
50 |                 }
51 |               }, 1000);
52 |             }
53 |             startTimer(maxTime);	
54 |           </script>
55 |         </div>
56 | 
57 |         <div class="test__info">
58 |           <div class="test__info__results">
59 |             <details open>
60 |               <summary>results</summary>
61 |               <div>
62 |                 <ul>
63 |                   <li><div>macOS 11.6 VoiceOver with Safari 15.1:</div> updates not announced when focused with VC or keyboard focus. Timer role announced.</li>
64 | 
65 |                   <li><div>JAWS 2022.2110.60 with Edge &amp; Chrome 98:</div> updates not announced when focused with VC or keyboard focus. Timer role not announced.</li>
66 |                   <li><div>JAWS 2022.2110.60 with Firefox 97.0.1:</div> no announcement of content made if focused with <kbd>Tab</kbd> key. VC focus announces current value but not dynamic updates. Timer role not announced.</li>
67 |                   
68 |                   <li><div>NVDA 2021.3.3 with Edge &amp; Chrome 98:</div> updates not announced when focused with VC or keyboard focus. Timer role not announced.</li>
69 |                   <li><div>NVDA 2021.3.3 with Firefox 97.0.1:</div> updates not announced when focused with VC or keyboard focus. Timer role not announced.</li>
70 |                   
71 |                   <li><div>Narrator with Win10 and Edge 98:</div> updates not announced when focused with VC or keyboard focus. Timer role announced.</li>
72 | 
73 |                   <li><div>Android 12 TalkBack with Firefox 95.2:</div> updates announced while VC focus remains on element. Timer role not announced.</li>
74 |                   <li><div>Android 12 TalkBack with Chrome 96:</div> updates not announced when focused with VC. Timer role announced.</li>
75 |                   
76 |                   <li><div>iOS 15.3.1 VoiceOver with Safari:</div> no announcement of dynamic content. Is difficult to swipe to the dynamically updating content. VO focus will often skip over the countdown timer (nothing to do with the role. iOS VO just doesn't seem to like moving focus to content that updates so frequently). Timer role not announced.</li>
77 |                 </ul>
78 |               </div>
79 |             </details>
80 |           </div>
81 |         </div>
82 |       </div>
83 |     </div> <!-- /#app -->
84 |     <script src="../-assets/shared.js"></script>
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/aria-option/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>option tests</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing role=option</h1>
16 |         <div class="dates">
17 |           <p>Published: <span>September 12, 2019</span></p>
18 |           <!-- <p>Last Updated: <span>...</span></p> -->
19 |         </div>
20 |       </header>
21 |       <div class="test">
22 |         <h2>listbox containing options with combinations of aria-checked and selected</h2>
23 |         <div class="test__case">
24 |           <div role="listbox" aria-multiselectable="true">
25 | 
26 |             <div aria-hidden="true">-- aria-checked --</div>
27 | 
28 |             <div tabindex="0" role="option" aria-checked="false">Option 1</div>
29 |             <div tabindex="0" role="option" aria-checked="mixed">Option 2</div>
30 |             <div tabindex="0" role="option" aria-checked="true">Option 3</div>
31 |             <div tabindex="0" role="option" aria-checked="undefined">Option 4</div>
32 | 
33 |             <div aria-hidden="true">-- aria-selected --</div>
34 | 
35 |             <div tabindex="0" role="option" aria-selected="false">Option 5</div>
36 |             <div tabindex="0" role="option" aria-selected="true">Option 6</div>
37 |             <div tabindex="0" role="option" aria-selected="undefined">Option 7</div>
38 | 
39 |             <div aria-hidden="true">-- aria-selected and checked --</div>
40 | 
41 |             <div tabindex="0" role="option" aria-selected="false" aria-checked="false">Option 8</div>
42 |             <div tabindex="0" role="option" aria-selected="false" aria-checked="mixed">Option 9</div>
43 |             <div tabindex="0" role="option" aria-selected="false" aria-checked="true">Option 10</div>
44 |             <div tabindex="0" role="option" aria-selected="false" aria-checked="undefined">Option 11</div>
45 | 
46 |             <div tabindex="0" role="option" aria-selected="true" aria-checked="false">Option 8</div>
47 |             <div tabindex="0" role="option" aria-selected="true" aria-checked="mixed">Option 9</div>
48 |             <div tabindex="0" role="option" aria-selected="true" aria-checked="true">Option 10</div>
49 |             <div tabindex="0" role="option" aria-selected="true" aria-checked="undefined">Option 11</div>
50 | 
51 |             <div tabindex="0" role="option" aria-selected="undefined" aria-checked="false">Option 12</div>
52 |             <div tabindex="0" role="option" aria-selected="undefined" aria-checked="mixed">Option 13</div>
53 |             <div tabindex="0" role="option" aria-selected="undefined" aria-checked="true">Option 14</div>
54 |             <div tabindex="0" role="option" aria-selected="undefined" aria-checked="undefined">Option 15</div>
55 |           </div>
56 |         </div>
57 | 
58 |         <div class="test__info">
59 |           <!-- <div class="test__info__results">
60 |             <details>
61 |               <summary>results</summary>
62 |               <div>
63 |                 ...
64 |               </div>
65 |             </details>
66 |           </div> -->
67 |         </div>
68 |       </div>
69 | 
70 |     </div> <!-- /#app -->
71 | 
72 |     <script src="../-assets/shared.js"></script>
73 |   </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/aria-owns/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>aria-owns tests</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing aria-owns</h1>
16 |         <div class="dates">
17 |           <p>Published: <span>August 12, 2019</span></p>
18 |           <!-- <p>Last Updated: <span>...</span></p> -->
19 |         </div>
20 |       </header>
21 |       <div class="test">
22 |         <h2>div role=main with aria-owns</h2>
23 |         <div class="test__case">
24 |           <div role="main" aria-owns="bref">
25 |             Content within main.
26 |           </div>
27 |           <p>
28 |             <a href="#!">link outside of main and owned element</a>
29 |           </p>
30 |           <div id="bref">
31 |             Element "owned" by the main.
32 |           </div>
33 |         </div>
34 | 
35 |         <div class="test__info">
36 |           <!-- <div class="test__info__results">
37 |             <details>
38 |               <summary>results</summary>
39 |               <div>
40 |                 ...
41 |               </div>
42 |             </details>
43 |           </div> -->
44 |         </div>
45 |       </div>
46 | 
47 | 
48 |       <div class="test">
49 |         <h2>label with aria-owns</h2>
50 |         <div class="test__case">
51 |           <label aria-owns="lref" for="d">
52 |             Name
53 |           </label>
54 |           <input type="text" id="d">
55 |           <p>
56 |             <a href="#!">link outside of label and owned element</a>
57 |           </p>
58 |           <div id="lref">
59 |             Element "owned" by the label.
60 |           </div>
61 |         </div>
62 | 
63 |         <div class="test__info">
64 |           <!-- <div class="test__info__results">
65 |             <details>
66 |               <summary>results</summary>
67 |               <div>
68 |                 ...
69 |               </div>
70 |             </details>
71 |           </div> -->
72 |         </div>
73 |       </div>
74 | 
75 |     </div> <!-- /#app -->
76 | 
77 |     <script src="../-assets/shared.js"></script>
78 |   </body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/aria-region/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ARIA role=region</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing <code>role=region</code></h1>
16 |         <div class="dates">
17 |           <p>Published: <time>August 1, 2019</time></p>
18 |         </div>
19 |       </header>
20 | 
21 |       <div class="test">
22 |         <h2>role="region" with aria-label</h2>
23 |         <div class="test__case">
24 |           <span role="region" aria-label="A landmark!">I should be a landmark</span>
25 |         </div>
26 | 
27 |         <div class="test__info">
28 |           <div class="test__info__results">
29 |             <details>
30 |               <summary>results</summary>
31 |               <div></div>
32 |             </details>
33 |           </div>
34 |         </div>
35 |       </div>
36 | 
37 |       <div class="test">
38 |         <h2>role="region" without aria-label</h2>
39 |         <div class="test__case">
40 |           <span role="region">I am an element with role="region"</span>
41 |         </div>
42 | 
43 |         <div class="test__info">
44 |           <div class="test__info__results">
45 |             <details>
46 |               <summary>results</summary>
47 |               <div></div>
48 |             </details>
49 |           </div>
50 |         </div>
51 |       </div>
52 | 
53 | 
54 |     </div> <!-- /#app -->
55 | 
56 |     <script src="../-assets/shared.js"></script>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/attr-html/_support/ElephantsDream.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scottaohara/tests/3b4e77239183b3d7af1437e36d14570e5e49c5d4/attr-html/_support/ElephantsDream.mp4


--------------------------------------------------------------------------------
/attr-html/_support/style.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background: blue;
3 | }
4 | 


--------------------------------------------------------------------------------
/attr-html/_support/subtitles-en.vtt:
--------------------------------------------------------------------------------
 1 | WEBVTT
 2 | 
 3 | STYLE
 4 | ::cue {
 5 |   background: red;
 6 |   color: yellow;
 7 |   font-family: "Source Sans Pro", sans-serif;
 8 | }
 9 | 
10 | 1
11 | 00:02.170 --> 00:04.136
12 | - <v Proog><strong>Proog:</strong> Emo, close your eyes
13 | 
14 | 2
15 | 00:04.136 --> 00:05.597
16 | - <v Emo><strong>Emo:</strong> Why?
17 | - <v Proog><strong>Proog:</strong> NOW!
18 | 
19 | 3
20 | 00:05.597 --> 00:07.405
21 | - <v Emo><strong>Emo:</strong> OK...
22 | 
23 | 4
24 | 00:07.405 --> 00:08.803
25 | - <v Proog><strong>Proog:</strong> Good...
26 | 
27 | 5
28 | 00:08.803 --> 00:11.541
29 | What do you see at your left side Emo?
30 | 
31 | 6
32 | 00:11.541 --> 00:13.287
33 | - <v Emo><strong>Emo:</strong> Well...
34 | 
35 | 7
36 | 00:13.287 --> 00:16.110
37 | Er, nothing?
38 | - <v Proog><strong>Proog:</strong> Really?
39 | 
40 | 8
41 | 00:16.110 --> 00:18.514
42 | - <v Emo><strong>Emo:</strong> No, nothing at all!
43 | 
44 | 9
45 | 00:18.514 --> 00:22.669
46 | - <v Proog><strong>Proog:</strong> Really? and at your right?
47 | What do you see at your right side Emo?
48 | 
49 | 10
50 | 00:22.669 --> 00:26.111
51 | - <v Emo><strong>Emo:</strong> Umm, the same Proog
52 | 
53 | 11
54 | 00:26.111 --> 00:28.646
55 | Exactly the same! Nothing!
56 | 
57 | 12
58 | 00:28.646 --> 00:30.794
59 | - <v Proog><strong>Proog:</strong> Great
60 | 
61 | 


--------------------------------------------------------------------------------
/attr-html/_support/subtitles-es.vtt:
--------------------------------------------------------------------------------
 1 | WEBVTT
 2 | 
 3 | 1
 4 | 00:02.170 --> 00:04.136
 5 | - <v Proog><strong>Proog:</strong> Emo, cierra tus ojos
 6 | 
 7 | 2
 8 | 00:04.136 --> 00:05.597
 9 | - <v Emo><strong>Emo:</strong> ¿Por qué?
10 | - <v Proog><strong>Proog:</strong> ¡Ahora!
11 | 
12 | 3
13 | 00:05.597 --> 00:07.405
14 | - <v Emo><strong>Emo:</strong> Sí...
15 | 
16 | 4
17 | 00:07.405 --> 00:08.803
18 | - <v Proog><strong>Proog:</strong> Bueno...
19 | 
20 | 5
21 | 00:08.803 --> 00:11.541
22 | ¿Qué ves a tu lado izquierdo, Emo?
23 | 
24 | 6
25 | 00:11.541 --> 00:13.287
26 | - <v Emo><strong>Emo:</strong> Bueno...
27 | 
28 | 7
29 | 00:13.287 --> 00:16.110
30 | ¿Nada?
31 | - <v Proog><strong>Proog:</strong> ¿De Verdad?
32 | 
33 | 8
34 | 00:16.110 --> 00:18.514
35 | - <v Emo><strong>Emo:</strong> ¡No, nada en absoluto!
36 | 
37 | 9
38 | 00:18.514 --> 00:22.669
39 | - <v Proog><strong>Proog:</strong> ¿De Verdad? ¿y a tu derecha?
40 | ¿Qué ves a tu lado derecho, Emo?
41 | 
42 | 10
43 | 00:22.669 --> 00:26.111
44 | - <v Emo><strong>Emo:</strong> Umm, lo mismo, Proog
45 | 
46 | 11
47 | 00:26.111 --> 00:28.646
48 | ¡Exactamente lo mismo! ¡Nada!
49 | 
50 | 12
51 | 00:28.646 --> 00:30.794
52 | - <v Proog><strong>Proog:</strong> ¡Excelente!
53 | 
54 | 


--------------------------------------------------------------------------------
/attr-html/abbr.html:
--------------------------------------------------------------------------------
 1 | <table>
 2 |   <thead>
 3 |     <tr>
 4 |       <th abbr="col A">
 5 |         Column A
 6 |       </th>
 7 |       <th abbr="col B">
 8 |         Col B
 9 |       </th>
10 |       <th>
11 |         Column C
12 |       </th>
13 |     </tr>
14 |   </thead>
15 |   <tbody>
16 |     <tr>
17 |       <th abbr="row test">
18 |         r test
19 |       </th>
20 |       <td>
21 |         cell
22 |       </td>
23 |       <td>
24 |         cell
25 |       </td>
26 |     </tr>
27 |   </tbody>
28 | </table>
29 | 


--------------------------------------------------------------------------------
/attr-html/accept-charset.html:
--------------------------------------------------------------------------------
 1 | <form accept-charset="utf-8">
 2 |   <input>
 3 |   <button type="submit">OK</button>
 4 | </form>
 5 | 
 6 | <!--
 7 |   from https://validator.w3.org/nu/
 8 |   "The only allowed value for the accept-charset attribute for the form element is utf-8"
 9 | -->
10 | 


--------------------------------------------------------------------------------
/attr-html/accept.html:
--------------------------------------------------------------------------------
1 | <label>
2 |   upload a word doc
3 |   <input type="file" accept=".doc">
4 | </label>
5 | 


--------------------------------------------------------------------------------
/attr-html/accesskey.html:
--------------------------------------------------------------------------------
1 | <button accesskey="m">test 1</button>
2 | <div accesskey="d">test 2</div>
3 | <a href="#!" accesskey="a">test 3</a>
4 | <input accesskey="i" placeholder='test 4'>
5 | 


--------------------------------------------------------------------------------
/attr-html/action.html:
--------------------------------------------------------------------------------
1 | <form action="https://bing.com">
2 |   <input>
3 |   <button type="submit">OK</button>
4 | </form>
5 | 


--------------------------------------------------------------------------------
/attr-html/allow.html:
--------------------------------------------------------------------------------
1 | <p>allow=geolocation pointing to a page that automatically fires a geolocation script</p>
2 | <iframe title="test" width="560" height="315" src="https://scottaohara.github.io/testing/geo/index.html" allow="Geolocation"></iframe>
3 | 


--------------------------------------------------------------------------------
/attr-html/allowfullscreen.html:
--------------------------------------------------------------------------------
1 | <p>with allowfullscreen</p>
2 | <iframe width="560" height="315" src="https://www.youtube.com/embed/tKXdQpwX9-c" allowfullscreen></iframe>
3 | 
4 | 
5 | <p>without allowfullscreen</p>
6 | <iframe width="560" height="315" src="https://www.youtube.com/embed/tKXdQpwX9-c"></iframe>
7 | 


--------------------------------------------------------------------------------
/attr-html/allowpaymentrequest.html:
--------------------------------------------------------------------------------
1 | <iframe title="test" width="560" height="315" src="https://scottaohara.github.io/testing/_empty/index.html" allowpaymentrequest></iframe>
2 | 


--------------------------------------------------------------------------------
/attr-html/alt-area.html:
--------------------------------------------------------------------------------
1 | <img src="https://scottaohara.github.io/tests/html-area/yellow.jpg" width="416" height="281" usemap="#findme000" alt="test">
2 | 
3 | <map name="findme000">
4 |   <area shape="rect" coords="0,0,416,281" alt="area test" href="https://unsplash.com/">
5 | </map>
6 | 


--------------------------------------------------------------------------------
/attr-html/alt-img.html:
--------------------------------------------------------------------------------
1 | <img src="https://scottaohara.github.io/tests/html-area/yellow.jpg" width="416" height="281" alt="test">
2 | 


--------------------------------------------------------------------------------
/attr-html/alt-input.html:
--------------------------------------------------------------------------------
1 | <input type="image" src="https://scottaohara.github.io/tests/html-area/yellow.jpg" width="416" height="281" alt="test">
2 | 


--------------------------------------------------------------------------------
/attr-html/as.html:
--------------------------------------------------------------------------------
1 | <link rel="preload" href="_support/style.css" as="style">
2 | 


--------------------------------------------------------------------------------
/attr-html/async.html:
--------------------------------------------------------------------------------
1 | <script async>
2 |   var c = function () {
3 |     console.log('hi');
4 |   }
5 | 
6 |   c();
7 | </script>
8 | 


--------------------------------------------------------------------------------
/attr-html/autocapitalize-form.html:
--------------------------------------------------------------------------------
1 | <form autocapitalize="words">
2 |   <label for="i">Input</label>
3 |   <input id="i">
4 |   <br>
5 |   <label for="t">Textarea</label>
6 |   <textarea id="t"></textarea>
7 | </form>
8 | 


--------------------------------------------------------------------------------
/attr-html/autocapitalize.html:
--------------------------------------------------------------------------------
 1 | <p>
 2 |   <label for="o">off</label> | <label for="n">none</label>
 3 | </p>
 4 | <input id="o" autocapitalize="off">
 5 | <input id="n" autocapitalize="none">
 6 | <textarea autocapitalize="off" title="off"></textarea>
 7 | <textarea autocapitalize="none" title="none"></textarea>
 8 | 
 9 | <p>
10 |   <label for="on">on</label> | <label for="s">sentences</label>
11 | </p>
12 | <input id="on" autocapitalize="on">
13 | <input id="s" autocapitalize="sentences">
14 | <textarea autocapitalize="on" title="on"></textarea>
15 | <textarea autocapitalize="sentences" title="sentences"></textarea>
16 | 
17 | <p>
18 |   <label for="w">words</label>
19 | </p>
20 | <input id="w" autocapitalize="words">
21 | <textarea autocapitalize="words" title="words"></textarea>
22 | 
23 | <p>
24 |   <label for="c">characters</label>
25 | </p>
26 | <input id="c" autocapitalize="characters">
27 | <textarea autocapitalize="characters" title="characters"></textarea>
28 | 


--------------------------------------------------------------------------------
/attr-html/autoccomplete-form.html:
--------------------------------------------------------------------------------
 1 | <p>on</p>
 2 | <form autocomplete="on">
 3 |   <label for="i">Input</label>
 4 |   <input id="i">
 5 |   <br>
 6 |   <label for="t">Textarea</label>
 7 |   <textarea id="t"></textarea>
 8 | </form>
 9 | 
10 | <p>off</p>
11 | <form autocomplete="off">
12 |   <label for="i2">Input</label>
13 |   <input id="i2">
14 |   <br>
15 |   <label for="t2">Textarea</label>
16 |   <textarea id="t2"></textarea>
17 | </form>
18 | 
19 | <p>not present</p>
20 | <form>
21 |   <label for="i3">Input</label>
22 |   <input id="i3">
23 |   <br>
24 |   <label for="t3">Textarea</label>
25 |   <textarea id="t3"></textarea>
26 | </form>
27 | 


--------------------------------------------------------------------------------
/attr-html/autoccomplete.html:
--------------------------------------------------------------------------------
 1 | <form>
 2 |   <div>
 3 |     <label for="i">Name</label>
 4 |     <input id="i" autocomplete="name">
 5 |   </div>
 6 |   <div>
 7 |     <label for="e">Name</label>
 8 |     <input id="e" type="email" autocomplete="email">
 9 |   </div>
10 |   <div>
11 |     <label for="t">Street Address</label>
12 |     <textarea id="t" autocomplete="street-address"></textarea>
13 |   </div>
14 |   <div>
15 |     <label for="c">City</label>
16 |     <input id="c" autocomplete="address-level2">
17 |   </div>
18 |   <div>
19 |     <label for="cc">Credit Card Number</label>
20 |     <input id="cc" autocomplete="cc-number">
21 |   </div>
22 |   <div>
23 |     <label for="s">Credit Card Expiration Month</label>
24 |     <select id="s" autocomplete="cc-exp-month">
25 |       <option value="1">01</option>
26 |       <option value="2">02</option>
27 |       <option value="3">03</option>
28 |       <option value="4">04</option>
29 |       <option value="5">05</option>
30 |       <option value="6">06</option>
31 |       <option value="7">07</option>
32 |       <option value="8">08</option>
33 |       <option value="9">09</option>
34 |       <option value="10">10</option>
35 |       <option value="11">11</option>
36 |       <option value="12">12</option>
37 |     </select>
38 |   </div>
39 |   <div>
40 |     <label for="s2">Credit Card Expiration Year</label>
41 |     <select id="s2" autocomplete="cc-exp-year">
42 |       <option value="2024">2024</option>
43 |       <option value="2025">2025</option>
44 |       <option value="2026">2026</option>
45 | 
46 |     </select>
47 |   </div>
48 | 
49 | 
50 |   <button type="submit">OK</button>
51 | </form>
52 | 


--------------------------------------------------------------------------------
/attr-html/autofocus-ahref.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   :focus {
 3 |     outline: 3px solid #f00;
 4 |   }
 5 | </style>
 6 | 
 7 | <label>
 8 |   First element
 9 |   <input>
10 | </label>
11 | 
12 | <label>
13 |   Second element
14 |   <input>
15 | </label>
16 | 
17 | 
18 | <p>autofocus should go to the following anchor element</p>
19 | <a href="#!" autofocus>
20 |   I don't go anywhere. sorry.
21 | </a>
22 | 


--------------------------------------------------------------------------------
/attr-html/autofocus-contenteditablehtml.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   :focus {
 3 |     outline: 3px solid #f00;
 4 |   }
 5 | </style>
 6 | 
 7 | <label>
 8 |   First element
 9 |   <input>
10 | </label>
11 | 
12 | <label>
13 |   Second element
14 |   <input>
15 | </label>
16 | 
17 | <p>autofocus should go to the following editable div</p>
18 | <div contenteditable autofocus>
19 |   Make for edit!
20 | </div>
21 | 


--------------------------------------------------------------------------------
/attr-html/autofocus-p.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   :focus {
 3 |     outline: 3px solid #f00;
 4 |   }
 5 | </style>
 6 | 
 7 | <label>
 8 |   First element
 9 |   <input>
10 | </label>
11 | 
12 | <label>
13 |   Second element
14 |   <input>
15 | </label>
16 | 
17 | 
18 | <p>autofocus should go to the following paragraph with tabindex=0</p>
19 | <p tabindex="0" autofocus>
20 |   I'm just a p.  Sorry.
21 | </p>
22 | 


--------------------------------------------------------------------------------
/attr-html/autofocus-summary.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   :focus {
 3 |     outline: 3px solid #f00;
 4 |   }
 5 | </style>
 6 | 
 7 | <label>
 8 |   First element
 9 |   <input>
10 | </label>
11 | 
12 | <label>
13 |   Second element
14 |   <input>
15 | </label>
16 | 
17 | <p>autofocus should go to the following summary element</p>
18 | <details>
19 |   <summary autofocus>
20 |     Wonder what's inside?
21 |   </summary>
22 |   <p>I have nothing important to add. Sorry.
23 | </details>
24 | 


--------------------------------------------------------------------------------
/attr-html/autofocus.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang=en>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>autofocus test</title>
 6 | </head>
 7 | 
 8 | <label>
 9 |   First element
10 |   <input>
11 | </label>
12 | 
13 | 
14 | <div role=region aria-label="test area">
15 |   <p>autofocus should go to the following input</p>
16 |   <label>
17 |     Auto-focus element
18 |     <input autofocus>
19 |   </label>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/attr-html/autoplay-controls-audio.html:
--------------------------------------------------------------------------------
 1 | <p>with autoplay attr, without controls attr</p>
 2 | <audio autoplay src="_support/ElephantsDream.mp4" style="max-width: 100%"></audio>
 3 | 
 4 | 
 5 | <p>with autoplay attr, with controls attr</p>
 6 | <audio autoplay src="_support/ElephantsDream.mp4" controls style="max-width: 100%"></audio>
 7 | 
 8 | 
 9 | <p>with controls attr</p>
10 | <audio autoplay src="_support/ElephantsDream.mp4" controls style="max-width: 100%"></audio>
11 | 


--------------------------------------------------------------------------------
/attr-html/autoplay-controls-video.html:
--------------------------------------------------------------------------------
 1 | <p>with autoplay attr, without controls attr</p>
 2 | <video autoplay src="_support/ElephantsDream.mp4" style="max-width: 100%"></video>
 3 | 
 4 | 
 5 | 
 6 | <p>with autoplay attr, with controls attr</p>
 7 | <video autoplay src="_support/ElephantsDream.mp4" controls style="max-width: 100%"></video>
 8 | 
 9 | 
10 | <p>with controls attr</p>
11 | <video autoplay src="_support/ElephantsDream.mp4" controls style="max-width: 100%"></video>
12 | 


--------------------------------------------------------------------------------
/attr-html/charset.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | 


--------------------------------------------------------------------------------
/attr-html/checked.html:
--------------------------------------------------------------------------------
1 | <p>With checked attribute</p>
2 | <input type="checkbox" checked><br>
3 | <input type="radio" name="r" checked="">
4 | 
5 | <p>Without checked attribute</p>
6 | <input type="checkbox"><br>
7 | <input type="radio" name="r">
8 | 


--------------------------------------------------------------------------------
/attr-html/cite.html:
--------------------------------------------------------------------------------
 1 | <h1>cite attribute on allowed elements</h1>
 2 | 
 3 | <blockquote cite="https://example-site.com">
 4 |   I'm a quote.
 5 | </blockquote>
 6 | 
 7 | <br>
 8 | 
 9 | <q cite="https://example-site.com">
10 |   I'm a quote.
11 | </q>
12 | 
13 | <br>
14 | 
15 | <ins cite="https://example-site.com">
16 |   I'm inserted content
17 | </ins>
18 | 
19 | <br>
20 | 
21 | <del cite="https://example-site.com">
22 |   I'm deleted content
23 | </del>
24 | 


--------------------------------------------------------------------------------
/attr-html/cols.html:
--------------------------------------------------------------------------------
1 | <p>cols=14</p>
2 | <textarea cols="14"></textarea>
3 | 


--------------------------------------------------------------------------------
/attr-html/colspan.html:
--------------------------------------------------------------------------------
 1 | <head>
 2 |   <style>
 3 |     tr > * {
 4 |       border: 1px solid;
 5 |     }
 6 |   </style>
 7 | </head>
 8 | 
 9 | <table>
10 |   <tr>
11 |     <th colspan="2">
12 |       Before and after
13 |     </th>
14 |     <th>
15 |       Third
16 |     </th>
17 |     <th>
18 |       Fourth
19 |     </th>
20 |   </tr>
21 |   <tr>
22 |     <td>
23 |       first
24 |     </td>
25 |     <td>
26 |       second
27 |     </td>
28 |     <td colspan="2">
29 |       The end
30 |     </td>
31 |   </tr>
32 | </table>
33 | 


--------------------------------------------------------------------------------
/attr-html/decoding.html:
--------------------------------------------------------------------------------
1 | <p>async</p>
2 | <img src="https://placekitten.com/g/300/150" alt="cat placeholder photo" decoding="async">
3 | 
4 | <p>sync</p>
5 | <img src="https://placekitten.com/g/500/200" alt="another cat placeholder photo" decoding="sync">
6 | 


--------------------------------------------------------------------------------
/attr-html/defer.html:
--------------------------------------------------------------------------------
1 | <script async>
2 |   var c = function () {
3 |     console.log('hi');
4 |   }
5 | 
6 |   c();
7 | </script>
8 | 


--------------------------------------------------------------------------------
/attr-html/loop-audio.html:
--------------------------------------------------------------------------------
1 | <p>with loop attr, with controls attr</p>
2 | <audio loop src="_support/ElephantsDream.mp4" controls style="max-width: 100%"></audio>
3 | 
4 | 
5 | <p>with controls attr</p>
6 | <audio loop src="_support/ElephantsDream.mp4" controls style="max-width: 100%"></audio>
7 | 


--------------------------------------------------------------------------------
/attr-html/loop-video.html:
--------------------------------------------------------------------------------
1 | <p>with loop attr, with controls attr</p>
2 | <video loop src="_support/ElephantsDream.mp4" controls style="max-width: 100%"></video>
3 | 
4 | 
5 | <p>with controls attr</p>
6 | <video loop src="_support/ElephantsDream.mp4" controls style="max-width: 100%"></video>
7 | 


--------------------------------------------------------------------------------
/attr-html/minlength.html:
--------------------------------------------------------------------------------
1 | <form>
2 |   <textarea minlength="4" maxlength="6"></textarea>
3 |   <br>
4 |   <input minlength="4" maxlength="6">
5 | 
6 |   <button>OK</button>
7 | </form>
8 | 


--------------------------------------------------------------------------------
/attr-html/pattern.html:
--------------------------------------------------------------------------------
1 | <form>
2 |   <label for="name">
3 |     Username
4 |   </label>
5 |   <input id="name" pattern="[A-Za-z]+" title="upper and lowercase letters">
6 | 
7 |   <button type="submit">OK</button>
8 | </form>
9 | 


--------------------------------------------------------------------------------
/attr-html/ping.html:
--------------------------------------------------------------------------------
1 | <a href="https://html.spec.whatwg.org/multipage/links.html#ping" ping="https://html.spec.whatwg.org/multipage/links.html#ping">
2 |   Ping away
3 | </a>
4 | 


--------------------------------------------------------------------------------
/attr-html/playsinline.html:
--------------------------------------------------------------------------------
1 | <p>with playsinline attribute</p>
2 | <video controls playsinline src="_support/ElephantsDream.mp4" style="max-width: 100%"></video>
3 | 
4 | <p>without playsinline attribute</p>
5 | <video controls src="_support/ElephantsDream.mp4" style="max-width: 100%"></video>
6 | 


--------------------------------------------------------------------------------
/attr-html/reversed.html:
--------------------------------------------------------------------------------
 1 | <p>Default ol</p>
 2 | <ol>
 3 |   <li>First list item in DOM</li>
 4 |   <li>Second list item in DOM</li>
 5 |   <li>Third list item in DOM</li>
 6 | </ol>
 7 | 
 8 | 
 9 | <p>Reversed ol</p>
10 | <ol reversed>
11 |   <li>First list item in DOM</li>
12 |   <li>Second list item in DOM</li>
13 |   <li>Third list item in DOM</li>
14 | </ol>
15 | 


--------------------------------------------------------------------------------
/attr-html/rows.html:
--------------------------------------------------------------------------------
1 | <p>rows=14</p>
2 | <textarea rows="14"></textarea>
3 | 


--------------------------------------------------------------------------------
/attr-html/tabindex-a-href.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang=en>
 3 |   <title>a href and tabindex tests</title>
 4 | <a href="#" tabindex="0">tabindex 0</a><br>
 5 | <a href="#" tabindex="15">tabindex 15</a><br>
 6 | <a href="#" tabindex="-1">tabindex -1</a><br>
 7 | <a href="#">no tabindex</a><br>
 8 | <a href="#" tabindex="-5">tabindex -5</a><br>
 9 | <a href="#" tabindex="1">tabindex 1</a><br>
10 | <a href="#" tabindex="2">tabindex 2</a>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/attr-html/tabindex-a.html:
--------------------------------------------------------------------------------
1 | <a tabindex="0">tabindex 0</a><br>
2 | <a tabindex="15">tabindex 15</a><br>
3 | <a tabindex="-1">tabindex -1</a><br>
4 | <a>no tabindex</a><br>
5 | <a tabindex="-5">tabindex -5</a><br>
6 | <a tabindex="1">tabindex 1</a><br>
7 | <a tabindex="2">tabindex 2</a>
8 | 


--------------------------------------------------------------------------------
/css-text/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>Testing CSS effects on text</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing CSS effects on text</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <span>July 31, 2019</span></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<div class="test">
 23 |         <h2>All uppercase</h2>
 24 |         <div class="test__case">
 25 |           <p>
 26 |             THIS TEXT IS WRITTEN IN UPPERCASE
 27 |           </p>
 28 |           <p>
 29 |             <span>THIS TEXT IS WRITTEN IN UPPERCASE</span>
 30 |           </p>
 31 |           <a href="#!">
 32 |             THIS TEXT IS WRITTEN IN UPPERCASE
 33 |           </a><br>
 34 |           <button>
 35 |             THIS TEXT IS WRITTEN IN UPPERCASE
 36 |           </button>
 37 |           <h2>
 38 |             THIS TEXT IS WRITTEN IN UPPERCASE
 39 |           </h2>
 40 |         </div>
 41 |         <div class="test__info">
 42 |           <div class="test__info__results">
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 | 
 47 | 
 48 |       <div class="test">
 49 |         <h2>Mixed case</h2>
 50 |         <div class="test__case">
 51 |           <p>
 52 |             THIS TEXT is written in UPPERCASE
 53 |           </p>
 54 |           <p>
 55 |             <span>THIS TEXT is written in UPPERCASE</span>
 56 |           </p>
 57 |           <a href="#!">
 58 |             THIS TEXT is written in UPPERCASE
 59 |           </a><br>
 60 |           <button>
 61 |             THIS TEXT is written in UPPERCASE
 62 |           </button>
 63 |           <h2>
 64 |             THIS TEXT is written in UPPERCASE
 65 |           </h2>
 66 |         </div>
 67 |         <div class="test__info">
 68 |           <div class="test__info__results">
 69 |           </div>
 70 |         </div>
 71 |       </div>
 72 | 
 73 |       <div class="test">
 74 |         <h2>Uppercased by CSS</h2>
 75 |         <div class="test__case">
 76 |           <p style="text-transform: uppercase;">
 77 |             This text is written in lowercase.
 78 |           </p>
 79 |           <p>
 80 |             <span style="text-transform: uppercase;">This text is written in lowercase.</span>
 81 |           </p>
 82 |           <a href="#!" style="text-transform: uppercase;">
 83 |             This text is written in lowercase.
 84 |           </a><br>
 85 |           <button style="text-transform: uppercase;">
 86 |             This text is written in lowercase.
 87 |           </button>
 88 |           <h2 style="text-transform: uppercase;">
 89 |             THIS TEXT IS WRITTEN IN lowercase
 90 |           </h2>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2>Some text Uppercased by CSS</h2>
101 |         <div class="test__case">
102 |           <p>
103 |             This text <span style="text-transform: uppercase;">is written</span> in lowercase.
104 |           </p>
105 |           <p>
106 |             <span>This text <span style="text-transform: uppercase;">is written</span> in lowercase.</span>
107 |           </p>
108 |           <a href="#!">
109 |             This text <span style="text-transform: uppercase;">is written</span> in lowercase.
110 |           </a><br>
111 |           <button>
112 |             This text <span style="text-transform: uppercase;">is written</span> in lowercase.
113 |           </button>
114 |           <h2>
115 |             This text <span style="text-transform: uppercase;">is written</span> in lowercase
116 |           </h2>
117 |         </div>
118 |         <div class="test__info">
119 |           <div class="test__info__results">
120 |           </div>
121 |         </div>
122 |       </div>
123 | 
124 | 
125 | 
126 | 
127 | 		</div> <!-- /#app -->
128 | 
129 |     <script src="../-assets/shared.js"></script>
130 | 
131 | 	</body>
132 | </html>
133 | 


--------------------------------------------------------------------------------
/html-a/a-aria-disabled.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Anchor element with aria-disabled attribute</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 		<link rel="stylesheet" href="../-assets/shared.css">
 8 | 		<style>
 9 | 
10 | 		</style>
11 | 	</head>
12 | 	<body>
13 | 		<div id="app">
14 |       <header>
15 |         <h1>Testing the <code>a</code> element with the <code>aria-disabled</code> attribute</h1>
16 |         <div class="dates">
17 |           <p>Published: <span>August 22, 2019</span></p>
18 |         </div>
19 |       </header>
20 | 
21 | 
22 | 
23 |       <div class="test">
24 |         <h2><code>a</code> with <code>aria-disabled="true"</code></h2>
25 |         <div class="test__case">
26 |           <a href="#!" aria-disabled="true">My anchor</a>
27 |         </div>
28 |         <div class="test__info">
29 |           <div class="text__info__results">
30 |             <details>
31 |               <summary>results</summary>
32 |               <div>
33 |                 <ul>
34 |                   <li>macOS/iOS Safari and Chrome with VoiceOver announces "dimmed"</li>
35 |                   <li>Firefox, Chrome, IE11, Edge with NVDA announces "unavailable"</li>
36 |                   <li>Firefox, Chrome, IE11, Edge with JAWS announces "unavailable"</li>
37 |                 </ul>
38 |               </div>
39 |             </details>
40 |           </div>
41 |         </div>
42 |       </div>
43 | 
44 | 	</body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/html-abbr/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Testing abbr element</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 		<link rel="stylesheet" href="../-assets/shared.css">
 8 | 	</head>
 9 | 	<body>
10 | 		<div id="app">
11 | 			<header>
12 | 				<h1><code>abbr</code> element tests</h1>
13 | 				<div class="dates">
14 | 					<p>Published: <time>June 9th, 2019</time></p>
15 | 					<!-- <p>Last Updated: <time>...</time></p> -->
16 | 				</div>
17 | 			</header>
18 | 
19 | 
20 | 			<div class="test">
21 | 				<h2><code>abbr</code> with <code>title</code></h2>
22 | 				<div class="test__case">
23 | 					<abbr title="Cascading Style Sheets">CSS</abbr>
24 | 				</div>
25 | 				<div class="test__info"></div>
26 | 			</div>
27 | 
28 | 
29 | 			<div class="test">
30 | 				<h2><code>abbr</code> with <code>title</code> within a paragraph</h2>
31 | 				<div class="test__case">
32 | 					<p>
33 | 						I like <abbr title="Cascading Style Sheets">CSS</abbr>
34 | 					</p>
35 | 				</div>
36 | 				<div class="test__info"></div>
37 | 			</div>
38 | 
39 | 
40 | 			<div class="test">
41 | 				<h2><code>abbr</code> within a paragraph</h2>
42 | 				<div class="test__case">
43 | 					<p>
44 | 						<abbr>HTML</abbr>
45 | 					</p>
46 | 				</div>
47 | 				<div class="test__info"></div>
48 | 			</div>
49 | 
50 | 
51 | 			<div class="test">
52 | 				<h2><code>abbr</code> with <code>aria-label</code> within a paragraph</h2>
53 | 				<div class="test__case">
54 | 					<p>
55 | 						<abbr aria-label="Hyper Text Markup Language">HTML</abbr>
56 | 					</p>
57 | 				</div>
58 | 				<div class="test__info"></div>
59 | 			</div>
60 | 
61 | 		</div> <!-- /#app -->
62 | 		<script src="../-assets/shared.js"></script>
63 | 	</body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/html-address/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>Testing address element</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1><code>address</code> element tests</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <span>June 22, 2020</span></p>
 18 |         </div>
 19 | 
 20 |         <p><strong>Note:</strong> as of June 22, 2020, Webkit still treats <code>address</code> as a <code>contentinformation</code> landmark.</p>
 21 |       </header>
 22 | 
 23 | 
 24 | 			<div class="test">
 25 |         <h2>Separating lines with <code>br</code></h2>
 26 |         <div class="test__case">
 27 |           <address>
 28 |             The Fakerson Family<br>
 29 |             123 Fake Street<br>
 30 |             Fakestown FA, 55555
 31 |           </address>
 32 |         </div>
 33 |         <div class="test__info">
 34 |           <!-- <div class="test__info__results">
 35 |             <details>
 36 |               <summary>results</summary>
 37 |               <div>
 38 | 
 39 |               </div>
 40 |             </details>
 41 |           </div> -->
 42 |         </div>
 43 |       </div>
 44 | 
 45 | 
 46 |       <div class="test">
 47 |         <h2>Using <code>pre</code> within <code>address</code></h2>
 48 |         <div class="test__case">
 49 |           <address>
 50 |             <pre style="font-family: inherit; font-size: inherit;">The Fakerson Family
 51 |             123 Fake Street
 52 |             Fakestown FA, 55555</pre>
 53 |           </address>
 54 |         </div>
 55 |         <div class="test__info">
 56 |           <!-- <div class="test__info__results">
 57 |             <details>
 58 |               <summary>results</summary>
 59 |               <div>
 60 | 
 61 |               </div>
 62 |             </details>
 63 |           </div> -->
 64 |         </div>
 65 |       </div>
 66 | 
 67 | 
 68 |       <div class="test">
 69 |         <h2>Using <code>p</code>s within <code>address</code></h2>
 70 |         <div class="test__case">
 71 |           <address>
 72 |             <p>The Fakerson Family</p>
 73 |             <p>123 Fake Street</p>
 74 |             <p>Fakestown FA, 55555</p>
 75 |           </address>
 76 |         </div>
 77 |         <div class="test__info">
 78 |           <!-- <div class="test__info__results">
 79 |             <details>
 80 |               <summary>results</summary>
 81 |               <div>
 82 | 
 83 |               </div>
 84 |             </details>
 85 |           </div> -->
 86 |         </div>
 87 |       </div>
 88 | 
 89 | 
 90 |       <div class="test">
 91 |         <h2>Testing <code>aria-label</code> on <code>address</code></h2>
 92 |         <div class="test__case">
 93 |           <address aria-label="aria label">
 94 |             The Fakerson Family<br>
 95 |             123 Fake Street<br>
 96 |             Fakestown FA, 55555
 97 |           </address>
 98 |         </div>
 99 |         <div class="test__info">
100 |           <div class="test__info__results">
101 |             <details>
102 |               <summary>results</summary>
103 |               <div>
104 |                 <p>NVDA 2020.1 + IE11 will announce "aria label" when navigating with virtual cursor.</p>
105 |                 <p>NVDA + other browsers will not announce "aria label"</p>
106 |                 <p>VO + Safari announce address as content info and will announce "aria label" as its name.</p>
107 |                 <p>JAWS 2020 + all browsers do not announce "aria label"</p>
108 |               </div>
109 |             </details>
110 |           </div>
111 |         </div>
112 |       </div>
113 | 
114 | 
115 | 		</div> <!-- /#app -->
116 | 
117 |     <script src="../-assets/shared.js"></script>
118 | 
119 | 	</body>
120 | </html>
121 | 


--------------------------------------------------------------------------------
/html-area/index.html:
--------------------------------------------------------------------------------
  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">
  6 | 		<title>area example</title>
  7 | 		<style>
  8 | 			div {
  9 | 				max-width: 26em;
 10 | 				margin: 1em auto;
 11 | 			}
 12 | 			img {
 13 | 				max-width: 100%;
 14 | 			}
 15 | 		</style>
 16 | 	</head>
 17 | 	<body>
 18 | 		<div id="app">
 19 | 			<h1>area examples</h1>
 20 | 
 21 | 			<p>map by itself</p>
 22 | 
 23 | 			<map name="no_img"></map>
 24 | 
 25 | 			<hr>
 26 | 
 27 | 			<p>no alt on image with no area</p>
 28 | 			<img src="yellow.jpg" width="416" height="281" usemap="#findme00000">
 29 | 
 30 | 			<map name="findme00000"></map>
 31 | 
 32 | 			<hr>
 33 | 
 34 | 			<p>no alt on image or area</p>
 35 | 			<img src="yellow.jpg" width="416" height="281" usemap="#findme0000">
 36 | 
 37 | 			<map name="findme0000">
 38 | 			  <area shape="rect" coords="0,0,416,281" href="https://unsplash.com/">
 39 | 			</map>
 40 | 
 41 | 			<hr>
 42 | 
 43 | 			<p>no alt on image</p>
 44 | 			<img src="yellow.jpg" width="416" height="281" usemap="#findme000">
 45 | 
 46 | 			<map name="findme000">
 47 | 			  <area shape="rect" coords="0,0,416,281" alt="alt" href="https://unsplash.com/">
 48 | 			</map>
 49 | 
 50 | 			<hr>
 51 | 
 52 | 			<p>no alt on area</p>
 53 | 			<img src="yellow.jpg" width="416" height="281" alt="Person wearing a yellow raincoat in a field of yellow flowers." usemap="#findme00">
 54 | 
 55 | 			<map name="findme00">
 56 | 			  <area shape="rect" coords="0,0,416,281" href="https://unsplash.com/">
 57 | 			</map>
 58 | 
 59 | 			<hr>
 60 | 
 61 | 			<p>just alt</p>
 62 | 			<img src="yellow.jpg" width="416" height="281" alt="Person wearing a yellow raincoat in a field of yellow flowers." usemap="#findme0">
 63 | 
 64 | 			<map name="findme0">
 65 | 			  <area shape="rect" coords="0,0,416,281" alt="alt name" href="https://unsplash.com/">
 66 | 			</map>
 67 | 
 68 | 			<hr>
 69 | 
 70 | 			<p>alt and aria-label</p>
 71 | 			<img src="yellow.jpg" width="416" height="281" alt="Person wearing a yellow raincoat in a field of yellow flowers." usemap="#findme1">
 72 | 
 73 | 			<map name="findme1">
 74 | 			  <area shape="rect" coords="0,0,416,281" aria-label="aria label" alt="alt name" href="https://unsplash.com/">
 75 | 			</map>
 76 | 
 77 | 			<hr>
 78 | 
 79 | 			<p>aria-label and title</p>
 80 | 			<img src="yellow.jpg" width="416" height="281" alt="Person wearing a yellow raincoat in a field of yellow flowers." usemap="#findme2">
 81 | 
 82 | 			<map name="findme2">
 83 | 			  <area shape="rect" coords="0,0,416,281" title="title"  aria-label='only aria label' href="https://unsplash.com/">
 84 | 			</map>
 85 | 
 86 | 			<hr>
 87 | 
 88 | 			<p>title and alt</p>
 89 | 			<img src="yellow.jpg" width="416" height="281" alt="Person wearing a yellow raincoat in a field of yellow flowers." usemap="#findme3">
 90 | 
 91 | 			<map name="findme3">
 92 | 			  <area shape="rect" coords="0,0,416,281" title="title" alt="alt name" href="https://unsplash.com/">
 93 | 			</map>
 94 | 
 95 | 			<hr>
 96 | 
 97 | 			<p>only title</p>
 98 | 			<img src="yellow.jpg" width="416" height="281" alt="Person wearing a yellow raincoat in a field of yellow flowers." usemap="#findme4">
 99 | 
100 | 			<map name="findme4">
101 | 			  <area shape="rect" coords="0,0,416,281" title="title" href="https://unsplash.com/">
102 | 			</map>
103 | 
104 | 
105 | 			<p>alt on area but not img</p>
106 | 			<img src="yellow.jpg" width="416" height="281" alt usemap="#findme5">
107 | 
108 | 			<map name="findme5">
109 | 			  <area shape="rect" coords="0,0,416,281" alt="alt name" href="https://unsplash.com/">
110 | 			</map>
111 | 
112 | 			<footer>
113 | 				<p>
114 | 					Photo by Daniel Mingook Kim on Unsplash
115 | 				</p>
116 | 			</footer>
117 | 		</div>
118 | 	</body>
119 | </html>
120 | 


--------------------------------------------------------------------------------
/html-area/yellow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scottaohara/tests/3b4e77239183b3d7af1437e36d14570e5e49c5d4/html-area/yellow.jpg


--------------------------------------------------------------------------------
/html-article/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Article element and role tests</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link rel="stylesheet" href="../-assets/shared.css">
  8 |     <style>
  9 | 
 10 |     </style>
 11 |   </head>
 12 |   <body>
 13 |     <div id="app">
 14 |       <header>
 15 |         <h1>Testing Article element and role</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time>August 1, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 |       <div class="test">
 22 |         <h2>role="article" with aria-label</h2>
 23 |         <div class="test__case">
 24 |           <div role="article" aria-label="Hi there">
 25 |             Content goes here
 26 |           </div>
 27 |         </div>
 28 | 
 29 |         <div class="test__info">
 30 |           <div class="test__info__results">
 31 |             <details>
 32 |               <summary>results</summary>
 33 |               <div></div>
 34 |             </details>
 35 |           </div>
 36 |         </div>
 37 |       </div>
 38 | 
 39 |       <div class="test">
 40 |         <h2>role="article" without aria-label</h2>
 41 |         <div class="test__case">
 42 |           <div role="article">
 43 |             Content goes here
 44 |           </div>
 45 |         </div>
 46 | 
 47 |         <div class="test__info">
 48 |           <div class="test__info__results">
 49 |             <details>
 50 |               <summary>results</summary>
 51 |               <div></div>
 52 |             </details>
 53 |           </div>
 54 |         </div>
 55 |       </div>
 56 | 
 57 | 
 58 |       <div class="test">
 59 |         <h2>article element without aria-label</h2>
 60 |         <div class="test__case">
 61 |           <article>
 62 |             Content goes here
 63 |           </article>
 64 |         </div>
 65 | 
 66 |         <div class="test__info">
 67 |           <div class="test__info__results">
 68 |             <details>
 69 |               <summary>results</summary>
 70 |               <div></div>
 71 |             </details>
 72 |           </div>
 73 |         </div>
 74 |       </div>
 75 | 
 76 | 
 77 |       <div class="test">
 78 |         <h2>article element with aria-label</h2>
 79 |         <div class="test__case">
 80 |           <article aria-label="hi there">
 81 |             Content goes here
 82 |           </article>
 83 |         </div>
 84 | 
 85 |         <div class="test__info">
 86 |           <div class="test__info__results">
 87 |             <details>
 88 |               <summary>results</summary>
 89 |               <div></div>
 90 |             </details>
 91 |           </div>
 92 |         </div>
 93 |       </div>
 94 | 
 95 | 
 96 |     </div> <!-- /#app -->
 97 | 
 98 |     <script src="../-assets/shared.js"></script>
 99 |   </body>
100 | </html>
101 | 


--------------------------------------------------------------------------------
/html-b/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>B element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>b</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>b</code></h2>
 31 |         <div class="test__case">
 32 |           <b>Bold</b>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>b</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <b title="title">Bold</b>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>b</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <b aria-label="ARIA label">Bold</b>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>b</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <b aria-label="ARIA label" title="title">Bold</b>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>b</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <b tabindex="0">Bold</b>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>b</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <b tabindex="0" title="title">Bold</b>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>b</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <b aria-label="ARIA label" title="title" tabindex="0">Bold</b>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-bdi/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>bdi element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>bdi</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>bdi</code></h2>
 31 |         <div class="test__case">
 32 |           <bdi>bdi</bdi>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 |       <div class="test">
 41 |         <h2><code>bdi</code> with <code>dir=rtl</code></h2>
 42 |         <div class="test__case">
 43 |           <bdi dir="rtl">bdi</bdi>
 44 |         </div>
 45 |         <div class="test__info">
 46 |           <div class="test__info__results">
 47 |           </div>
 48 |         </div>
 49 |       </div>
 50 | 
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>bdi</code> with <code>title</code></h2>
 54 |         <div class="test__case">
 55 |           <bdi title="title">bdi</bdi>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>bdi</code> with <code>aria-label</code></h2>
 65 |         <div class="test__case">
 66 |           <bdi aria-label="ARIA label">bdi</bdi>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 |       <div class="test">
 75 |         <h2><code>bdi</code> with <code>aria-label</code> and <code>title</code></h2>
 76 |         <div class="test__case">
 77 |           <bdi aria-label="ARIA label" title="title">bdi</bdi>
 78 |         </div>
 79 |         <div class="test__info">
 80 |           <div class="test__info__results">
 81 |           </div>
 82 |         </div>
 83 |       </div>
 84 | 
 85 | 
 86 |       <div class="test">
 87 |         <h2><code>bdi</code> with <code>tabindex=0</code></h2>
 88 |         <div class="test__case">
 89 |           <bdi tabindex="0">bdi</bdi>
 90 |         </div>
 91 |         <div class="test__info">
 92 |           <div class="test__info__results">
 93 |           </div>
 94 |         </div>
 95 |       </div>
 96 | 
 97 | 
 98 |       <div class="test">
 99 |         <h2><code>bdi</code> with <code>tabindex=0</code> and <code>title</code></h2>
100 |         <div class="test__case">
101 |           <bdi tabindex="0" title="title">bdi</bdi>
102 |         </div>
103 |         <div class="test__info">
104 |           <div class="test__info__results">
105 |           </div>
106 |         </div>
107 |       </div>
108 | 
109 | 
110 |       <div class="test">
111 |         <h2><code>bdi</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
112 |         <div class="test__case">
113 |           <bdi aria-label="ARIA label" title="title" tabindex="0">bdi</bdi>
114 |         </div>
115 |         <div class="test__info">
116 |           <div class="test__info__results">
117 |           </div>
118 |         </div>
119 |       </div>
120 | 
121 | 		</div> <!-- /#app -->
122 | 
123 |     <script src="../-assets/shared.js"></script>
124 | 
125 | 	</body>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/html-bdo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>bdo element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <a href="https://html.spec.whatwg.org/#the-bdo-element"><code>bdo</code></a> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |         <p>
 20 |           <code>bdo</code> MUST have a <code>dir</code> set.
 21 |           If not noted otherwise, <code>dir="ltr"</code>.
 22 |         </p>
 23 |       </header>
 24 | 
 25 | 
 26 | 			<!--
 27 | 				For aria-labelledby/describedby tests
 28 | 			-->
 29 | 			<div hidden id="by">ARIA labelled by</div>
 30 | 			<div hidden id="desc">Description</div>
 31 | 
 32 | 
 33 | 			<div class="test">
 34 |         <h2><code>bdo</code></h2>
 35 |         <div class="test__case">
 36 |           <bdo dir="ltr">bdo</bdo>
 37 |         </div>
 38 |         <div class="test__info">
 39 |           <div class="test__info__results">
 40 |           </div>
 41 |         </div>
 42 |       </div>
 43 | 
 44 |       <div class="test">
 45 |         <h2><code>bdo</code> with <code>dir="rtl"</code></h2>
 46 |         <div class="test__case">
 47 |           <bdo dir="rtl">bdo</bdo>
 48 |         </div>
 49 |         <div class="test__info">
 50 |           <div class="test__info__results">
 51 |           </div>
 52 |         </div>
 53 |       </div>
 54 | 
 55 | 
 56 |       <div class="test">
 57 |         <h2><code>bdo</code> with <code>title</code></h2>
 58 |         <div class="test__case">
 59 |           <bdo dir="ltr" title="title">bdo</bdo>
 60 |         </div>
 61 |         <div class="test__info">
 62 |           <div class="test__info__results">
 63 |           </div>
 64 |         </div>
 65 |       </div>
 66 | 
 67 |       <div class="test">
 68 |         <h2><code>bdo</code> with <code>aria-label</code></h2>
 69 |         <div class="test__case">
 70 |           <bdo dir="ltr" aria-label="ARIA label">bdo</bdo>
 71 |         </div>
 72 |         <div class="test__info">
 73 |           <div class="test__info__results">
 74 |           </div>
 75 |         </div>
 76 |       </div>
 77 | 
 78 |       <div class="test">
 79 |         <h2><code>bdo</code> with <code>aria-label</code> and <code>title</code></h2>
 80 |         <div class="test__case">
 81 |           <bdo dir="ltr" aria-label="ARIA label" title="title">bdo</bdo>
 82 |         </div>
 83 |         <div class="test__info">
 84 |           <div class="test__info__results">
 85 |           </div>
 86 |         </div>
 87 |       </div>
 88 | 
 89 | 
 90 |       <div class="test">
 91 |         <h2><code>bdo</code> with <code>tabindex=0</code></h2>
 92 |         <div class="test__case">
 93 |           <bdo dir="ltr" tabindex="0">bdo</bdo>
 94 |         </div>
 95 |         <div class="test__info">
 96 |           <div class="test__info__results">
 97 |           </div>
 98 |         </div>
 99 |       </div>
100 | 
101 | 
102 |       <div class="test">
103 |         <h2><code>bdo</code> with <code>tabindex=0</code> and <code>title</code></h2>
104 |         <div class="test__case">
105 |           <bdo dir="ltr" tabindex="0" title="title">bdo</bdo>
106 |         </div>
107 |         <div class="test__info">
108 |           <div class="test__info__results">
109 |           </div>
110 |         </div>
111 |       </div>
112 | 
113 | 
114 |       <div class="test">
115 |         <h2><code>bdo</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
116 |         <div class="test__case">
117 |           <bdo dir="ltr" aria-label="ARIA label" title="title" tabindex="0">bdo</bdo>
118 |         </div>
119 |         <div class="test__info">
120 |           <div class="test__info__results">
121 |           </div>
122 |         </div>
123 |       </div>
124 | 
125 | 		</div> <!-- /#app -->
126 | 
127 |     <script src="../-assets/shared.js"></script>
128 | 
129 | 	</body>
130 | </html>
131 | 


--------------------------------------------------------------------------------
/html-blockquote/desc.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>Blockquote accessible descriptions</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 	</head>
  9 | 	<body>
 10 | 		<div id="app">
 11 | 			<header>
 12 | 				<h1><code>blockquote</code> element tests</h1>
 13 | 				<div class="dates">
 14 | 					<p>Published: <span>September 8, 2019</span></p>
 15 | 					<!-- <p>Last Updated: <span>...</span></p> -->
 16 | 				</div>
 17 | 				<p>
 18 | 					Note: navigate by blockquotes with NVDA by use of <kbd>Q</kbd> button.
 19 | 					<kbd>CTRL+INSERT+Q</kbd> to open JAWS dialog of blockquotes.
 20 | 				</p>
 21 | 				<p>
 22 | 					A blockquote won't expose an accessible description from the title attribute, unless the blockquote also has an accessible name.
 23 | 				</p>
 24 | 			</header>
 25 | 
 26 | 			<div class="test">
 27 | 				<h2>Blockquote with aria-describedby</h2>
 28 | 				<div class="test__case">
 29 | 					<div id="d" hidden>aria description</div>
 30 | 					<blockquote aria-describedby="d">
 31 | 						Text goes here
 32 | 					</blockquote>
 33 | 				</div>
 34 | 				<div class="test__info">
 35 | 					<div class="test__info__results">
 36 | 						<details open>
 37 | 							<summary>Expectation</summary>
 38 | 							<div>
 39 | 								<p>
 40 | 									Should expose "aria description" as its description.
 41 | 								</p>
 42 | 							</div>
 43 | 						</details>
 44 | 					</div>
 45 | 				</div>
 46 | 			</div>
 47 | 
 48 | 
 49 | 			<div class="test">
 50 | 				<h2>Blockquote with title and aria-describedby</h2>
 51 | 				<div class="test__case">
 52 | 					<blockquote aria-describedby="d" title="Title">
 53 | 						Text goes here
 54 | 					</blockquote>
 55 | 				</div>
 56 | 				<div class="test__info">
 57 | 					<div class="test__info__results">
 58 | 						<details open>
 59 | 							<summary>Expectation</summary>
 60 | 							<div>
 61 | 								<p>
 62 | 									Should expose "aria description" as its description.
 63 | 								</p>
 64 | 								<p>
 65 | 									Should expose accessible name of "Title".
 66 | 								</p>
 67 | 							</div>
 68 | 						</details>
 69 | 					</div>
 70 | 				</div>
 71 | 			</div>
 72 | 
 73 | 
 74 | 			<div class="test">
 75 | 				<h2>Blockquote with aria-label and title</h2>
 76 | 				<div class="test__case">
 77 | 					<blockquote aria-label="Aria label" title="title">
 78 | 						Text goes here
 79 | 					</blockquote>
 80 | 				</div>
 81 | 				<div class="test__info">
 82 | 					<div class="test__info__results">
 83 | 						<details open>
 84 | 							<summary>Expectation</summary>
 85 | 							<div>
 86 | 								<p>
 87 | 									Should expose "aria label" as its accessible name.
 88 | 								</p>
 89 | 								<p>
 90 | 									Should expose "title" as its description.
 91 | 								</p>
 92 | 							</div>
 93 | 						</details>
 94 | 					</div>
 95 | 				</div>
 96 | 			</div>
 97 | 
 98 | 
 99 | 			<div class="test">
100 | 				<h2>Blockquote with aria-label, title and aria-describedby</h2>
101 | 				<div class="test__case">
102 | 					<blockquote aria-describedby="d" title="Title" aria-label="Aria label">
103 | 						Text goes here
104 | 					</blockquote>
105 | 				</div>
106 | 				<div class="test__info">
107 | 					<div class="test__info__results">
108 | 						<details open>
109 | 							<summary>Expectation</summary>
110 | 							<div>
111 | 								<p>
112 | 									Should expose "aria description" as its description, title will be ignored.
113 | 								</p>
114 | 								<p>
115 | 									Should expose accessible name of "Aria label".
116 | 								</p>
117 | 							</div>
118 | 						</details>
119 | 					</div>
120 | 				</div>
121 | 			</div>
122 | 
123 | 
124 | 		</div> <!-- /#app -->
125 | 		<script src="../-assets/shared.js"></script>
126 | 	</body>
127 | </html>
128 | 


--------------------------------------------------------------------------------
/html-blockquote/names.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>Blockquote accessible names</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 	</head>
  9 | 	<body>
 10 | 		<div id="app">
 11 | 			<header>
 12 | 				<h1><code>blockquote</code> element tests</h1>
 13 | 				<div class="dates">
 14 | 					<p>Published: <span>September 8, 2019</span></p>
 15 | 					<!-- <p>Last Updated: <span>...</span></p> -->
 16 | 				</div>
 17 | 				<p>
 18 | 					Note: navigate by blockquotes with NVDA by use of <kbd>Q</kbd> button.
 19 | 					<kbd>CTRL+INSERT+Q</kbd> to open JAWS dialog of blockquotes.
 20 | 				</p>
 21 | 			</header>
 22 | 
 23 | 			<div class="test">
 24 | 				<h2>Blockquote with only subtree content</h2>
 25 | 				<div class="test__case">
 26 | 					<blockquote>
 27 | 						Text goes here
 28 | 					</blockquote>
 29 | 				</div>
 30 | 				<div class="test__info">
 31 | 					<div class="test__info__results">
 32 | 						<details open>
 33 | 							<summary>Expectation</summary>
 34 | 							<div>
 35 | 								<p>
 36 | 									Should expose no accessible name.
 37 | 								</p>
 38 | 							</div>
 39 | 						</details>
 40 | 					</div>
 41 | 				</div>
 42 | 			</div>
 43 | 
 44 | 
 45 | 			<div class="test">
 46 | 				<h2>Blockquote with title attribute</h2>
 47 | 				<div class="test__case">
 48 | 					<blockquote title="Title">
 49 | 						Text goes here
 50 | 					</blockquote>
 51 | 				</div>
 52 | 				<div class="test__info">
 53 | 					<div class="test__info__results">
 54 | 						<details open>
 55 | 							<summary>Expectation</summary>
 56 | 							<div>
 57 | 								<p>
 58 | 									Should expose accessible name of "Title".
 59 | 								</p>
 60 | 							</div>
 61 | 						</details>
 62 | 					</div>
 63 | 				</div>
 64 | 			</div>
 65 | 
 66 | 
 67 | 			<div class="test">
 68 | 				<h2>Blockquote with aria-label attribute</h2>
 69 | 				<div class="test__case">
 70 | 					<blockquote aria-label="Aria label">
 71 | 						Text goes here
 72 | 					</blockquote>
 73 | 				</div>
 74 | 				<div class="test__info">
 75 | 					<div class="test__info__results">
 76 | 						<details open>
 77 | 							<summary>Expectation</summary>
 78 | 							<div>
 79 | 								<p>
 80 | 									Should expose accessible name of "Aria label".
 81 | 								</p>
 82 | 							</div>
 83 | 						</details>
 84 | 					</div>
 85 | 				</div>
 86 | 			</div>
 87 | 
 88 | 
 89 | 			<div class="test">
 90 | 				<h2>Blockquote with aria-labelledby attribute</h2>
 91 | 				<div class="test__case">
 92 | 					<div hidden id="a">Aria label"</div>
 93 | 					<blockquote aria-labelledby="a">
 94 | 						Text goes here
 95 | 					</blockquote>
 96 | 				</div>
 97 | 				<div class="test__info">
 98 | 					<div class="test__info__results">
 99 | 						<details open>
100 | 							<summary>Expectation</summary>
101 | 							<div>
102 | 								<p>
103 | 									Should expose accessible name of "Aria label".
104 | 								</p>
105 | 							</div>
106 | 						</details>
107 | 					</div>
108 | 				</div>
109 | 			</div>
110 | 
111 | 
112 | 
113 | 
114 | 		</div> <!-- /#app -->
115 | 		<script src="../-assets/shared.js"></script>
116 | 	</body>
117 | </html>
118 | 


--------------------------------------------------------------------------------
/html-button/font-awesome.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Testing font awesome buttons</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link rel="stylesheet" href="../-assets/shared.css">
  8 |     <style>
  9 |       button:hover,
 10 |       button:focus {
 11 |         box-shadow: 0 0 0 2px lightBlue;
 12 |         outline: 2px solid blue;
 13 |         outline-offset: 2px;
 14 |       }
 15 | 
 16 |       .flex {
 17 |         display: flex;
 18 |         min-width: 200px;
 19 |       }
 20 | 
 21 |       .flex i {
 22 |         width: 2em;
 23 |       }
 24 | 
 25 |       .flex > span {
 26 |         flex-grow: 1;
 27 |       }
 28 | 
 29 |       .flex > span > span {
 30 |         display: inline-block;
 31 |         width: 100%;
 32 |         padding: .25em 0;
 33 |       }
 34 | 
 35 |       .txt-center {
 36 |         text-align: center;
 37 |       }
 38 |     </style>
 39 |     <script src="https://kit.fontawesome.com/ca0bc8d5e7.js"></script>
 40 |   </head>
 41 |   </head>
 42 |   <body>
 43 |     <div id="app">
 44 |       <header>
 45 |         <h1>Testing font awesome button patterns</h1>
 46 |         <div class="dates">
 47 |           <p>Published: April 25, 2020</p>
 48 |           <!-- <p>Last Updated: X, 2020</p> -->
 49 |         </div>
 50 |       </header>
 51 | 
 52 |       <div class="test">
 53 |         <h2>Button with icon w/role=img and aria-label</h2>
 54 |         <div class="test__case">
 55 |           <button>
 56 | <span aria-label="download" role="img">
 57 |   <i class="far fa-arrow-alt-circle-down"></i>
 58 |   <!-- font-awesome automatically puts an aria-hidden=true on its icons -->
 59 | </span>
 60 | </button>
 61 |         </div>
 62 |         <div class="test__info"></div>
 63 |       </div>
 64 | 
 65 | 
 66 |       <div class="test">
 67 |         <h2>Button with icon and visible text</h2>
 68 |         <div class="test__case">
 69 |           <button>
 70 |   <i class="far fa-arrow-alt-circle-down"></i>
 71 |   Download
 72 | </button>
 73 |         </div>
 74 |         <div class="test__info"></div>
 75 |       </div>
 76 | 
 77 | 
 78 |       <div class="test">
 79 |         <h2>Button with icon with aria-hidden=true and visible text</h2>
 80 |         <div class="test__case">
 81 |           <button>
 82 |   <i class="far fa-arrow-alt-circle-down"></i>
 83 |   Download
 84 | </button>
 85 |         </div>
 86 |         <div class="test__info"></div>
 87 |       </div>
 88 | 
 89 | 
 90 |       <div class="test">
 91 |         <h2>Button with icon w/role=img and aria-label and visible text</h2>
 92 |         <div class="test__case">
 93 |           <button>
 94 |   <i class="far fa-arrow-alt-circle-down" aria-label="download" role="img"></i>
 95 |   File name
 96 | </button>
 97 |         </div>
 98 |         <div class="test__info"></div>
 99 |       </div>
100 | 
101 | 
102 |       <div class="test">
103 |         <h2>Button with icon with <code>aria-hidden=true</code> and visible text</h2>
104 |         <div class="test__case">
105 |           <button>
106 |   <i class="far fa-arrow-alt-circle-down" aria-hidden="true"></i>
107 |   File name
108 | </button>
109 |         </div>
110 |         <div class="test__info"></div>
111 |       </div>
112 | 
113 | 
114 | 
115 |       <div class="test">
116 |         <h2>Button using flexbox with icon with <code>aria-hidden=true</code> and visible text</h2>
117 |         <div class="test__case">
118 |           <button class="flex">
119 |   <i class="far fa-arrow-alt-circle-down" aria-hidden="true"></i>
120 |   <span class="txt-center">File name</span>
121 | </button>
122 |         </div>
123 |         <div class="test__info"></div>
124 |       </div>
125 | 
126 | 
127 | 
128 |       <div class="test">
129 |         <h2>Button using flexbox with icon with <code>aria-hidden=true</code> and 2 lines of visible text</h2>
130 |         <div class="test__case">
131 |           <button class="flex">
132 |   <i class="far fa-arrow-alt-circle-down"
133 |     aria-hidden="true"
134 |     style="position: relative; top: .825em;"></i>
135 |   <span>
136 |     <span>Download</span>
137 |     <span>File name</span>
138 |   </span>
139 | </button>
140 |         </div>
141 |         <div class="test__info"></div>
142 |       </div>
143 | 
144 |     </div>
145 |     <script src="../-assets/shared.js"></script>
146 |   </body>
147 | </html>
148 | 


--------------------------------------------------------------------------------
/html-cite/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>cite element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <a href="https://html.spec.whatwg.org/#the-cite-element"><code>cite</code></a> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>cite</code></h2>
 31 |         <div class="test__case">
 32 |           <cite>cite</cite>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>cite</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <cite title="title">cite</cite>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>cite</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <cite aria-label="ARIA label">cite</cite>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>cite</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <cite aria-label="ARIA label" title="title">cite</cite>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>cite</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <cite tabindex="0">cite</cite>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>cite</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <cite tabindex="0" title="title">cite</cite>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>cite</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <cite aria-label="ARIA label" title="title" tabindex="0">cite</cite>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-code/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>code element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>code</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>code</code></h2>
 31 |         <div class="test__case">
 32 |           <code>code</code>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>code</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <code title="title">code</code>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>code</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <code aria-label="ARIA label">code</code>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>code</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <code aria-label="ARIA label" title="title">code</code>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>code</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <code tabindex="0">code</code>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>code</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <code tabindex="0" title="title">code</code>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>code</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <code aria-label="ARIA label" title="title" tabindex="0">code</code>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-details-summary/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Details and summary elements</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link rel="stylesheet" href="../-assets/shared.css">
  8 |     <style>
  9 |       input[type="image"] {
 10 |         height: 80px;
 11 |         width: 80px;
 12 |       }
 13 |     </style>
 14 |   </head>
 15 |   <body>
 16 |     <div id="app">
 17 |       <header>
 18 |         <h1>Testing <code>details</code> and <code>summary</code></h1>
 19 |         <div class="dates">
 20 |           <p>
 21 |             Published: <time datetime="2019-07-26">July 26, 2019</time>
 22 |           </p>
 23 |           <!-- <p>Last Updated: <time>...</time></p> -->
 24 |         </div>
 25 |       </header>
 26 | 
 27 |       <div class="test">
 28 |         <h2><code>details</code> without <code>summary</code></h2>
 29 |         <div class="test__case">
 30 |           <details>
 31 |             Information here
 32 |           </details>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |             <!-- <details>
 37 |               <summary>results</summary>
 38 |               <div></div>
 39 |             </details> -->
 40 |           </div>
 41 |         </div>
 42 |       </div>
 43 | 
 44 | 
 45 |       <div class="test">
 46 |         <h2><code>details</code> with <code>summary</code>, but no child content</h2>
 47 |         <div class="test__case">
 48 |           <details>
 49 |             <summary></summary>
 50 |             Information here
 51 |           </details>
 52 |         </div>
 53 |         <div class="test__info">
 54 |           <div class="test__info__results">
 55 |             <!-- <details>
 56 |               <summary>results</summary>
 57 |               <div></div>
 58 |             </details> -->
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 | 
 64 |       <div class="test">
 65 |         <h2><code>details</code> with <code>summary</code>, with <code>title</code> but no child content</h2>
 66 |         <div class="test__case">
 67 |           <details>
 68 |             <summary title="title"></summary>
 69 |             Information here
 70 |           </details>
 71 |         </div>
 72 |         <div class="test__info">
 73 |           <div class="test__info__results">
 74 |             <!-- <details>
 75 |               <summary>results</summary>
 76 |               <div></div>
 77 |             </details> -->
 78 |           </div>
 79 |         </div>
 80 |       </div>
 81 | 
 82 | 
 83 | 
 84 |       <div class="test">
 85 |         <h2><code>details</code> with <code>title</code> and <code>summary</code> with no child content</h2>
 86 |         <div class="test__case">
 87 |           <details title="title">
 88 |             <summary></summary>
 89 |             Information here
 90 |           </details>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |             <details>
 95 |               <summary>results</summary>
 96 |               <div>
 97 |                 <p>VO + Safari will announce the accName of <code>summary</code> as the value of the <code>details</code> <code>title</code> attribute.</p>
 98 |                 <p>VO + Chrome will announce the <code>details</code> as a group with <code>title</code> as the accName. <code>summary</code> will be given no accName.</p>
 99 |               </div>
100 |             </details>
101 |           </div>
102 |         </div>
103 |       </div>
104 | 
105 |     </div> <!-- /#app -->
106 | 
107 |     <script src="../-assets/shared.js"></script>
108 |   </body>
109 | </html>
110 | 


--------------------------------------------------------------------------------
/html-details-summary/mixed-content.html:
--------------------------------------------------------------------------------
 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">
 6 |     <title>Testing summaries with intermixed phrasing and heading content</title>
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 |       summary h3 {
10 |         display: inline-block;
11 |         margin: 0;
12 |         width: calc(100% - 2em);
13 |       }
14 | 
15 |       summary > span {
16 |         padding-left: 1.4em;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <div id="app">
22 |       <header>
23 |         <h1><code>details</code> and <code>summary</code> element tests</h1>
24 |         <div class="dates">
25 |           <p>Published: <span>November 26th, 2019</span></p>
26 |         </div>
27 |       </header>
28 | 
29 | 
30 |       <div class="test">
31 |         <h2><code>details</code> with a <code>summary</code> containing an <code>a</code> element</h2>
32 |         <div class="test__case">
33 |           <details>
34 |             <summary>
35 |               Standard summary <a href="#">with an <code>a</code> element</a>
36 |             </summary>
37 |             <div>
38 |               Content goes here.
39 |             </div>
40 |           </details>
41 |         </div>
42 |         <div class="test__info">
43 | 
44 |         </div>
45 |       </div> <!-- /.test -->
46 | 
47 |       <div class="test">
48 |         <h2><code>details</code> with a <code>summary</code> containing a <code>heading</code></h2>
49 |         <div class="test__case">
50 |           <details>
51 |             <summary>
52 |               <h3>Summering</h3>
53 |             </summary>
54 |             <div>
55 |               Content goes here.
56 |             </div>
57 |           </details>
58 |         </div>
59 |         <div class="test__info">
60 | 
61 |         </div>
62 |       </div> <!-- /.test -->
63 | 
64 | 
65 |       <div class="test">
66 |         <h2><code>details</code> with a <code>summary</code> containing a <code>heading</code> and phrasing content</h2>
67 |         <div class="test__case">
68 |           <details class="format">
69 |             <summary>
70 |               <h3>Summering</h3>
71 |               <span>and more <a href="#">content</a></span>.
72 |             </summary>
73 |             <div>
74 |               Content goes here.
75 |             </div>
76 |           </details>
77 |         </div>
78 |         <div class="test__info">
79 | 
80 |         </div>
81 |       </div> <!-- /.test -->
82 | 
83 | 
84 |     </div> <!-- /#app -->
85 | 
86 |     <script src="../-assets/shared.js"></script>
87 |   </body>
88 | </html>
89 | 


--------------------------------------------------------------------------------
/html-dl/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>dl/dt/dd element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>dl</code>, <code>dt</code>, <code>dd</code> elements</h1>
 16 |         <div class="dates">
 17 |           <p>Published: April 20, 2021</p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>dl dt dd</code></h2>
 31 |         <div class="test__case">
 32 |           <dl>
 33 |             <dt>key</dt>
 34 |             <dd>value</dd>
 35 |           </dl>
 36 |         </div>
 37 |         <div class="test__info">
 38 |           <div class="test__info__results">
 39 |           </div>
 40 |         </div>
 41 |       </div>
 42 | 
 43 | 
 44 |       <div class="test">
 45 |         <h2><code>dl dt dt dd</code></h2>
 46 |         <div class="test__case">
 47 |           <dl>
 48 |             <dt>key 1</dt>
 49 |             <dt>key 2</dt>
 50 |             <dd>value</dd>
 51 |           </dl>
 52 |         </div>
 53 |         <div class="test__info">
 54 |           <div class="test__info__results">
 55 |           </div>
 56 |         </div>
 57 |       </div>
 58 | 
 59 | 
 60 |       <div class="test">
 61 |         <h2><code>dl dt dd dt dd</code></h2>
 62 |         <div class="test__case">
 63 |           <dl>
 64 |             <dt>key 1</dt>
 65 |             <dd>value 1</dd>
 66 |             <dt>key 2</dt>
 67 |             <dd>value 2</dd>
 68 |           </dl>
 69 |         </div>
 70 |         <div class="test__info">
 71 |           <div class="test__info__results">
 72 |           </div>
 73 |         </div>
 74 |       </div>
 75 | 
 76 | 
 77 |       <div class="test">
 78 |         <h2><code>dl div dt dd div dt dd</code></h2>
 79 |         <div class="test__case">
 80 |           <style>
 81 |             dl div {
 82 |               border: 1px solid;
 83 |             }
 84 |           </style>
 85 |           <dl>
 86 |             <div>
 87 |               <dt>key 1</dt>
 88 |               <dd>value 1</dd>
 89 |             </div>
 90 |             <div>
 91 |               <dt>key 2</dt>
 92 |               <dd>value 2</dd>
 93 |             </div>
 94 |           </dl>
 95 |         </div>
 96 |         <div class="test__info">
 97 |           <div class="test__info__results">
 98 |           </div>
 99 |         </div>
100 |       </div>
101 | 
102 | 
103 | 
104 | 		</div> <!-- /#app -->
105 | 
106 |     <script src="../-assets/shared.js"></script>
107 | 
108 | 	</body>
109 | </html>
110 | 


--------------------------------------------------------------------------------
/html-fieldset-legend/legends.html:
--------------------------------------------------------------------------------
  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">
  6 |     <title>Testing legends with intermixed phrasing and heading content</title>
  7 |     <link rel="stylesheet" href="../-assets/shared.css">
  8 |     <style>
  9 |       .format legend {
 10 |         padding: 1em .5em .5em;
 11 |         margin-left: -.25em;
 12 |       }
 13 | 
 14 |       .format h3 {
 15 |         margin: 0;
 16 |       }
 17 |     </style>
 18 |   </head>
 19 |   <body>
 20 |     <div id="app">
 21 |       <header>
 22 |         <h1><code>fieldset</code> and <code>legend</code> element tests</h1>
 23 |         <div class="dates">
 24 |           <p>Published: <span>November 26th, 2019</span></p>
 25 |         </div>
 26 |       </header>
 27 | 
 28 | 
 29 |       <div class="test">
 30 |         <h2><code>fieldset</code> with a <code>legend</code> containing an <code>a</code> element</h2>
 31 |         <div class="test__case">
 32 |           <fieldset>
 33 |             <legend>
 34 |               Standard legend <a href="#">with an <code>a</code> element</a>
 35 |             </legend>
 36 |             <div>
 37 |               <label>
 38 |                 <input type=radio name=r>
 39 |                 test 1
 40 |               </label>
 41 |             </div>
 42 |             <div>
 43 |               <label>
 44 |                 <input type=radio name=r>
 45 |                 test 2
 46 |               </label>
 47 |             </div>
 48 |           </fieldset>
 49 |         </div>
 50 |         <div class="test__info">
 51 | 
 52 |         </div>
 53 |       </div> <!-- /.test -->
 54 | 
 55 |       <div class="test">
 56 |         <h2><code>fieldset</code> with a <code>legend</code> containing a <code>heading</code></h2>
 57 |         <div class="test__case">
 58 |           <fieldset>
 59 |             <legend>
 60 |               <h3>Ledging</h3>
 61 |             </legend>
 62 |             <div>
 63 |               <label>
 64 |                 <input type=radio name=r1>
 65 |                 test 1
 66 |               </label>
 67 |             </div>
 68 |             <div>
 69 |               <label>
 70 |                 <input type=radio name=r1>
 71 |                 test 2
 72 |               </label>
 73 |             </div>
 74 |           </fieldset>
 75 |         </div>
 76 |         <div class="test__info">
 77 | 
 78 |         </div>
 79 |       </div> <!-- /.test -->
 80 | 
 81 | 
 82 |       <div class="test">
 83 |         <h2><code>fieldset</code> with a <code>legend</code> containing a <code>heading</code> and phrasing content</h2>
 84 |         <div class="test__case">
 85 |           <fieldset class="format">
 86 |             <legend>
 87 |               <h3>Ledging</h3> and more <a href="#">content</a>.
 88 |             </legend>
 89 |             <div>
 90 |               <label>
 91 |                 <input type=radio name=r2>
 92 |                 test 1
 93 |               </label>
 94 |             </div>
 95 |             <div>
 96 |               <label>
 97 |                 <input type=radio name=r2>
 98 |                 test 2
 99 |               </label>
100 |             </div>
101 |           </fieldset>
102 |         </div>
103 |         <div class="test__info">
104 | 
105 |         </div>
106 |       </div> <!-- /.test -->
107 | 
108 | 
109 |     </div> <!-- /#app -->
110 | 
111 |     <script src="../-assets/shared.js"></script>
112 |   </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/html-fieldset-legend/radios.html:
--------------------------------------------------------------------------------
 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">
 6 |     <title>Testing fieldset and legend for radio groups</title>
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1><code>fieldset</code> and <code>legend</code> element tests</h1>
16 |         <div class="dates">
17 |           <p>Published: <span>September 5th, 2019</span></p>
18 |         </div>
19 |       </header>
20 | 
21 | 
22 |       <div class="test">
23 |         <h2><code>fieldset</code> with a <code>legend</code></h2>
24 |         <div class="test__case">
25 |           <fieldset aria-label="ARIA label">
26 |             <legend>Legend</legend>
27 |             <label>
28 |               <input type="radio" name="r">
29 |               Option 1
30 |             </label>
31 |             <label>
32 |               <input type="radio" name="r">
33 |               Option 2
34 |             </label>
35 |             <label>
36 |               <input type="radio" name="r">
37 |               Option 3
38 |             </label>
39 |             <label>
40 |               <input type="radio" name="r">
41 |               Option 4
42 |             </label>
43 |           </fieldset>
44 |         </div>
45 |         <div class="test__info">
46 | 
47 |         </div>
48 |       </div>
49 | 
50 |     </div> <!-- /#app -->
51 | 
52 |     <script src="../-assets/shared.js"></script>
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/html-figure-figcaption/screen-reader-results/earth.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scottaohara/tests/3b4e77239183b3d7af1437e36d14570e5e49c5d4/html-figure-figcaption/screen-reader-results/earth.jpg


--------------------------------------------------------------------------------
/html-figure-figcaption/screen-reader-results/icon.svg:
--------------------------------------------------------------------------------
1 | <svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg">
2 |   <path d="M832 320c-8.75 0-17.125 1.406-25.625 2.562C757.625 208.25 644.125 128 512 128c-132.156 0-245.562 80.25-294.406 194.562C209.156 321.406 200.781 320 192 320 85.938 320 0 405.938 0 512s85.938 192 192 192c20.531 0 39.875-4.25 58.375-10.375C284.469 731.375 331.312 756.75 384 764.5v-65.25c-49.844-10.375-91.594-42.812-112.625-87.875C249.531 629 222.219 640 192 640c-70.656 0-128-57.375-128-128 0-70.656 57.344-128 128-128 25.281 0 48.625 7.562 68.406 20.094C281.344 283.78099999999995 385.594 192 512 192c126.5 0 229.75 92.219 250.5 212.75 20-13 43.875-20.75 69.5-20.75 70.625 0 128 57.344 128 128 0 70.625-57.375 128-128 128-10.25 0-20-1.5-29.625-3.75C773.438 677.125 725.938 704 672 704c-11.062 0-21.625-1.625-32-4v64.938c10.438 1.688 21.062 3.062 32 3.062 61.188 0 116.5-24.625 156.938-64.438C830 703.625 830.875 704 832 704c106.062 0 192-85.938 192-192S938.062 320 832 320zM576 512H448v320H320l192 192 192-192H576V512z" />
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/html-header/firefox-a11ytree-aug2019.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scottaohara/tests/3b4e77239183b3d7af1437e36d14570e5e49c5d4/html-header/firefox-a11ytree-aug2019.jpg


--------------------------------------------------------------------------------
/html-headings/6plus.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Testing Heading levels beyond 6</title>
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     <div id="app">
13 |       <header>
14 |         <h1>Testing heading levels beyond 6</h1>
15 |         <div class="dates">
16 |           <p>Published: <span>October 22, 2019</span></p>
17 |         </div>
18 |       </header>
19 | 
20 |       <div class="test">
21 |         <h2>Headings of different levels beyond 6</h2>
22 |         <div class="test__case">
23 |           <h1 aria-level="7">
24 |             h1 with level 7
25 |           </h1>
26 |           <div role="heading" aria-level="8">
27 |             div with role heading and level 8
28 |           </div>
29 |           <h3 role="heading" aria-level="20">
30 |             h3 with role heading and level 20
31 |           </h3>
32 |         </div>
33 |         <div class="test__info">
34 |           <div class="test__info__results">
35 |             <details open>
36 |               <summary>results</summary>
37 |               <div>
38 |                 <dl>
39 |                   <dt>MSAA/IA2</dt>
40 |                   <dd>MSAA reports h1, Heading.</dd>
41 |                   <dd>IA2 reports role Heading and object attribute level 7, 8 and 20.</dd>
42 |                   <dt>AX API</dt>
43 |                   <dd>Reports AXHeading with value of 7, 8 and 20.</dd>
44 |                 </dl>
45 |                 <dl>
46 |                   <dt>JAWS 2019</dt>
47 |                   <dd>Firefox - level 2 for all headings beyond 6.</dd>
48 |                   <dd>Chrome - level 2 for h1 and div test, level 3 for h3 test.</dd>
49 |                   <dt>NVDA</dt>
50 |                   <dd>Firefox announces level 7, 8 and 20.</dd>
51 |                   <dd>Chrome announces level 7 and 8. Level 3 announced for h3 test</dd>
52 |                   <dt>macOS VoiceOver</dt>
53 |                   <dd>With Safari announces level 7, 8 and 20.</dd>
54 |                 </dl>
55 |               </div>
56 |             </details>
57 |           </div>
58 |         </div>
59 |       </div>
60 | 
61 | 
62 | 
63 | 		</div> <!-- /#app -->
64 |     <script src="../-assets/shared.js"></script>
65 |   </body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/html-headings/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Testing Heading patterns</title>
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing heading element patterns</h1>
16 |         <div class="dates">
17 |           <p>Published: <span>July 31, 2019</span></p>
18 |         </div>
19 |       </header>
20 | 
21 |       <div class="test">
22 |         <h2>Heading containing span</h2>
23 |         <div class="test__case">
24 |           <h1>
25 |             <span role="presentation">Introducing</span>
26 |             Name of thing
27 |           </h1>
28 |         </div>
29 |         <div class="test__info">
30 |           <div class="test__info__results">
31 |           </div>
32 |         </div>
33 |       </div>
34 | 
35 |       <div class="test">
36 |         <h2>Heading with aria-label containing span </h2>
37 |         <div class="test__case">
38 |           <h1 aria-label="something else">
39 |             <span>Introducing</span>
40 |             Name of thing
41 |           </h1>
42 |         </div>
43 |         <div class="test__info">
44 |           <div class="test__info__results">
45 |           </div>
46 |         </div>
47 |       </div>
48 | 
49 | 
50 |       <div class="test">
51 |         <h2>Heading with aria-label containing span with aria-hidden=true </h2>
52 |         <div class="test__case">
53 |           <h1 aria-label="something else">
54 |             <span aria-hidden="true">Introducing
55 |             Name of thing</span>
56 |           </h1>
57 |         </div>
58 |         <div class="test__info">
59 |           <div class="test__info__results">
60 |           </div>
61 |         </div>
62 |       </div>
63 | 
64 |       <div class="test">
65 |         <h2>Heading with aria-label, role and aria-level containing span with aria-hidden=true </h2>
66 |         <div class="test__case">
67 |           <h1 role="heading" aria-level="1" aria-label="something else">
68 |             <span aria-hidden="true">Introducing
69 |             Name of thing</span>
70 |           </h1>
71 |         </div>
72 |         <div class="test__info">
73 |           <div class="test__info__results">
74 |           </div>
75 |         </div>
76 |       </div>
77 | 
78 | 		</div> <!-- /#app -->
79 |     <script src="../-assets/shared.js"></script>
80 |   </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/html-history-test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>History testing</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 		<link rel="stylesheet" href="../-assets/shared.css">
 8 | 		<style>
 9 | 
10 | 		</style>
11 | 	</head>
12 | 	<body>
13 | 		<div id="app">
14 | 			<header>
15 |         <h1>Testing updating a browser's history</h1>
16 |         <div class="dates">
17 |           <p>Published: <span>August 20, 2019</span></p>
18 |         </div>
19 |       </header>
20 | 
21 | 			<div class="test">
22 | 				<h2>Activate a link to inject content and update history</h2>
23 | 				<div class="test__case">
24 | 
25 | 					<div id="content-area">
26 | 						<p>
27 | 						Initial content goes here</p>
28 | 						<p><a href="#!" style="margin-bottom: 1em;" id="link">link to test</a></p>
29 | 					</div>
30 | 					<script>
31 | 						var link = document.getElementById('link');
32 | 						var content = document.getElementById('content-area');
33 | 						let stateObj = {
34 | 						    test: '<h2 tabindex="-1">test page</h2><p>test page content</p><p>the following link has standard link behavior</p><a href="index.html">return to index page</a>'
35 | 						};
36 | 
37 | 						link.addEventListener('click', function ( e ) {
38 | 							e.preventDefault();
39 | 							content.innerHTML = stateObj.test
40 | 							history.pushState(stateObj, 'My test page', 'test.html');
41 | 							content.querySelector('h2').focus();
42 | 						});
43 | 					</script>
44 | 				</div>
45 | 				<div class="test__info">
46 |           <div class="test__info__results"></div>
47 |         </div>
48 | 			</div>
49 | 
50 | 		</div> <!-- /#app -->
51 | 
52 | 		<script src="../-assets/shared.js"></script>
53 | 	</body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/html-history-test/test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>History testing</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 		<link rel="stylesheet" href="../-assets/shared.css">
 8 | 		<style>
 9 | 
10 | 		</style>
11 | 	</head>
12 | 	<body>
13 | 		<div id="app">
14 | 			<h2 tabindex="-1">Test page</h2>
15 | 			<p>test page content</p>
16 | 			<p>the following link has standard link behavior</p>
17 | 			<a href="index.html">return to index page</a>
18 | 
19 | 		</div> <!-- /#app -->
20 | 
21 | 		<script src="../-assets/shared.js"></script>
22 | 	</body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/html-i/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>i element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>i</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>i</code></h2>
 31 |         <div class="test__case">
 32 |           <i>i</i>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>i</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <i title="title">i</i>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>i</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <i aria-label="ARIA label">i</i>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>i</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <i aria-label="ARIA label" title="title">i</i>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>i</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <i tabindex="0">i</i>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>i</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <i tabindex="0" title="title">i</i>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>i</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <i aria-label="ARIA label" title="title" tabindex="0">i</i>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-iframe/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>iframe element tests</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 		<link rel="stylesheet" href="../-assets/shared.css">
 8 | 		<style>
 9 | 
10 | 		</style>
11 | 	</head>
12 | 	<body>
13 | 		<div id="app">
14 |       <header>
15 |         <h1>Testing the <code>iframe</code> element</h1>
16 |         <div class="dates">
17 |           <p>Published: <span>September 15, 2019</span></p>
18 |         </div>
19 |       </header>
20 | 
21 | 			<div class="test">
22 |         <h2><code>iframe</code> with no accessible name</h2>
23 |         <div class="test__case">
24 |           <iframe src="https://scottaohara.github.io/tests"></iframe>
25 |         </div>
26 |         <div class="test__info">
27 |           <div class="test__info__results">
28 |           </div>
29 |         </div>
30 |       </div>
31 | 
32 |       <div class="test">
33 |         <h2><code>iframe</code> with aria-label</h2>
34 |         <div class="test__case">
35 |           <iframe aria-label="ARIA label" src="https://scottaohara.github.io/tests"></iframe>
36 |         </div>
37 |         <div class="test__info">
38 |           <div class="test__info__results">
39 |           </div>
40 |         </div>
41 |       </div>
42 | 
43 |       <div class="test">
44 |         <h2><code>iframe</code> with title</h2>
45 |         <div class="test__case">
46 |           <iframe title="title" src="https://scottaohara.github.io/tests"></iframe>
47 |         </div>
48 |         <div class="test__info">
49 |           <div class="test__info__results">
50 |           </div>
51 |         </div>
52 |       </div>
53 | 
54 | 
55 | 		</div> <!-- /#app -->
56 | 
57 |     <script src="../-assets/shared.js"></script>
58 | 
59 | 	</body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/html-img/broken.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Testing broken images</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link rel="stylesheet" href="../-assets/shared.css">
  8 |     <style>
  9 |       .test-size {
 10 |         background: lightyellow;
 11 |         width: 150px;
 12 |         height: 100px;
 13 |         font-weight: bolder;
 14 |       }
 15 |     </style>
 16 |   </head>
 17 |   <body>
 18 |     <div id="app">
 19 |       <header>
 20 |         <h1>
 21 |           Broken Image tests
 22 |         </h1>
 23 |         <div class="dates">
 24 |           <p>Published: <time>January 9, 2019</time></p>
 25 |           <p>Last Updated: <time>July 22, 2019</time></p>
 26 |         </div>
 27 |         <p>
 28 |           Tests to run in different browsers to demonstrate what's rendered
 29 |           as fall back content for broken images.
 30 |         </p>
 31 | 
 32 |         <p>
 33 |           As an additional test, add a set height and width to images to show how that may change what fall back content, if any, is rendered.
 34 |         </p>
 35 |         <p>
 36 |           <label>
 37 |             <input type="checkbox" id="show">
 38 |             Add a set height and width to images
 39 |           </label>
 40 |         </p>
 41 |       </header>
 42 | 
 43 | 
 44 |       <div class="test">
 45 |         <h2>with alt text</h2>
 46 |         <div class="test__case">
 47 |           <img src="asdf.jpg" alt="alt text">
 48 |         </div>
 49 |         <div class="test__info"></div>
 50 |       </div>
 51 | 
 52 | 
 53 |       <div class="test">
 54 |         <h2>with title text and no alt</h2>
 55 |         <div class="test__case">
 56 |           <img src='asdf.jpg' title="title text">
 57 |         </div>
 58 |         <div class="test__info"></div>
 59 |       </div>
 60 | 
 61 | 
 62 |       <div class="test">
 63 |         <h2>with aria-label and no title or alt</h2>
 64 |         <div class="test__case">
 65 |           <img src="asdf.jpg" aria-label="aria label">
 66 |         </div>
 67 |         <div class="test__info"></div>
 68 |       </div>
 69 | 
 70 | 
 71 |       <div class="test">
 72 |         <h2>with aria-labelledby and no title or alt</h2>
 73 |         <div class="test__case">
 74 |           <img src="asdf.jpg" aria-labelledby="d">
 75 |           <p id=d>aria-labelledby text</p>
 76 |         </div>
 77 |         <div class="test__info"></div>
 78 |       </div>
 79 | 
 80 | 
 81 |       <div class="test">
 82 |         <h2>with alt and title text</h2>
 83 |         <div class="test__case">
 84 |           <img src='asdf.jpg' alt="alt text" title="title text">
 85 |         </div>
 86 |         <div class="test__info"></div>
 87 |       </div>
 88 | 
 89 | 
 90 |       <div class="test">
 91 |         <h2>with alt and role=presentation</h2>
 92 |         <div class="test__case">
 93 |           <img src='asdf.jpg' alt="alt text" role="presentation">
 94 |         </div>
 95 |         <div class="test__info"></div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2>with empty alt and aria-label</h2>
101 |         <div class="test__case">
102 |           <img src='asdf.jpg' alt="" aria-label="ARIA label">
103 |         </div>
104 |         <div class="test__info"></div>
105 |       </div>
106 | 
107 | 
108 |       <script>
109 |         var check = document.getElementById('show');
110 |         var tests = document.querySelectorAll('img');
111 |         // reset on page refresh just in case
112 |         check.checked = false;
113 | 
114 |         check.addEventListener('change', function () {
115 |           for ( var i = 0; i < tests.length; i++ ) {
116 |             if ( check.checked === true ) {
117 |               tests[i].classList.add('test-size');
118 |             }
119 |             else {
120 |               tests[i].classList.remove('test-size');
121 |             }
122 |           }
123 |         });
124 |       </script>
125 |       <script src="../-assets/shared.js"></script>
126 |     </div>
127 |   </body>
128 | </html>
129 | 


--------------------------------------------------------------------------------
/html-img/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Testing the img element</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link rel="stylesheet" href="../-assets/shared.css">
  8 |     <style>
  9 |       img {
 10 |         max-width: 100%;
 11 |       }
 12 |     </style>
 13 |   </head>
 14 |   <body>
 15 |     <div id="app">
 16 |       <header>
 17 |         <h1>
 18 |           Testing the <code>img</code> element
 19 |         </h1>
 20 |         <div class="dates">
 21 |           <p>Published: <span>September 15, 2019</span></p>
 22 |           <!-- <p>Last Updated: <span>J...</span></p> -->
 23 |         </div>
 24 |       </header>
 25 | 
 26 | 
 27 |       <div class="test">
 28 |         <h2>with alt text</h2>
 29 |         <div class="test__case">
 30 |           <img src="yellow.jpg" alt="alt text">
 31 |         </div>
 32 |         <div class="test__info"></div>
 33 |       </div>
 34 | 
 35 | 
 36 |       <div class="test">
 37 |         <h2>with title text and no alt</h2>
 38 |         <div class="test__case">
 39 |           <img src='yellow.jpg' title="title text">
 40 |         </div>
 41 |         <div class="test__info"></div>
 42 |       </div>
 43 | 
 44 | 
 45 |       <div class="test">
 46 |         <h2>with aria-label and no title or alt</h2>
 47 |         <div class="test__case">
 48 |           <img src="yellow.jpg" aria-label="aria label">
 49 |         </div>
 50 |         <div class="test__info"></div>
 51 |       </div>
 52 | 
 53 | 
 54 |       <div class="test">
 55 |         <h2>with aria-labelledby and no title or alt</h2>
 56 |         <div class="test__case">
 57 |           <img src="yellow.jpg" aria-labelledby="d">
 58 |           <p id=d>aria-labelledby text</p>
 59 |         </div>
 60 |         <div class="test__info"></div>
 61 |       </div>
 62 | 
 63 | 
 64 |       <div class="test">
 65 |         <h2>with alt and title text</h2>
 66 |         <div class="test__case">
 67 |           <img src='yellow.jpg' alt="alt text" title="title text">
 68 |         </div>
 69 |         <div class="test__info"></div>
 70 |       </div>
 71 | 
 72 | 
 73 |       <div class="test">
 74 |         <h2>with alt and role=presentation</h2>
 75 |         <div class="test__case">
 76 |           <img src='yellow.jpg' alt="alt text" role="presentation">
 77 |         </div>
 78 |         <div class="test__info"></div>
 79 |       </div>
 80 | 
 81 | 
 82 |       <div class="test">
 83 |         <h2>with empty alt and aria-label</h2>
 84 |         <div class="test__case">
 85 |           <img src='yellow.jpg' alt="" aria-label="ARIA label">
 86 |         </div>
 87 |         <div class="test__info"></div>
 88 |       </div>
 89 | 
 90 |       <div class="test">
 91 |         <h2>with title and an empty alt</h2>
 92 |         <div class="test__case">
 93 |           <img src='yellow-small.jpg' alt="" title="title text">
 94 |         </div>
 95 |         <div class="test__info"></div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2>with srcset</h2>
101 |         <div class="test__case">
102 |           <img src='yellow-small.jpg' srcset="yellow.jpg" alt="alt attribute">
103 |         </div>
104 |         <div class="test__info"></div>
105 |       </div>
106 | 
107 | 
108 |       <div class="test">
109 |         <h2>within picture</h2>
110 |         <div class="test__case">
111 |           <picture>
112 |             <source srcset="yellow.jpg" media="(min-width: 800px)">
113 |             <img src='yellow-small.jpg' alt="alt attribute">
114 |           </picture>
115 |         </div>
116 |         <div class="test__info"></div>
117 |       </div>
118 | 
119 | 
120 |       <script src="../-assets/shared.js"></script>
121 |     </div>
122 |   </body>
123 | </html>
124 | 


--------------------------------------------------------------------------------
/html-img/sample-usemap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scottaohara/tests/3b4e77239183b3d7af1437e36d14570e5e49c5d4/html-img/sample-usemap.png


--------------------------------------------------------------------------------
/html-img/usemap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Testing usemap</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 |       img {
10 |         max-width: 100%;
11 |       }
12 |     </style>
13 |   </head>
14 |   <body>
15 |     <div id="app">
16 |       <header>
17 |         <h1>
18 |           Testing the <code>usemap</code> attribute
19 |         </h1>
20 |         <div class="dates">
21 |           <p>Published: <span>October 18, 2019</span></p>
22 |           <!-- <p>Last Updated: <span>...</span></p> -->
23 |         </div>
24 |       </header>
25 | 
26 | 
27 |       <div class="test">
28 |         <h2>with alt text</h2>
29 |         <div class="test__case">
30 |           <img src="sample-usemap.png" usemap="#shapes"
31 |                 alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
32 |            <map name="shapes">
33 |             <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
34 |             <area shape=rect coords="25,25,125,125" href="#red.html" alt="Red box.">
35 |             <area shape=circle coords="200,75,50" href="#green.html" alt="Green circle.">
36 |             <area shape=poly coords="325,25,262,125,388,125" href="#blue.html" alt="Blue triangle.">
37 |             <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
38 |                   href="#yellow.html" alt="Yellow star.">
39 |            </map>
40 |         </div>
41 |         <div class="test__info">
42 |           <a href="https://html.spec.whatwg.org/multipage/image-maps.html#attr-hyperlink-usemap">Example taken from the HTML Specification</a>
43 |         </div>
44 |       </div>
45 | 
46 | 
47 |       <script src="../-assets/shared.js"></script>
48 |     </div>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/html-img/yellow-small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scottaohara/tests/3b4e77239183b3d7af1437e36d14570e5e49c5d4/html-img/yellow-small.jpg


--------------------------------------------------------------------------------
/html-img/yellow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scottaohara/tests/3b4e77239183b3d7af1437e36d14570e5e49c5d4/html-img/yellow.jpg


--------------------------------------------------------------------------------
/html-inputs/example-req-checkbox-group.html:
--------------------------------------------------------------------------------
 1 | <form>
 2 |   <fieldset aria-describedby="desc">
 3 |     <legend>
 4 |       Choose your favorite fruit(s) - required
 5 |     </legend>
 6 |     <div id="desc">
 7 |       <span id="default">You must choose at least one fruit</span>
 8 |       <span role="alert"></span>
 9 |     </div>
10 |     <div>
11 |       <input id="Apple" name="Apple" type="checkbox">
12 |       <label for="Apple">Apple</label>
13 |     </div>
14 |     <div>
15 |       <input id="banana" name="banana" type="checkbox">
16 |       <label for="banana">Banana</label>
17 |     </div>
18 |     <div>
19 |       <input id="kiwi" name="kiwi" type="checkbox">
20 |       <label for="kiwi">Kiwi</label>
21 |     </div>
22 |   </fieldset>
23 |   <input type="submit">
24 | </form>
25 | 
26 | <script>
27 |   const def = document.getElementById('default');
28 |   const descEl = document.getElementById('desc');
29 |   const description = descEl.textContent;
30 |   const ogDesc = description;
31 |   const alert = descEl.querySelector('[role="alert"]');
32 | 
33 |   for ( const fieldset of document.querySelectorAll('fieldset') ) {
34 |     const checkValidity = () => {
35 |       if ( ![...fieldset.elements].some(e => e.checked) ) {
36 |         def.hidden = true;
37 |         alert.textContent = 'Error: ' + description;
38 |         def.textContent = alert.textContent;
39 | 
40 |         setTimeout(function () {
41 |           def.hidden = false;
42 |           alert.textContent = '';
43 |         }, 300);
44 | 
45 |         if ( !fieldset.getAttribute('aria-describedby') ) {
46 |           fieldset.setAttribute('aria-describedby', 'desc');
47 |         }
48 | 
49 |         event.preventDefault();
50 |       }
51 |     };
52 | 
53 |     const checkListener = () => {
54 |       if ( [...fieldset.elements].some(e => e.checked) ) {
55 |         def.textContent = ogDesc;
56 |         fieldset.removeAttribute('aria-describedby');
57 |       }
58 |     }
59 | 
60 |     fieldset.form.addEventListener('change', checkListener);
61 |     fieldset.form.addEventListener('submit', checkValidity);
62 |   }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/html-inputs/input-checkbox-required-group.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Requiring checkboxes</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 |       [role="checkbox"] {
10 |         height: 1.5em;
11 |         width: 1.5em;
12 |         border: 2px solid;
13 |         display: inline-block;
14 |       }
15 |       [role="checkbox"]:focus {
16 |         outline: 2px solid transparent;
17 |         box-shadow: 0 0 1px 3px lightblue;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="app">
23 |       <header>
24 |         <h1>Testing required checkbox groups</h1>
25 |         <div class="dates">
26 |           <p>Published: April 28, 2020</p>
27 |         </div>
28 |       </header>
29 | 
30 |       <div class="test">
31 |         <h2>Checkbox within <code>fieldset</code> with <code>required</code> attribute</h2>
32 |         <div class="test__case">
33 |           <form method="#" action="post">
34 |             <fieldset required>
35 |               <label>
36 |                 <input type="checkbox"> test 1
37 |               </label>
38 |               <label>
39 |                 <input type="checkbox"> test 2
40 |               </label>
41 |             </fieldset>
42 | 
43 |             <button type="submit">ok go</button>
44 |           </form>
45 |         </div>
46 | 
47 |        <!--  <div class="test__info">
48 |           <div class="test__info__results">
49 |             <details>
50 |               <summary>results</summary>
51 |               <div>
52 | 
53 |               </div>
54 |             </details>
55 |           </div>
56 |         </div> -->
57 |       </div>
58 | 
59 |     </div> <!-- /#app -->
60 | 
61 |     <script src="../-assets/shared.js"></script>
62 |   </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/html-inputs/input-radio.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Radio Buttons</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 |       [role="checkbox"] {
10 |         height: 1.5em;
11 |         width: 1.5em;
12 |         border: 2px solid;
13 |         display: inline-block;
14 |       }
15 |       [role="checkbox"]:focus {
16 |         outline: 2px solid transparent;
17 |         box-shadow: 0 0 1px 3px lightblue;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="app">
23 |       <header>
24 |         <h1>Testing radio buttons</h1>
25 |         <div class="dates">
26 |           <p>Published: February 08, 2020</p>
27 |         </div>
28 |       </header>
29 | 
30 |       <div class="test">
31 |         <h2>Radio button group with no initially checked radio</h2>
32 |         <div class="test__case">
33 |           <label>
34 |             <input type="radio" name="t">
35 |             option 1
36 |           </label>
37 |           <label>
38 |             <input type="radio" name="t">
39 |             option 2
40 |           </label>
41 |           <label>
42 |             <input type="radio" name="t">
43 |             option 3
44 |           </label>
45 |         </div>
46 | 
47 |         <div class="test__info">
48 |           <div class="test__info__results">
49 |             <details>
50 |               <summary>results</summary>
51 |               <div>
52 |                 <ul>
53 |                   <li>Firefox allows <kbd>Tab</kbd> key to focus each radio button until a selection is made.</li>
54 |                   <li>
55 |                     Safari, Chrome, and Edge (legacy and chromium) allow <kbd>Tab</kbd> key to go to the first or last radio button, depending on which direction users are navigating the DOM, until a selection is made.
56 |                   </li>
57 |                 </ul>
58 |               </div>
59 |             </details>
60 |           </div>
61 |         </div>
62 |       </div>
63 | 
64 |       <div class="test">
65 |         <h2>Radio button group with an initially checked radio</h2>
66 |         <div class="test__case">
67 |           <label>
68 |             <input type="radio" checked="" name="a">
69 |             option 1
70 |           </label>
71 |           <label>
72 |             <input type="radio" name="a">
73 |             option 2
74 |           </label>
75 |           <label>
76 |             <input type="radio" name="a">
77 |             option 3
78 |           </label>
79 |         </div>
80 | 
81 |         <div class="test__info">
82 |           <div class="test__info__results">
83 |             <details>
84 |               <summary>results</summary>
85 |               <div>
86 |                 All browsers treat a radio group with a pre-checked radio button as a single focus stop.
87 |               </div>
88 |             </details>
89 |           </div>
90 |         </div>
91 |       </div>
92 | 
93 | 
94 |     </div> <!-- /#app -->
95 | 
96 |     <script src="../-assets/shared.js"></script>
97 |   </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------
/html-inputs/input-range.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Input type=range</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1>Testing <code>input type=range</code></h1>
16 |         <div class="dates">
17 |           <p>
18 |             Published: <span>September 15, 2019</span>
19 |           </p>
20 |           <!-- <p>Last Updated: <span>...</span></p> -->
21 |         </div>
22 |       </header>
23 | 
24 |       <div class="test">
25 |         <h2>No accessible name provided by author</h2>
26 |         <div class="test__case">
27 |           <input type="range" min="0" max="100" step="10">
28 |         </div>
29 |         <div class="test__info">
30 |           <div class="test__info__results">
31 |             <!-- <details>
32 |               <summary>results</summary>
33 |               <div>
34 |               </div>
35 |             </details> -->
36 |           </div>
37 |         </div>
38 |       </div>
39 | 
40 | 
41 |       <div class="test">
42 |         <h2>Range with accessible name from label</h2>
43 |         <div class="test__case">
44 |           <label for="f">
45 |             Test label
46 |           </label>
47 |           <input type="range" min="0" max="100" step="10" id="f">
48 |         </div>
49 |         <div class="test__info">
50 |           <div class="test__info__results">
51 |             <!-- <details>
52 |               <summary>results</summary>
53 |               <div>
54 |               </div>
55 |             </details> -->
56 |           </div>
57 |         </div>
58 |       </div>
59 | 
60 | 
61 |     </div> <!-- /#app -->
62 | 
63 |     <script src="../-assets/shared.js"></script>
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/html-ins/index.html:
--------------------------------------------------------------------------------
  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">
  6 |     <title>Testing ins element</title>
  7 |     <link rel="stylesheet" href="../-assets/shared.css">
  8 |     <style>
  9 | 
 10 |     </style>
 11 |   </head>
 12 |   <body>
 13 |     <div id="app">
 14 |       <header>
 15 |         <h1><code>ins</code> element tests</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time>June 9th, 2019</time></p>
 18 |           <!-- <p>Last Updated: <time>...</time></p> -->
 19 |         </div>
 20 |       </header>
 21 | 
 22 |       <div class="test">
 23 |         <h2><code>ins</code> with no children</h2>
 24 |         <div class="test__case">
 25 |           <ins></ins>
 26 |         </div>
 27 |         <div class="test__info">
 28 |           <!-- <div class="test__info__results">
 29 |             <details>
 30 |               <summary>results</summary>
 31 |               Results here
 32 |             </details>
 33 |           </div> -->
 34 |         </div>
 35 |       </div>
 36 | 
 37 | 
 38 |       <div class="test">
 39 |         <h2><code>ins</code> with child text nodes</h2>
 40 |         <div class="test__case">
 41 |           <ins>New content</ins>
 42 |         </div>
 43 |         <div class="test__info">
 44 |           <!-- <div class="test__info__results">
 45 |             <details>
 46 |               <summary>results</summary>
 47 |               Results here
 48 |             </details>
 49 |           </div> -->
 50 |         </div>
 51 |       </div>
 52 | 
 53 | 
 54 |       <div class="test">
 55 |         <h2><code>ins</code>, within a paragraph, with child text nodes</h2>
 56 |         <div class="test__case">
 57 |           <p>This content was here, <ins>this content is new</ins></p>
 58 |         </div>
 59 |         <div class="test__info">
 60 |           <!-- <div class="test__info__results">
 61 |             <details>
 62 |               <summary>results</summary>
 63 |               Results here
 64 |             </details>
 65 |           </div> -->
 66 |         </div>
 67 |       </div>
 68 | 
 69 | 
 70 |       <div class="test">
 71 |         <h2><code>ins</code>, within a paragraph, with child text nodes and containing a link</h2>
 72 |         <div class="test__case">
 73 |           <p>This content was here, <ins>this content is new, as is this <a href="#!">link</a></ins></p>
 74 |         </div>
 75 |         <div class="test__info">
 76 |           <!-- <div class="test__info__results">
 77 |             <details>
 78 |               <summary>results</summary>
 79 |               Results here
 80 |             </details>
 81 |           </div> -->
 82 |         </div>
 83 |       </div>
 84 | 
 85 | 
 86 |       <div class="test">
 87 |         <h2><code>ins</code> containing explicit and implicit paragraphs and a link.</h2>
 88 |         <div class="test__case">
 89 |           <ins>
 90 |             <p>This paragraph is new</p>
 91 |             As is this one. And a <a href="#!">link</a>.
 92 |           </ins>
 93 |           <p>
 94 |             This content was here.
 95 |           </p>
 96 |         </div>
 97 |         <div class="test__info">
 98 |           <!-- <div class="test__info__results">
 99 |             <details>
100 |               <summary>results</summary>
101 |               Results here
102 |             </details>
103 |           </div> -->
104 |         </div>
105 |       </div>
106 | 
107 |     </div> <!-- /#app -->
108 | 
109 |     <script src="../-assets/shared.js"></script>
110 |   </body>
111 | </html>
112 | 


--------------------------------------------------------------------------------
/html-kbd/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>kbd element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>kbd</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>kbd</code></h2>
 31 |         <div class="test__case">
 32 |           <kbd>kbd</kbd>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>kbd</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <kbd title="title">kbd</kbd>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>kbd</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <kbd aria-label="ARIA label">kbd</kbd>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>kbd</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <kbd aria-label="ARIA label" title="title">kbd</kbd>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>kbd</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <kbd tabindex="0">kbd</kbd>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>kbd</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <kbd tabindex="0" title="title">kbd</kbd>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>kbd</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <kbd aria-label="ARIA label" title="title" tabindex="0">kbd</kbd>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-landmark-contentinfo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Footer / contentinfo test case</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 | 		<style>
 9 | 			body {
10 | 				background: #aaa;
11 | 			}
12 | 
13 | 			#app * {
14 | 				margin: .5em;
15 | 			}
16 | 
17 | 			#app *:not(input):not(label):not(legend):not(a):not(h2):not(h1):not(p) {
18 | 				border: 1px solid;
19 | 			}
20 | 
21 | 			#app {
22 | 				background: #fff;
23 | 				border: 1px solid #555;
24 | 			}
25 | 
26 | 			#app > footer {
27 | 				background: darkgreen;
28 | 				color: #fff;
29 | 			}
30 | 
31 | 			footer {
32 | 				background: red;
33 | 				color: #fff;
34 | 			}
35 | 		</style>
36 | 	</head>
37 | 	<body>
38 | 
39 | 		<div id="app">
40 | 			<p>
41 | 				Apologies but this test has moved to a different directory.
42 | 				<a href="../html-footer/contentinfo-landmark-tests.html">Visit the new test page here</a>.
43 | 		</div>
44 | 
45 | 	</body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/html-landmarks/header-footer-main-no-div.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Header, Main, Footer elements</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 | 	</head>
 9 | 	<body>
10 | 		<header>
11 | 			The header element
12 | 		</header>
13 | 		<main>
14 | 			The main element
15 | 		</main>
16 | 		<footer>
17 | 			The footer element
18 | 		</footer>
19 | 	</body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/html-landmarks/header-footer-main.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Header, Main, Footer elements</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 | 	</head>
 9 | 	<body>
10 | 		<div id="test">
11 | 			<header>
12 | 				The header element
13 | 			</header>
14 | 			<main>
15 | 				The main element
16 | 			</main>
17 | 			<footer>
18 | 				The footer element
19 | 			</footer>
20 | 		</div>
21 | 	</body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/html-lang/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head lang=en>
 4 | 		<meta charset="utf-8">
 5 | 		<title>language test</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 		<link rel="stylesheet" href="../-assets/shared.css">
 8 | 		<style>
 9 | 
10 | 		</style>
11 | 	</head>
12 | 	<body lang="en">
13 | 		<div id="app">
14 |       The language of this page is declared on both the <code>head</code> and <code>body</code> elements.
15 |     </div>
16 | 	</body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/html-lists/direct.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <html lang=en>
 3 | <meta charset="utf-8">
 4 | <title>testing direct list nesting</title>
 5 | 
 6 | <p>Test to see how NVDA, JAWS and VoiceOver react to a directly nested list within a list.</p>
 7 | 
 8 | <h2>control</h2>
 9 | <ul>
10 |   <li>parent item 1</li>
11 |   <li>parent item 2</li>
12 |   <li>
13 |     <ul>
14 |       <li>item 1</li>
15 |       <li>item 2</li>
16 |       <li>item 3</li>
17 |     </ul>
18 |   </li>
19 | </ul>
20 | 
21 | 
22 | <h2>test</h2>
23 | 
24 | <ul>
25 |   <li>parent item 1</li>
26 |   <li>parent item 2</li>
27 |   <ul>
28 |     <li>item 1</li>
29 |     <li>item 2</li>
30 |     <li>item 3</li>
31 |   </ul>
32 | </ul>
33 | 
34 | <details>
35 |   <summary>
36 |   Results</summary>
37 |   <p>macOS Safari + VO - test immediately announces existence of a sublist.</p>
38 |   <p>Chrome, IE11, firefox + JAWS - announces 2 item list for primary list. Announces nested list as nested.</p>
39 |   <p>NVDA - no difference between control and test examples.</p>
40 | </details>
41 | 
42 | </html>
43 | 


--------------------------------------------------------------------------------
/html-lists/empty.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Testing empty lists</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 |       li {
10 |         padding: .325em 0;
11 |       }
12 |     </style>
13 |   </head>
14 |   <body>
15 |     <div id="app">
16 |       <header>
17 |         <h1>Testing empty lists</h1>
18 |         <div class="dates">
19 |           <p>Published: <span>September 3, 2019</span></p>
20 |           <!-- <p>Last Updated: <span>x</span></p> -->
21 |         </div>
22 |       </header>
23 | 
24 |       <div class="test">
25 |         <h2><code>ul</code> and <code>ol</code> with no children</h2>
26 |         <div class="test__case">
27 |           <ul></ul>
28 |           <ol></ol>
29 |         </div>
30 |         <div class="test__info">
31 |           <div class="test__info__results">
32 | 
33 |           </div>
34 |         </div>
35 |       </div>
36 | 
37 | 
38 |       <div class="test">
39 |         <h2><code>ul</code> with empty <code>li</code> children</h2>
40 |         <div class="test__case">
41 |           <ul>
42 |             <li></li>
43 |             <li></li>
44 |           </ul>
45 |         </div>
46 |         <div class="test__info">
47 | 
48 |         </div>
49 |       </div>
50 | 
51 |       <div class="test">
52 |         <h2><code>ol</code> with empty <code>li</code> children</h2>
53 |         <div class="test__case">
54 |           <ol>
55 |             <li></li>
56 |             <li></li>
57 |           </ol>
58 |         </div>
59 |         <div class="test__info">
60 | 
61 |         </div>
62 |       </div>
63 | 
64 |       <div class="test">
65 |         <h2><code>ul</code> with empty <code>li</code> children and no list markers</h2>
66 |         <div class="test__case">
67 |           <ul style="list-style: none">
68 |             <li></li>
69 |             <li></li>
70 |           </ul>
71 |         </div>
72 |         <div class="test__info">
73 | 
74 |         </div>
75 |       </div>
76 | 
77 |       <div class="test">
78 |         <h2><code>ol</code> with empty <code>li</code> children and no list markers</h2>
79 |         <div class="test__case">
80 |           <ol style="list-style: none">
81 |             <li></li>
82 |             <li></li>
83 |           </ol>
84 |         </div>
85 |         <div class="test__info">
86 | 
87 |         </div>
88 |       </div>
89 | 
90 | 
91 | 
92 | 
93 |     </div> <!-- /#app -->
94 | 
95 |     <script src="../-assets/shared.js"></script>
96 |   </body>
97 | </html>
98 | 


--------------------------------------------------------------------------------
/html-menu/menu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Testing menu element</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 | 
11 |       <div class="test">
12 |         <h2>Example from HTML specification</h2>
13 |         <div class="test__case">
14 |           <menu>
15 |             <li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
16 |             <li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
17 |             <li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
18 |           </menu>
19 |         </div>
20 | 
21 |     </div> <!-- /#app -->
22 | 
23 |     <script>
24 |       var copy = function () {
25 |         alert('i copied something')
26 |       }
27 |       var cut = function () {
28 |         alert('something was done cut!')
29 |       }
30 |       var paste = function () {
31 |         alert('Clearly none of these functions actually do anything...')
32 |       }
33 |     </script>
34 |     <script src="../-assets/shared.js"></script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/html-meter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Testing meter element</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 | 
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app">
14 |       <header>
15 |         <h1><code>meter</code> element tests</h1>
16 |         <div class="dates">
17 |           <p>Published: <time>June 9th, 2019</time></p>
18 |           <!-- <p>Last Updated: <time>...</time></p> -->
19 |         </div>
20 |       </header>
21 | 
22 | 
23 |       <div class="test">
24 |         <h2>Meter with nested text</h2>
25 |         <div class="test__case">
26 |           <meter min="0" max="10" value="2">Moderate activity</meter>
27 |         </div>
28 |         <div class="test__info"></div>
29 |       </div>
30 | 
31 | 
32 |       <div class="test">
33 |         <h2>Meter with title attr</h2>
34 |         <div class="test__case">
35 |           <meter min="0" max="10" value="2" title="centimeters"></meter>
36 |         </div>
37 |         <div class="test__info"></div>
38 |       </div>
39 | 
40 | 
41 |       <div class="test">
42 |         <h2>Meter with title attr and nested content</h2>
43 |         <div class="test__case">
44 |           <meter min="0" max="10" value="2" title="centimeters">2cm</meter>
45 |         </div>
46 |         <div class="test__info"></div>
47 |       </div>
48 | 
49 | 
50 |       <div class="test">
51 |         <h2><code>meter</code> within <code>label</code> element</h2>
52 |         <div class="test__case">
53 |           <label>
54 |             Test
55 |             <meter min="0" max="10" value="2"></meter>
56 |           </label>
57 |         </div>
58 |         <div class="test__info"></div>
59 |       </div>
60 | 
61 | 
62 |       <div class="test">
63 |         <h2><code>meter</code> with <code>label [for]</code> element</h2>
64 |         <div class="test__case">
65 |           <label for="m">
66 |             Test
67 |           </label>
68 |           <meter min="0" max="10" value="2" id="m"></meter>
69 |         </div>
70 |         <div class="test__info"></div>
71 |       </div>
72 | 
73 | 
74 |       <div class="test">
75 |         <h2><code>meter</code> with aria-label attr</h2>
76 |         <div class="test__case">
77 |           <meter min="0" max="10" value="2" aria-label="centimeters">2cm</meter>
78 |         </div>
79 |         <div class="test__info"></div>
80 |       </div>
81 | 
82 |     </div> <!-- /#app -->
83 |     <script src="../-assets/shared.js"></script>
84 |   </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/html-output/reduced-test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Testing output: basic patterns to test</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |   </head>
 9 |   <body>
10 |     <div id="app">
11 |       <header>
12 |         <h1>
13 |           <code>output</code> element test cases
14 |         </h1>
15 |         <div class="dates">
16 |           <p>Published: <time>July 4, 2019</time></p>
17 | 
18 |           <p>Note that <b>Firefox</b> MSAA accRole="output", IA2 role="section". While <b>Chrome</b> MSAA and IA2 report as "status bar".</p>
19 |           <p>Per <a href="https://w3c.github.io/html-aam/#el-output">HTML AAM</a>, <code>output</code> should map to <a href="https://www.w3.org/TR/wai-aria-1.1/#status">ARIA's <code>role=status</code></a>.
20 |         </div>
21 |       </header>
22 | 
23 |       <div class="test">
24 |         <h2>Inject content into empty output</h2>
25 |         <div class="test__case">
26 | <button onClick="update()">Update 1</button>
27 | <output id="aa"></output>
28 | <script>
29 |   var output = document.getElementById('aa');
30 | 
31 |   var update = function () {
32 |     output.innerHTML = "Injected content <a href='#'>with a link</a>.";
33 |   }
34 | </script>
35 |         </div>
36 |         <div class="test__info"></div>
37 |       </div>
38 | 
39 | 
40 |       <div class="test">
41 |         <h2>Inject content into labelled empty output</h2>
42 |         <div class="test__case">
43 | <button onClick="update()">Update 2</button>
44 | <label for="bb">Result:</label> <output id="bb"></output>
45 | <script>
46 |   var output = document.getElementById('bb');
47 | 
48 |   var update = function () {
49 |     output.innerHTML = "Injected content.";
50 |   }
51 | </script>
52 |         </div>
53 |         <div class="test__info"></div>
54 |       </div>
55 | 
56 | 
57 |       <div class="test">
58 |         <h2>Inject content into labelled (by aria-label) empty output</h2>
59 |         <div class="test__case">
60 | <button onClick="update()">Update 3</button>
61 | <output aria-label="ARIA labelled" id="cc"></output>
62 | <script>
63 |   var output = document.getElementById('cc');
64 | 
65 |   var update = function () {
66 |     output.innerHTML = "Injected content.";
67 |   }
68 | </script>
69 |         </div>
70 |         <div class="test__info"></div>
71 |       </div>
72 | 
73 |       <script src="../-assets/shared.js"></script>
74 |     </div>
75 |   </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/html-output/toastput.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Testing output: basis for a "toast" component</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link rel="stylesheet" href="../-assets/shared.css">
  8 |     <style>
  9 |       details li {
 10 |         margin-top: .325em;
 11 |       }
 12 |       li.change-at {
 13 |         margin-top: 1em;
 14 |       }
 15 |     </style>
 16 |   </head>
 17 |   <body>
 18 |     <div id="app">
 19 |       <header>
 20 |         <h1>
 21 |           <code>output</code> used to construct a "toast" component
 22 |         </h1>
 23 |         <div class="dates">
 24 |           <p>Published: <time datetime="2019-07-05">July 5, 2019</time></p>
 25 |         </div>
 26 |         <p>
 27 |           Read <a href="https://www.scottohara.me/blog/2019/07/10/the-output-element.html">additional information about <code>output</code> and this demo</a>.
 28 |         </p>
 29 |         <p>
 30 |           Note this demo makes no accommodations for mouse hover or keyboard focus within the popup message into account for delaying the automatic dismissal.  Such functionality should be included in a more robust form of this demo.
 31 |         </p>
 32 |       </header>
 33 | 
 34 |       <div class="test">
 35 |         <h2>Activate the button, get a "toast"</h2>
 36 |         <p>Activating the "press me" button will inject content into an <code>output</code> element.  CSS and JavaScript are then used to visually reveal and dismiss the message.</p>
 37 |         <p>The dismiss button of the "toast" is not a child of the <code>output</code> element, but rather a sibling to it.  This is so that it is not part of the live announcement of the element. Activating the dismiss button will return focus to the invoking element, so keyboard focus does not become 'lost'.</p>
 38 |         <div class="test__case">
 39 | <button onclick="toasty('By the power of readily available HTML, CSS and JS, I am a popup message!', 5000)">Press Me</button>
 40 | <div class="toast">
 41 |   <output></output>
 42 |   <!-- note button is not within output as this
 43 |     should NOT be part of the live announcement. -->
 44 |   <button onclick="quickDismiss()" aria-label="Dismiss">X</button>
 45 | </div>
 46 | <style>
 47 |   .toast {
 48 |     background: #61728b;
 49 |     border: 1px solid;
 50 |     border-radius: 2px;
 51 |     bottom: .5em;
 52 |     color: #fff;
 53 |     left: 0;
 54 |     margin: auto;
 55 |     max-width: 34em;
 56 |     opacity: 0;
 57 |     padding: .75em 2em .75em .75em;
 58 |     position: fixed;
 59 |     transform: translateY(0);
 60 |     transition:
 61 |       transform .2s ease-in-out,
 62 |       opacity .2s ease-in-out;
 63 |     right: 0;
 64 |   }
 65 | 
 66 |   .toast p {
 67 |     margin: 0;
 68 |   }
 69 | 
 70 |   .toast.popped {
 71 |     opacity: 1;
 72 |     transform: translateY(-4em);
 73 |   }
 74 | 
 75 |   .toast button {
 76 |     border: 0;
 77 |     border-left: 1px solid #fff;
 78 |     color: #fff;
 79 |     background: none;
 80 |     position: absolute;
 81 |     right: 0;
 82 |     top: 0;
 83 |     bottom: 0;
 84 |     margin: auto;
 85 |     z-index: 5;
 86 |   }
 87 |   .toast button:hover,
 88 |   .toast button:focus {
 89 |     background: #000;
 90 |   }
 91 | </style>
 92 | <script>
 93 |   // quick n' simple proof of concept JS
 94 |   var toastWrapper = document.querySelector('.toast');
 95 |   var toast = toastWrapper.querySelector('output');
 96 |   var timer;
 97 |   var init;
 98 | 
 99 |   var toasty = function ( string, duration ) {
100 |     if ( typeof timer === 'number' ) {
101 |       clear();
102 |     }
103 |     init = event.target;
104 |     toast.innerHTML = '<p>' + string + '</p>';
105 |     toastWrapper.classList.add('popped');
106 |     timer = setTimeout(autoDismiss, duration);
107 |   };
108 | 
109 |   var clear = function () {
110 |     window.clearTimeout(timer);
111 |   }
112 | 
113 |   var quickDismiss = function ( ) {
114 |     init.focus();
115 |     autoDismiss();
116 |   };
117 | 
118 |   var autoDismiss = function () {
119 |     toastWrapper.classList.remove('popped');
120 | 
121 |     timer = setTimeout(function () {
122 |       toast.innerHTML = ' ';
123 |       timer = undefined;
124 |     }, 1000);
125 |   }
126 | </script>
127 |         </div>
128 |         <div class="test__info"></div>
129 |       </div>
130 | 
131 |       <script src="../-assets/shared.js"></script>
132 |     </div>
133 |   </body>
134 | </html>
135 | 


--------------------------------------------------------------------------------
/html-progress/auto-update-named.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Testing an auto-updated progress</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 |       .mt {
10 |         margin-top: .5em;
11 |       }
12 |       label + progress {
13 |         margin-left: .5em;
14 |       }
15 |       details li {
16 |         margin-top: .325em;
17 |       }
18 |       li.change-at {
19 |         margin-top: 1em;
20 |       }
21 |     </style>
22 |   </head>
23 |   <body>
24 |     <div id="app">
25 |       <header>
26 |         <h1>
27 |           Auto updating a named <code>progress</code> element
28 |         </h1>
29 |         <div class="dates">
30 |           <p>Published: <span>July 3, 2019</span></p>
31 |           <!-- <p>Last Updated: <span>X, 2019</span></p> -->
32 |         </div>
33 |       </header>
34 | 
35 | 
36 |       <div class="test">
37 |         <h2>Updated by 10% increments until complete, name provided by <code>aria-label</code></h2>
38 |         <div class="test__case">
39 |           <div class="mt">
40 |             <progress id="p1" aria-label="ARIA label" value="0" max="100">0%</progress>
41 |           </div>
42 |           <script>
43 |             var progress = document.getElementById('p1');
44 |             var updating = setInterval( function() {
45 |                 progress.value += 10;
46 |                 progress.textContent = progress.value + '%';
47 |                 if ( progress.value >= 100 ) {
48 |                   clearInterval(updating);
49 |                 }
50 |             }, 1000);
51 |           </script>
52 |         </div>
53 |         <div class="test__info">
54 |           <div class="test__info__results">
55 |             <details>
56 |               <summary>results</summary>
57 |               <div>
58 |                 <p>Note: <abbr>VC</abbr> is short for "virtual cursor".</p>
59 |                 <ul>
60 |                   <li><b>macOS 10.14.5 VoiceOver with Safari 12.1.1:</b><br> When focused with VC, accessible name, role and current value announced. No live announcements made.</li>
61 |                   <li><b>macOS 10.14.5 VoiceOver with Chrome 75:</b><br> When focused with VC, accessible name, role and current value announced. No live announcements made.</li>
62 | 
63 |                   <li class="change-at"><b>JAWS 2019 (august) with IE11:</b><br> ??? .</li>
64 |                   <li>JAWS 2019 (august) with Edge 77 dev:</b><br> ??? .</li>
65 |                   <li>JAWS 2019 (august) with Chrome 75:</b><br> ??? .</li>
66 |                   <li>JAWS 2019 (august) with Firefox 67.0.4:</b><br> ?? .</li>
67 | 
68 |                   <li>NVDA 2019.1.1 with IE11: ??? .</li>
69 |                   <li>NVDA 2019.1.1 with Edge 76 dev: ??? .</li>
70 |                   <li>NVDA 2019.1.1 with Chrome 75: ??? .</li>
71 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: ??? .</li>
72 | 
73 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: ?? .</li>
74 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: ?? .</li>
75 |                   <li>iOS 12.3.1 VoiceOver with Safari: ?? .</li>
76 |                 </ul>
77 |               </div>
78 |             </details>
79 |           </div>
80 |         </div>
81 |       </div>
82 | 
83 |       <script src="../-assets/shared.js"></script>
84 |     </div>
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/html-progress/auto-update-unnamed.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Testing an auto-updated progress</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |     <style>
 9 |       .mt {
10 |         margin-top: .5em;
11 |       }
12 |       label + progress {
13 |         margin-left: .5em;
14 |       }
15 |       details li {
16 |         margin-top: .325em;
17 |       }
18 |       li.change-at {
19 |         margin-top: 1em;
20 |       }
21 |     </style>
22 |   </head>
23 |   <body>
24 |     <div id="app">
25 |       <header>
26 |         <h1>
27 |           Auto updating an unnamed <code>progress</code> element
28 |         </h1>
29 |         <div class="dates">
30 |           <p>Published: <span>July 3, 2019</span></p>
31 |           <!-- <p>Last Updated: <span>X, 2019</span></p> -->
32 |         </div>
33 |       </header>
34 | 
35 | 
36 |       <div class="test">
37 |         <h2>Updated by 10% increments until complete</h2>
38 |         <div class="test__case">
39 |           <div class="mt">
40 |             <progress id="p1" value="0" max="100">0%</progress>
41 |           </div>
42 |           <script>
43 |             var progress = document.getElementById('p1');
44 |             var updating = setInterval( function() {
45 |                 progress.value += 10;
46 |                 progress.textContent = progress.value + '%';
47 |                 if ( progress.value >= 100 ) {
48 |                   clearInterval(updating);
49 |                 }
50 |             }, 1000);
51 |           </script>
52 |         </div>
53 |         <div class="test__info">
54 |           <div class="test__info__results">
55 |             <details>
56 |               <summary>results</summary>
57 |               <div>
58 |                 <p>Expectation: should announce flattened text string.</p>
59 |                 <ul>
60 |                   <li>macOS 10.14.5 VoiceOver with Safari 12.1.1: When focused with VC, role and current value announced. No live announcements made.</li>
61 |                   <li>macOS 10.14.5 VoiceOver with Chrome 75: When focused with VC, role and current value announced. No live announcements made.</li>
62 | 
63 |                   <li>JAWS 2019 (august) with IE11: ??? .</li>
64 |                   <li>JAWS 2019 (august) with Edge 78 dev: ??? .</li>
65 |                   <li>JAWS 2019 (august) with Chrome 75: ??? .</li>
66 |                   <li>JAWS 2019 (august) with Firefox 67.0.3: ?? .</li>
67 | 
68 |                   <li>NVDA 2019.1.1 with IE11: ??? .</li>
69 |                   <li>NVDA 2019.1.1 with Edge 76 dev: ??? .</li>
70 |                   <li>NVDA 2019.1.1 with Chrome 75: ??? .</li>
71 |                   <li>NVDA 2019.1.1 with Firefox 67.0.3: ??? .</li>
72 | 
73 |                   <li>Android 8.1 TalkBack 7.3 with Firefox 67.0.3: ?? .</li>
74 |                   <li>Android 8.1 TalkBack 7.3 with Chrome 75: ?? .</li>
75 |                   <li>iOS 12.3.1 VoiceOver with Safari: ?? .</li>
76 |                 </ul>
77 |               </div>
78 |             </details>
79 |           </div>
80 |         </div>
81 |       </div>
82 | 
83 |       <script src="../-assets/shared.js"></script>
84 |     </div>
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/html-ruby/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Paragraph element tests</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 		<link rel="stylesheet" href="../-assets/shared.css">
 8 | 		<style>
 9 | 
10 | 		</style>
11 | 	</head>
12 | 	<body>
13 | 		<div id="app">
14 |       <header>
15 |         <h1>Testing the <code>ruby</code> and related elements</h1>
16 |         <div class="dates">
17 |           <p>Published: <span>September 22, 2019</span></p>
18 |         </div>
19 |       </header>
20 | 
21 | 
22 | 			<div class="test">
23 | 				<h2><code>ruby</code> containing <code>rb</code>, <code>rt</code> and <code>rtc</code> elements</h2>
24 |         <p>
25 |           <a href="https://www.w3.org/TR/html52/textlevel-semantics.html#example-2db60dff">Example taken from HTML 5.2</a>.
26 |         </p>
27 | 				<div class="test__case">
28 | 					<ruby>
29 |             <rb>旧</rb><rb>金</rb><rb>山</rb>
30 |             <rt>jiù</rt><rt>jīn</rt><rt>shān</rt>
31 |             <rtc>San Francisco</rtc>
32 |             </ruby>
33 | 				</div>
34 | 				<div class="test__info">
35 |           <div class="test__info__results">
36 |           </div>
37 |         </div>
38 | 			</div>
39 | 
40 | 
41 | 
42 | 
43 | 		</div> <!-- /#app -->
44 | 
45 |     <script src="../-assets/shared.js"></script>
46 | 
47 | 	</body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/html-s/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>s element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>s</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>s</code></h2>
 31 |         <div class="test__case">
 32 |           <s>strike</s>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>s</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <s title="title">strike</s>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>s</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <s aria-label="ARIA label">strike</s>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>s</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <s aria-label="ARIA label" title="title">strike</s>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>s</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <s tabindex="0">strike</s>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>s</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <s tabindex="0" title="title">strike</s>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>s</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <s aria-label="ARIA label" title="title" tabindex="0">strike</s>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-samp/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>samp element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>samp</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>samp</code></h2>
 31 |         <div class="test__case">
 32 |           <samp>samp</samp>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>samp</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <samp title="title">samp</samp>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>samp</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <samp aria-label="ARIA label">samp</samp>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>samp</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <samp aria-label="ARIA label" title="title">samp</samp>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>samp</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <samp tabindex="0">samp</samp>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>samp</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <samp tabindex="0" title="title">samp</samp>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>samp</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <samp aria-label="ARIA label" title="title" tabindex="0">samp</samp>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-select/label-value-attrs.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>select/option element test</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 		<link rel="stylesheet" href="../-assets/shared.css">
 8 | 		<style>
 9 |       blockquote {
10 |         border-left: 4px solid;
11 |         margin-left: 0;
12 |         padding: .5em .5em .5em 1em;
13 |       }
14 | 		</style>
15 | 	</head>
16 | 	<body>
17 | 		<div id="app">
18 |       <header>
19 |         <h1>Testing labeling <code>option</code> elements</h1>
20 |         <div class="dates">
21 |           <p>Published: <span>August 6, 2019</span></p>
22 |         </div>
23 |         <p>
24 |           <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element">option element</a>.
25 |         </p>
26 |       </header>
27 | 
28 | 
29 |       <div class="test">
30 |         <h2><code>select</code> with child <code>option</code>s</h2>
31 |         <div class="test__case">
32 | <select>
33 |   <option>text label</option>
34 |   <option label="option 2" value="opt2 value"></option>
35 |   <option>text label</option>
36 | </select>
37 | 
38 | <select multiple>
39 |   <option>text label</option>
40 |   <option label="option 2" value="opt2 value"></option>
41 |   <option>text label</option>
42 | </select>
43 |         </div>
44 |         <div class="test__info">
45 |           <div class="test__info__results">
46 |             <details open>
47 |               <summary>results</summary>
48 |               <div>
49 |                 <p>The <code>label</code> attribute should provide user visible text for an <code>option</code>, specifically if following the first line of the HTML Living Standard's Content Model for the element:</p>
50 |                 <blockquote>
51 |                   <p>If the element has a label attribute and a value attribute: Nothing</p>
52 |                 </blockquote>
53 |                 <p>e.g., there is no expected subtree content for the <code>option</code> element because the value and label are provided by the element's attributes.</p>
54 |                 <p>
55 |                   However, a visible text label fails to load with:
56 |                 </p>
57 |                 <ul>
58 |                   <li>Firefox 68.0.1 on macOS and Windows</li>
59 |                   <li>iOS Safari 12.3.1</li>
60 |                 </ul>
61 |                 <p>
62 |                   Testing with IE11, Edge (pre and post chromium), Chrome (mac, Android and PC), Firefox Android, and Safari on macOS, all options render with a visible label.
63 |                 </p>
64 |               </div>
65 |             </details>
66 |           </div>
67 |         </div>
68 |       </div>
69 | 
70 | 		</div> <!-- /#app -->
71 | 
72 |     <script src="../-assets/shared.js"></script>
73 | 
74 | 	</body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/html-small/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>small element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>small</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>small</code></h2>
 31 |         <div class="test__case">
 32 |           <small>small</small>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>small</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <small title="title">small</small>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>small</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <small aria-label="ARIA label">small</small>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>small</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <small aria-label="ARIA label" title="title">small</small>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>small</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <small tabindex="0">small</small>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>small</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <small tabindex="0" title="title">small</small>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>small</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <small aria-label="ARIA label" title="title" tabindex="0">small</small>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-strong/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>strong element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>strong</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>strong</code></h2>
 31 |         <div class="test__case">
 32 |           <strong>Strong</strong>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>strong</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <strong title="title">Strong</strong>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>strong</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <strong aria-label="ARIA label">Strong</strong>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>strong</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <strong aria-label="ARIA label" title="title">Strong</strong>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>strong</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <strong tabindex="0">Strong</strong>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>strong</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <strong tabindex="0" title="title">Strong</strong>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>strong</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <strong aria-label="ARIA label" title="title" tabindex="0">Strong</strong>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-tables/empty-cells.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>table elements tests</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 		<link rel="stylesheet" href="../-assets/shared.css">
 8 | 		<style>
 9 |       .test__case table {
10 |         border: 1px solid;
11 |         border-spacing: 0;
12 |         width: 100%;
13 |         text-align: left;
14 |       }
15 |       .test__case tr > *:not(:last-child) {
16 |         border-right: 1px solid;
17 |       }
18 |       .test__case thead *,
19 |       .test__case tbody tr:not(:last-of-type) * {
20 |         border-bottom: 1px solid;
21 |       }
22 |       .test__case th,
23 |       .test__case td {
24 |         padding: .625em;
25 |       }
26 | 		</style>
27 | 	</head>
28 | 	<body>
29 | 		<div id="app">
30 |       <header>
31 |         <h1>Testing table element</h1>
32 |         <div class="dates">
33 |           <p>Published: <span>August 13, 2019</span></p>
34 |         </div>
35 |       </header>
36 | 
37 | 
38 | 			<div class="test">
39 |         <h2>Table with caption, some cells are empty.</h2>
40 |         <div class="test__case">
41 |           <table>
42 |             <caption>Food stuffs</caption>
43 |             <thead>
44 |               <tr>
45 |                 <th></th>
46 |                 <th>Vegetable</th>
47 |                 <th>Fruit</th>
48 |               </tr>
49 |             </thead>
50 |             <tbody>
51 |               <tr>
52 |                 <th scope="row">Sammy</th>
53 |                 <td>Carrots</td>
54 |                 <td>Apples</td>
55 |               </tr>
56 |               <tr>
57 |                 <th scope="row">Tammy</th>
58 |                 <td>Red pepper</td>
59 |                 <td></td>
60 |               </tr>
61 |               <tr>
62 |                 <th scope="row">
63 |                   Jammy
64 |                 </th>
65 |                 <td></td>
66 |                 <td>
67 |                   Grapes
68 |                 </td>
69 |               </tr>
70 |             </tbody>
71 |           </table>
72 |         </div>
73 |         <div class="test__info">
74 |           <div class="test__info__results">
75 |           </div>
76 |         </div>
77 |       </div>
78 | 
79 | 
80 | 
81 | 
82 | 		</div> <!-- /#app -->
83 | 
84 |     <script src="../-assets/shared.js"></script>
85 | 
86 | 	</body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/html-title/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Tests to update the title element</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" href="../-assets/shared.css">
 8 |   </head>
 9 |   <body>
10 |     <div id="app">
11 |       <header>
12 |         <h1>
13 |           Updating the document's <code>title</code> element
14 |         </h1>
15 |         <div class="dates">
16 |           <p>Published: <time>June 5th, 2019</time></p>
17 |           <p>Last Updated: <time>June 9th, 2019</time></p>
18 |         </div>
19 |       </header>
20 | 
21 |       <div class="test">
22 |         <h2>Update the title by updating its `textContent`.</h2>
23 |         <div class="test__case">
24 |           <button onclick="update1()">
25 |             Update to "Test 1 update"
26 |           </button>
27 |           <script>
28 |             var title = document.getElementsByTagName('title')[0];
29 |             var update1 = function () {
30 |               title.textContent = 'Test 1 update'
31 |             }
32 |           </script>
33 |         </div>
34 |         <div class="test__info"></div>
35 |       </div>
36 | 
37 |       <div class="test">
38 |         <h2>Update the title by updating with `document.title`.</h2>
39 |         <div class="test__case">
40 |           <button onclick="update2()">
41 |             Update to "Test 2 update"
42 |           </button>
43 |           <script>
44 |             var update2 = function () {
45 |               document.title = 'Test 2 update'
46 |             }
47 |           </script>
48 |         </div>
49 |         <div class="test__info"></div>
50 |       </div>
51 | 
52 |     </div> <!-- /#app -->
53 |     <script src="../-assets/shared.js"></script>
54 |   </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/html-u/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>u element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <a href="https://html.spec.whatwg.org/#the-u-element"><code>u</code></a> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>u</code></h2>
 31 |         <div class="test__case">
 32 |           <u>u</u>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>u</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <u title="title">u</u>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>u</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <u aria-label="ARIA label">u</u>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>u</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <u aria-label="ARIA label" title="title">u</u>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>u</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <u tabindex="0">u</u>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>u</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <u tabindex="0" title="title">u</u>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>u</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <u aria-label="ARIA label" title="title" tabindex="0">u</u>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/html-var/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>var element tests</title>
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<link rel="stylesheet" href="../-assets/shared.css">
  8 | 		<style>
  9 | 
 10 | 		</style>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div id="app">
 14 |       <header>
 15 |         <h1>Testing the <code>var</code> element</h1>
 16 |         <div class="dates">
 17 |           <p>Published: <time datetime="2019-07-27">July 27, 2019</time></p>
 18 |         </div>
 19 |       </header>
 20 | 
 21 | 
 22 | 			<!--
 23 | 				For aria-labelledby/describedby tests
 24 | 			-->
 25 | 			<div hidden id="by">ARIA labelled by</div>
 26 | 			<div hidden id="desc">Description</div>
 27 | 
 28 | 
 29 | 			<div class="test">
 30 |         <h2><code>var</code></h2>
 31 |         <div class="test__case">
 32 |           <var>var</var>
 33 |         </div>
 34 |         <div class="test__info">
 35 |           <div class="test__info__results">
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 | 
 40 | 
 41 |       <div class="test">
 42 |         <h2><code>var</code> with <code>title</code></h2>
 43 |         <div class="test__case">
 44 |           <var title="title">var</var>
 45 |         </div>
 46 |         <div class="test__info">
 47 |           <div class="test__info__results">
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="test">
 53 |         <h2><code>var</code> with <code>aria-label</code></h2>
 54 |         <div class="test__case">
 55 |           <var aria-label="ARIA label">var</var>
 56 |         </div>
 57 |         <div class="test__info">
 58 |           <div class="test__info__results">
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       <div class="test">
 64 |         <h2><code>var</code> with <code>aria-label</code> and <code>title</code></h2>
 65 |         <div class="test__case">
 66 |           <var aria-label="ARIA label" title="title">var</var>
 67 |         </div>
 68 |         <div class="test__info">
 69 |           <div class="test__info__results">
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 | 
 74 | 
 75 |       <div class="test">
 76 |         <h2><code>var</code> with <code>tabindex=0</code></h2>
 77 |         <div class="test__case">
 78 |           <var tabindex="0">var</var>
 79 |         </div>
 80 |         <div class="test__info">
 81 |           <div class="test__info__results">
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 | 
 86 | 
 87 |       <div class="test">
 88 |         <h2><code>var</code> with <code>tabindex=0</code> and <code>title</code></h2>
 89 |         <div class="test__case">
 90 |           <var tabindex="0" title="title">var</var>
 91 |         </div>
 92 |         <div class="test__info">
 93 |           <div class="test__info__results">
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 | 
 98 | 
 99 |       <div class="test">
100 |         <h2><code>var</code> with <code>tabindex=0</code>, <code>aria-label</code> and <code>title</code></h2>
101 |         <div class="test__case">
102 |           <var aria-label="ARIA label" title="title" tabindex="0">var</var>
103 |         </div>
104 |         <div class="test__info">
105 |           <div class="test__info__results">
106 |           </div>
107 |         </div>
108 |       </div>
109 | 
110 | 		</div> <!-- /#app -->
111 | 
112 |     <script src="../-assets/shared.js"></script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------