mcp-accessibility-scanner 1.0.8 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/build/accessibilityChecker.js +339 -108
  2. package/build/index.js +924 -12
  3. package/build/server.js +0 -0
  4. package/package.json +1 -1
package/build/accessibilityChecker.js CHANGED
@@ -12,137 +12,368 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
12
12
  return (mod && mod.__esModule) ? mod : { "default": mod };
13
13
  };
14
14
  Object.defineProperty(exports, "__esModule", { value: true });
15
+ exports.AccessibilityScanner = void 0;
15
16
  exports.scanViolations = scanViolations;
16
17
  const playwright_1 = require("playwright");
17
18
  const playwright_2 = require("@axe-core/playwright");
18
19
  const node_path_1 = __importDefault(require("node:path"));
19
20
  const node_os_1 = __importDefault(require("node:os"));
20
- function scanViolations(url_1, violationsTag_1) {
21
- return __awaiter(this, arguments, void 0, function* (url, violationsTag, viewport = { width: 1920, height: 1080 }, shouldRunInHeadless = true) {
22
- var _a;
23
- const browser = yield playwright_1.chromium.launch({
24
- headless: shouldRunInHeadless,
25
- args: [
26
- "--disable-blink-features=AutomationControlled",
27
- "--disable-dev-shm-usage",
28
- "--no-sandbox",
29
- "--disable-setuid-sandbox",
30
- ],
21
+ class AccessibilityScanner {
22
+ constructor() {
23
+ this.browser = null;
24
+ this.context = null;
25
+ this.page = null;
26
+ this.defaultViewport = { width: 1920, height: 1080 };
27
+ this.userAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36";
28
+ }
29
+ initialize() {
30
+ return __awaiter(this, arguments, void 0, function* (shouldRunInHeadless = true) {
31
+ this.browser = yield playwright_1.chromium.launch({
32
+ headless: shouldRunInHeadless,
33
+ args: [
34
+ "--disable-blink-features=AutomationControlled",
35
+ "--disable-dev-shm-usage",
36
+ "--no-sandbox",
37
+ "--disable-setuid-sandbox",
38
+ ],
39
+ });
31
40
  });
32
- const context = yield browser.newContext({
33
- viewport,
34
- userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
41
+ }
42
+ createContext() {
43
+ return __awaiter(this, arguments, void 0, function* (viewport = this.defaultViewport) {
44
+ if (!this.browser) {
45
+ throw new Error("Browser not initialized. Call initialize() first.");
46
+ }
47
+ this.context = yield this.browser.newContext({
48
+ viewport,
49
+ userAgent: this.userAgent,
50
+ });
35
51
  });
36
- const page = yield context.newPage();
37
- yield page.goto(url);
38
- yield page.addStyleTag({
39
- content: `
40
- .a11y-violation {
41
- position: relative !important;
42
- outline: 4px solid #FF4444 !important;
43
- margin: 2px !important;
44
- }
45
- .violation-number {
46
- position: absolute !important;
47
- top: -12px !important;
48
- left: -12px !important;
49
- background: #FF4444;
50
- color: white !important;
51
- width: 25px;
52
- height: 25px;
53
- border-radius: 50%;
54
- display: flex !important;
55
- align-items: center;
56
- justify-content: center;
57
- font-weight: bold;
58
- font-size: 14px;
59
- z-index: 10000;
60
- }
61
- .a11y-violation-info {
62
- position: absolute !important;
63
- background: #333333 !important;
64
- color: white !important;
65
- padding: 12px !important;
66
- border-radius: 4px !important;
67
- font-size: 14px !important;
68
- max-width: 300px !important;
69
- z-index: 9999 !important;
70
- box-shadow: 0 2px 10px rgba(0,0,0,0.3);
71
- }
72
- `,
52
+ }
53
+ createPage() {
54
+ return __awaiter(this, void 0, void 0, function* () {
55
+ if (!this.context) {
56
+ throw new Error("Context not created. Call createContext() first.");
57
+ }
58
+ this.page = yield this.context.newPage();
73
59
  });
74
- const axe = new playwright_2.AxeBuilder({ page }).withTags(violationsTag);
75
- const results = yield axe.analyze();
76
- let violationCounter = 1;
77
- for (const violation of results.violations) {
78
- for (const node of violation.nodes) {
79
- try {
80
- const targetSelector = node.target[0];
81
- const selector = Array.isArray(targetSelector)
82
- ? targetSelector.join(" ")
83
- : targetSelector;
84
- yield page.evaluate(({ selector, violationData, counter }) => {
85
- const elements = document.querySelectorAll(selector);
86
- elements.forEach((element) => {
87
- // Create number badge directly on the element
88
- const numberBadge = document.createElement("div");
89
- numberBadge.className = "violation-number";
90
- numberBadge.textContent = counter.toString();
91
- // Add violation styling
92
- element.classList.add("a11y-violation");
93
- element.appendChild(numberBadge);
94
- // Create info box
95
- const listItem = document.createElement("div");
96
- listItem.style.marginBottom = "15px";
97
- listItem.innerHTML = `
98
- <div style="color: #FF4444; font-weight: bold;">
99
- Violation #${counter}: ${violationData.impact.toUpperCase()}
100
- </div>
101
- <div style="margin: 5px 0; font-size: 14px;">
102
- ${violationData.description}
103
- </div>
104
- `;
105
- // Position info box relative to element
106
- document.body.appendChild(listItem);
107
- const rect = element.getBoundingClientRect();
108
- listItem.style.left = `${rect.left + window.scrollX}px`;
109
- listItem.style.top = `${rect.bottom + window.scrollY + 10}px`;
110
- });
111
- }, {
112
- selector: selector,
113
- violationData: {
114
- impact: violation.impact,
115
- description: violation.description,
116
- },
117
- counter: violationCounter,
60
+ }
61
+ navigateToUrl(url) {
62
+ return __awaiter(this, void 0, void 0, function* () {
63
+ if (!this.page) {
64
+ throw new Error("Page not created. Call createPage() first.");
65
+ }
66
+ yield this.page.goto(url);
67
+ });
68
+ }
69
+ clickElement(selector) {
70
+ return __awaiter(this, void 0, void 0, function* () {
71
+ if (!this.page) {
72
+ throw new Error("Page not created. Call createPage() first.");
73
+ }
74
+ yield this.page.click(selector);
75
+ yield this.page.waitForLoadState('load');
76
+ });
77
+ }
78
+ typeText(selector, text) {
79
+ return __awaiter(this, void 0, void 0, function* () {
80
+ if (!this.page) {
81
+ throw new Error("Page not created. Call createPage() first.");
82
+ }
83
+ yield this.page.fill(selector, text);
84
+ yield this.page.waitForLoadState('load');
85
+ });
86
+ }
87
+ getElementByText(text, elementType) {
88
+ return __awaiter(this, void 0, void 0, function* () {
89
+ if (!this.page) {
90
+ throw new Error("Page not created. Call createPage() first.");
91
+ }
92
+ const elements = yield this.page.locator(elementType || '*', { hasText: text }).all();
93
+ if (elements.length === 0) {
94
+ return null;
95
+ }
96
+ if (elements.length === 1) {
97
+ return yield elements[0].evaluate(el => {
98
+ if (el.id)
99
+ return `#${el.id}`;
100
+ if (el.className)
101
+ return `.${el.className.split(' ')[0]}`;
102
+ return el.tagName.toLowerCase();
103
+ });
104
+ }
105
+ for (let i = 0; i < elements.length; i++) {
106
+ const element = elements[i];
107
+ const isExactMatch = yield element.evaluate((el, searchText) => {
108
+ var _a, _b;
109
+ return ((_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === searchText ||
110
+ ('innerText' in el && ((_b = el.innerText) === null || _b === void 0 ? void 0 : _b.trim()) === searchText) ||
111
+ el.value === searchText;
112
+ }, text);
113
+ if (isExactMatch) {
114
+ return yield element.evaluate(el => {
115
+ var _a;
116
+ if (el.id)
117
+ return `#${el.id}`;
118
+ if (el.className)
119
+ return `.${el.className.split(' ')[0]}`;
120
+ return `:nth-of-type(${Array.from(((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.children) || []).indexOf(el) + 1})`;
118
121
  });
119
- violationCounter++;
120
122
  }
121
- catch (error) {
122
- console.log(`Failed to highlight element: ${error}`);
123
+ }
124
+ return yield elements[0].evaluate(el => {
125
+ if (el.id)
126
+ return `#${el.id}`;
127
+ if (el.className)
128
+ return `.${el.className.split(' ')[0]}`;
129
+ return el.tagName.toLowerCase();
130
+ });
131
+ });
132
+ }
133
+ analyzePage() {
134
+ return __awaiter(this, void 0, void 0, function* () {
135
+ if (!this.page) {
136
+ throw new Error("Page not created. Call createPage() first.");
137
+ }
138
+ return yield this.page.evaluate(() => {
139
+ const getElementInfo = (el) => {
140
+ const text = (el.textContent || '').trim();
141
+ const ariaLabel = el.getAttribute('aria-label');
142
+ const title = el.getAttribute('title');
143
+ const value = el.value;
144
+ const placeholder = el.placeholder;
145
+ return text || ariaLabel || title || value || placeholder || 'No text';
146
+ };
147
+ const buttons = Array.from(document.querySelectorAll('button, [role="button"], input[type="button"], input[type="submit"]'))
148
+ .map(el => getElementInfo(el))
149
+ .filter(text => text !== 'No text');
150
+ const links = Array.from(document.querySelectorAll('a[href]'))
151
+ .map(el => getElementInfo(el))
152
+ .filter(text => text !== 'No text');
153
+ const inputs = Array.from(document.querySelectorAll('input:not([type="button"]):not([type="submit"]), textarea, select'))
154
+ .map(el => {
155
+ var _a, _b, _c;
156
+ const label = (_c = (_b = (_a = el.labels) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim();
157
+ const placeholder = el.placeholder;
158
+ const name = el.getAttribute('name');
159
+ const id = el.getAttribute('id');
160
+ return label || placeholder || name || id || 'Unnamed input';
161
+ });
162
+ return { buttons, links, inputs };
163
+ });
164
+ });
165
+ }
166
+ clickElementByText(text, elementType) {
167
+ return __awaiter(this, void 0, void 0, function* () {
168
+ if (!this.page) {
169
+ throw new Error("Page not created. Call createPage() first.");
170
+ }
171
+ const selector = yield this.getElementByText(text, elementType);
172
+ if (!selector) {
173
+ const analysis = yield this.analyzePage();
174
+ throw new Error(`Element with text "${text}" not found. Available elements:\nButtons: ${analysis.buttons.join(', ')}\nLinks: ${analysis.links.join(', ')}`);
175
+ }
176
+ yield this.page.click(selector);
177
+ yield this.page.waitForLoadState('load');
178
+ });
179
+ }
180
+ typeTextByLabel(labelText, text) {
181
+ return __awaiter(this, void 0, void 0, function* () {
182
+ if (!this.page) {
183
+ throw new Error("Page not created. Call createPage() first.");
184
+ }
185
+ const inputSelector = yield this.page.evaluate((label) => {
186
+ const labels = Array.from(document.querySelectorAll('label'));
187
+ const matchingLabel = labels.find(l => { var _a; return (_a = l.textContent) === null || _a === void 0 ? void 0 : _a.trim().includes(label); });
188
+ if (matchingLabel) {
189
+ const forAttr = matchingLabel.getAttribute('for');
190
+ if (forAttr)
191
+ return `#${forAttr}`;
192
+ const input = matchingLabel.querySelector('input, textarea, select');
193
+ if (input && input.id)
194
+ return `#${input.id}`;
195
+ if (input)
196
+ return null;
197
+ }
198
+ const inputsWithPlaceholder = Array.from(document.querySelectorAll(`input[placeholder*="${label}"], textarea[placeholder*="${label}"]`));
199
+ if (inputsWithPlaceholder.length > 0) {
200
+ const input = inputsWithPlaceholder[0];
201
+ if (input.id)
202
+ return `#${input.id}`;
123
203
  }
204
+ return null;
205
+ }, labelText);
206
+ if (!inputSelector) {
207
+ const analysis = yield this.analyzePage();
208
+ throw new Error(`Input field with label "${labelText}" not found. Available inputs: ${analysis.inputs.join(', ')}`);
124
209
  }
125
- }
210
+ yield this.page.fill(inputSelector, text);
211
+ yield this.page.waitForLoadState('load');
212
+ });
213
+ }
214
+ addViolationStyles() {
215
+ return __awaiter(this, void 0, void 0, function* () {
216
+ if (!this.page) {
217
+ throw new Error("Page not created.");
218
+ }
219
+ yield this.page.addStyleTag({
220
+ content: `
221
+ .a11y-violation {
222
+ position: relative !important;
223
+ outline: 4px solid #FF4444 !important;
224
+ margin: 2px !important;
225
+ }
226
+ .violation-number {
227
+ position: absolute !important;
228
+ top: -12px !important;
229
+ left: -12px !important;
230
+ background: #FF4444;
231
+ color: white !important;
232
+ width: 25px;
233
+ height: 25px;
234
+ border-radius: 50%;
235
+ display: flex !important;
236
+ align-items: center;
237
+ justify-content: center;
238
+ font-weight: bold;
239
+ font-size: 14px;
240
+ z-index: 10000;
241
+ }
242
+ .a11y-violation-info {
243
+ position: absolute !important;
244
+ background: #333333 !important;
245
+ color: white !important;
246
+ padding: 12px !important;
247
+ border-radius: 4px !important;
248
+ font-size: 14px !important;
249
+ max-width: 300px !important;
250
+ z-index: 9999 !important;
251
+ box-shadow: 0 2px 10px rgba(0,0,0,0.3);
252
+ }
253
+ `,
254
+ });
255
+ });
256
+ }
257
+ highlightViolations(violations) {
258
+ return __awaiter(this, void 0, void 0, function* () {
259
+ if (!this.page) {
260
+ throw new Error("Page not created.");
261
+ }
262
+ let violationCounter = 1;
263
+ for (const violation of violations) {
264
+ for (const node of violation.nodes) {
265
+ try {
266
+ const targetSelector = node.target[0];
267
+ const selector = Array.isArray(targetSelector)
268
+ ? targetSelector.join(" ")
269
+ : targetSelector;
270
+ yield this.page.evaluate(({ selector, violationData, counter }) => {
271
+ const elements = document.querySelectorAll(selector);
272
+ elements.forEach((element) => {
273
+ const numberBadge = document.createElement("div");
274
+ numberBadge.className = "violation-number";
275
+ numberBadge.textContent = counter.toString();
276
+ element.classList.add("a11y-violation");
277
+ element.appendChild(numberBadge);
278
+ const listItem = document.createElement("div");
279
+ listItem.style.marginBottom = "15px";
280
+ listItem.innerHTML = `
281
+ <div style="color: #FF4444; font-weight: bold;">
282
+ Violation #${counter}: ${violationData.impact.toUpperCase()}
283
+ </div>
284
+ <div style="margin: 5px 0; font-size: 14px;">
285
+ ${violationData.description}
286
+ </div>
287
+ `;
288
+ document.body.appendChild(listItem);
289
+ const rect = element.getBoundingClientRect();
290
+ listItem.style.left = `${rect.left + window.scrollX}px`;
291
+ listItem.style.top = `${rect.bottom + window.scrollY + 10}px`;
292
+ });
293
+ }, {
294
+ selector: selector,
295
+ violationData: {
296
+ impact: violation.impact,
297
+ description: violation.description,
298
+ },
299
+ counter: violationCounter,
300
+ });
301
+ violationCounter++;
302
+ }
303
+ catch (error) {
304
+ console.log(`Failed to highlight element: ${error}`);
305
+ }
306
+ }
307
+ }
308
+ });
309
+ }
310
+ generateReport(violations) {
311
+ var _a;
126
312
  let reportCounter = 1;
127
313
  const report = [];
128
- for (const violation of results.violations) {
314
+ for (const violation of violations) {
129
315
  for (const node of violation.nodes) {
130
316
  report.push({
131
317
  index: reportCounter++,
132
318
  element: node.target[0],
133
319
  impactLevel: violation.impact,
134
320
  description: violation.description,
135
- wcagCriteria: (_a = violation.tags) === null || _a === void 0 ? void 0 : _a.join(", "),
321
+ wcagCriteria: ((_a = violation.tags) === null || _a === void 0 ? void 0 : _a.join(", ")) || "",
136
322
  });
137
323
  }
138
324
  }
139
- const filePath = node_path_1.default.join(node_path_1.default.join(node_os_1.default.homedir(), "Downloads"), `a11y-report-${Date.now()}.png`);
140
- const screenshot = yield page.screenshot({
141
- path: filePath,
142
- fullPage: true,
325
+ return report;
326
+ }
327
+ takeScreenshot() {
328
+ return __awaiter(this, void 0, void 0, function* () {
329
+ if (!this.page) {
330
+ throw new Error("Page not created.");
331
+ }
332
+ const filePath = node_path_1.default.join(node_path_1.default.join(node_os_1.default.homedir(), "Downloads"), `a11y-report-${Date.now()}.png`);
333
+ const screenshot = yield this.page.screenshot({
334
+ path: filePath,
335
+ });
336
+ return screenshot.toString("base64");
337
+ });
338
+ }
339
+ scanViolations(violationsTags) {
340
+ return __awaiter(this, void 0, void 0, function* () {
341
+ if (!this.page) {
342
+ throw new Error("Page not created.");
343
+ }
344
+ yield this.addViolationStyles();
345
+ const axe = new playwright_2.AxeBuilder({ page: this.page }).withTags(violationsTags);
346
+ const results = yield axe.analyze();
347
+ yield this.highlightViolations(results.violations);
348
+ const report = this.generateReport(results.violations);
349
+ const base64Screenshot = yield this.takeScreenshot();
350
+ return { report, base64Screenshot };
143
351
  });
144
- const base64Screenshot = screenshot.toString("base64");
145
- yield browser.close();
146
- return { report, base64Screenshot };
352
+ }
353
+ cleanup() {
354
+ return __awaiter(this, void 0, void 0, function* () {
355
+ if (this.browser) {
356
+ yield this.browser.close();
357
+ this.browser = null;
358
+ this.context = null;
359
+ this.page = null;
360
+ }
361
+ });
362
+ }
363
+ }
364
+ exports.AccessibilityScanner = AccessibilityScanner;
365
+ function scanViolations(url_1, violationsTags_1) {
366
+ return __awaiter(this, arguments, void 0, function* (url, violationsTags, viewport = { width: 1920, height: 1080 }, shouldRunInHeadless = true) {
367
+ const scanner = new AccessibilityScanner();
368
+ try {
369
+ yield scanner.initialize(shouldRunInHeadless);
370
+ yield scanner.createContext(viewport);
371
+ yield scanner.createPage();
372
+ yield scanner.navigateToUrl(url);
373
+ return yield scanner.scanViolations(violationsTags);
374
+ }
375
+ finally {
376
+ yield scanner.cleanup();
377
+ }
147
378
  });
148
379
  }