1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175<!--
Note page content.
Demo Step 7:
Click issue "WCAG 2.2 AA" Tag Link
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Link with no accessible text - Issue Details</title>
</head>
<body>
<header>
<nav aria-label="Main">
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Logs</a></li>
<li><a href="#">Account</a></li>
</ul>
</nav>
</header>
<main>
<h1>"Link with no accessible text" - Issue Details</h1>
<nav aria-label="Secondary">
<button>Watch Issue</button>
<a href="#"">Issue Documentation (External Link)</a> </nav>
<section>
<h2>Issue Overview</h2>
<ul>
<li>Active Nodes: 0</li>
<li>Equalified Nodes: 0</li>
<li>Ignored Nodes: 1</li>
</ul>
</section>
<section>
<h2>Related Tags</h2>
<ul>
<li><a href="#">WCAG 2.2 AAA</a></li>
<li><a href="8-tag_details.html">WCAG 2.2 AA</a></li>
<li><a href="#">WCAG 2.2 A</a></li>
<li><a href="#">WCAG 2.1 AAA</a></li>
<li><a href="#">WCAG 2.1 AA</a></li>
<li><a href="#">WCAG 2.1 A</a></li>
<li><a href="#">HTML Link Elements</a></li>
</ul>
</section>
<section>
<h2>Nodes with Issue</h2>
<h3>Bulk Actions</h3>
<form>
<fieldset>
<legend>Filter to Show Nodes</legend>
<label>
<input type="checkbox" checked> With Active Status
</label>
<label>
<input type="checkbox" checked> With Ignored Status
</label>
<label>
<input type="checkbox" checked> With Equalified Status
</label>
</fieldset>
<fieldset>
<legend>Sort By</legend>
<label>
<input type="radio" name="sort" checked> Node Name (A-Z)
</label>
<label>
<input type="radio" name="sort"> Node Name (Z-A)
</label>
<label>
<input type="radio" name="sort"> Date Updated (Newest to Oldest)
</label>
<label>
<input type="radio" name="sort"> Date Updated (Oldest to Newest)
</label>
</fieldset>
</form>
<form>
<label>
Search: <input type="text" id="search-input">
</label>
<button type="submit" id="submit-bulk-actions" disabled>Submit</button>
</form>
<div id="edit-options" style="display: none;">
<h3>Options</h3>
<button>AI Analyze</button>
</div>
<h3>Nodes Table</h3>
<table>
<thead>
<tr>
<th>
<input type="checkbox" aria-label="Select all nodes" onclick="toggleAllTableCheckboxes(this)">
</th>
<th>Node</th>
<th>Screenshot</th>
<th>Status</th>
<th>Added</th>
<th>Updated</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="row-checkbox" onchange="toggleEditOptions()"></td>
<td><a href="#">Node 4234</a></td>
<td><img src="image.jpg" alt="Screenshot of Node 4234"></td>
<td>Ignored</td>
<td>12-2-2024</td>
<td>12-2-2024</td>
<td></td>
</tr>
</tbody>
</table>
<nav aria-label="Nodes Table">
Showing 1 of 1 Nodes <button disabled>Load More Nodes</button>
</nav>
</section>
<section>
<h2>Related Logs</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Message</th>
<th>Trigger</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">24</a></td>
<td>Scan successful. 1 node equalified and 2 new nodes. 2 new issues.</td>
<td>User: Blake</td>
</tr>
</tbody>
</table>
<nav aria-label="Logs Table">
Showing 1 of 1 Logs <button disabled>Load More Logs</button>
</nav>
</section>
</main>
<footer>
<section>
<h2>Scan Quota</h2>
<p>0 free scans remaining. <a href="#">Upgrade</a>.</p>
</section>
<section>
<h2>Need help?</h2>
<p>Email <a href="#">support@equalify.app</a>.</p>
</section>
</footer>
<script src="script.js"></script>
</body>
</html>