forked from tmobile/magentaA11y
-
Notifications
You must be signed in to change notification settings - Fork 0
/
defect-reporter.html
128 lines (120 loc) · 4.59 KB
/
defect-reporter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
---
permalink: /defect-reporter.html
title: Defect reporter
layout: default
---
<div class="container">
<h1 class="h-alpha">Defect reporter</h1>
<p>Use this tool to generate a markdown or CSV defect report</p>
<div class="success-criteria-maker">
<div class="checklist-container">
<form>
<details class="checklist-details" open>
<summary id="description">
Description
</summary>
<ul role="group" aria-labelledby="description">
<li class="input-text-item">
<label for="uri">URI</label>
<input type="text" id="uri">
</li>
<li class="input-text-item">
<label for="screenshot">Screenshot</label>
<input type="text" id="screenshot">
</li>
<li class="input-textarea-item">
<label for="whats-wrong">What's wrong</label>
<textarea id="whats-wrong"></textarea>
</li>
<li class="input-textarea-item">
<label for="problem">Why it's a problem</label>
<textarea id="problem"></textarea>
</li>
<li class="input-textarea-item">
<label for="fix">How to fix it</label>
<textarea id="fix"></textarea>
</li>
</ul>
</details>
<h2 class="h-bravo">Reproduce with</h2>
<details class="checklist-details" open>
<summary id="platform">Platform</summary>
<ul role="group" aria-labelledby="platform">
<li class="input-checkbox-item">
<input type="checkbox" id="ios" name="screenreader">
<label for="ios">iOS</label>
</li>
<li class="input-checkbox-item">
<input type="checkbox" id="android" name="screenreader">
<label for="android">Android</label>
</li>
<li class="input-checkbox-item">
<input type="checkbox" id="windows" name="screenreader">
<label for="windows">Windows</label>
</li>
<li class="input-checkbox-item">
<input type="checkbox" id="macos" name="screenreader">
<label for="macos">MacOS</label>
</li>
</ul>
</details>
<details class="checklist-details" open>
<summary id="assistive-technology">Assistive technology</summary>
<ul role="group" aria-labelledby="assistive-technology">
<li class="input-checkbox-item">
<input type="checkbox" id="keyboard" name="screenreader">
<label for="keyboard">Keyboard</label>
</li>
<li class="input-checkbox-item">
<input type="checkbox" id="voiceover" name="screenreader">
<label for="voiceover">Voiceover</label>
</li>
<li class="input-checkbox-item">
<input type="checkbox" id="nvda" name="screenreader">
<label for="nvda">NVDA</label>
</li>
<li class="input-checkbox-item">
<input type="checkbox" id="jaws" name="screenreader">
<label for="jaws">JAWS</label>
</li>
</ul>
</details>
<h2 class="h-bravo">Validation test</h2>
{% assign ordered_pages = site.checklist-web | sort: "title" | sort: "order" %}
{% assign categories = ordered_pages | map: 'categories' | join: ',' | split: ',' | uniq %}
{% for category in site.web-categories-order %}
<details class="checklist-details" open>
<summary id="{{ category | escape }}-category-title">
<span aria-hidden="true"><</span>{{ category | escape }}<span aria-hidden="true">></span>
</summary>
<div role="group" aria-labelledby="{{ category | escape }}-category-title">
<ul>
{% for page in ordered_pages %}
{% include checklist-loop.html %}
{% endfor %}
</ul>
</div>
</details>
{% endfor %}
</form>
</div>
<div class="criteria-container">
<label for="criteria-area" class="h-charlie">
Full defect
</label>
<div class="textarea-container">
<textarea id="criteria-area"></textarea>
<div class="textarea-controls">
<div>
<button id="copy" class="button-alpha" type="button">
Copy markdown
</button>
<button id="copy" class="button-alpha" type="button">
Copy CSV
</button>
</div>
</div>
</div>
</div>
</div>
</div>