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<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>focus-state - Check Editor - Equalify</title>
</head>
<body>
<header>
<nav aria-label="Main">
<ul>
<li><a href="10-home.html">Audits</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>focus-state</h1>
<div aria-live="polite">Check saved.</div>
<section>
<h2>Edit Check</h2>
<form>
<label for="check_name">Check Name:</label>
<input id="check_name" type="text" value="focus-state" required>
<label for="ruleset">Ruleset:</label>
<select id="ruleset" disabled>
<option>Editora11y</option>
<option>axe-core</option>
<option selected>Custom Checks</option>
</select>
<label for="check_category">Category:</label>
<select id="check_category" required>
<option>ARIA-related</option>
<option>Page Content</option>
<option>Meta Checks</option>
<option>Headings</option>
<option>Text Alternatives</option>
<option>Meaningful Links</option>
<option selected>General Quality Assurance</option>
</select>
<label for="check_code">Check Code:</label>
<textarea id="check_code" required>
const puppeteer = require('puppeteer');
(async () => {
// Launch a browser instance
const browser = await puppeteer.launch({ headless: false }); // Set to `true` if you don't need to see the browser
const page = await browser.newPage();
// Navigate to your test page
// Replace with the URL or path of the page to test
await page.goto('https://example.com');
// Focus on the body to start tabbing
await page.focus('body');
// Press Tab to navigate to the first focusable element
await page.keyboard.press('Tab');
// Check the first focusable element's CSS property
const cssBefore = await page.evaluate(() => {
const focusedElement = document.activeElement;
return window.getComputedStyle(focusedElement).outline; // Check outline or another focus-specific property
});
console.log('CSS Before:', cssBefore);
// Simulate another Tab press to test CSS updates
await page.keyboard.press('Tab');
const cssAfter = await page.evaluate(() => {
const focusedElement = document.activeElement;
return window.getComputedStyle(focusedElement).outline; // Again, check the property
});
console.log('CSS After:', cssAfter);
// Compare and validate
if (cssBefore !== cssAfter) {
console.log('CSS is updated when tabbing to a new element.');
} else {
console.log('CSS is not updated when tabbing to a new element.');
}
// Close the browser
await browser.close();
})();
</textarea>
<button>Save Check</button>
</form>
<button>Delete Check</button>
</section>
<section>
<h2>Related Logs</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Summary</th>
<th>Trigger</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Log 4</a></td>
<td>"focus-state" check created.</td>
<td>User: Lucy</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>
</body>
</html>