snap-ally 0.2.5-beta → 0.3.0

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 (75) hide show
  1. package/dist/A11yReportAssets.d.ts +5 -12
  2. package/dist/A11yReportAssets.js +16 -82
  3. package/dist/A11yScanner.d.ts +2 -21
  4. package/dist/A11yScanner.js +16 -22
  5. package/dist/A11yTimeUtils.js +11 -23
  6. package/dist/A11yVisualReporter.d.ts +50 -0
  7. package/dist/A11yVisualReporter.js +188 -0
  8. package/dist/AccessibilityReporterOptions.d.ts +24 -0
  9. package/dist/AccessibilityReporterOptions.js +5 -0
  10. package/dist/ResolvedColors.d.ts +15 -0
  11. package/dist/ResolvedColors.js +20 -0
  12. package/dist/SnapAllyReporter.d.ts +12 -72
  13. package/dist/SnapAllyReporter.js +218 -329
  14. package/dist/core/A11yHtmlRenderer.d.ts +17 -0
  15. package/dist/core/A11yHtmlRenderer.js +118 -0
  16. package/dist/core/A11yReportAssets.d.ts +30 -0
  17. package/dist/core/A11yReportAssets.js +127 -0
  18. package/dist/core/A11yScanner.d.ts +8 -0
  19. package/dist/core/A11yScanner.js +178 -0
  20. package/dist/core/A11yVisualReporter.d.ts +50 -0
  21. package/dist/core/A11yVisualReporter.js +188 -0
  22. package/dist/core/HtmlRenderer.d.ts +14 -0
  23. package/dist/core/HtmlRenderer.js +106 -0
  24. package/dist/core/ReportAssets.d.ts +29 -0
  25. package/dist/core/ReportAssets.js +126 -0
  26. package/dist/core/Scanner.d.ts +7 -0
  27. package/dist/core/Scanner.js +162 -0
  28. package/dist/core/VisualReporter.d.ts +54 -0
  29. package/dist/core/VisualReporter.js +192 -0
  30. package/dist/index.d.ts +6 -6
  31. package/dist/index.js +13 -12
  32. package/dist/models/A11yDataSource.d.ts +15 -0
  33. package/dist/models/A11yDataSource.js +2 -0
  34. package/dist/models/A11yError.d.ts +34 -0
  35. package/dist/models/A11yError.js +11 -0
  36. package/dist/models/A11yScannerOptions.d.ts +24 -0
  37. package/dist/models/A11yScannerOptions.js +2 -0
  38. package/dist/models/AccessibilityReporterOptions.d.ts +24 -0
  39. package/dist/models/AccessibilityReporterOptions.js +5 -0
  40. package/dist/models/DataSource.d.ts +15 -0
  41. package/dist/models/DataSource.js +2 -0
  42. package/dist/models/ImagePath.d.ts +5 -0
  43. package/dist/models/ImagePath.js +3 -0
  44. package/dist/models/ReportData.d.ts +24 -0
  45. package/dist/models/ReportData.js +2 -0
  46. package/dist/models/ReporterOptions.d.ts +24 -0
  47. package/dist/models/ReporterOptions.js +5 -0
  48. package/dist/models/ResolvedColors.d.ts +16 -0
  49. package/dist/models/ResolvedColors.js +24 -0
  50. package/dist/models/ScannerOptions.d.ts +30 -0
  51. package/dist/models/ScannerOptions.js +2 -0
  52. package/dist/models/Severity.d.ts +7 -0
  53. package/dist/models/Severity.js +11 -0
  54. package/dist/models/Target.d.ts +10 -0
  55. package/dist/models/Target.js +3 -0
  56. package/dist/models/TestResults.d.ts +41 -0
  57. package/dist/models/TestResults.js +2 -0
  58. package/dist/models/TestStatusIcon.d.ts +8 -0
  59. package/dist/models/TestStatusIcon.js +12 -0
  60. package/dist/models/TestSummary.d.ts +34 -0
  61. package/dist/models/TestSummary.js +2 -0
  62. package/dist/models/Violation.d.ts +13 -0
  63. package/dist/models/Violation.js +2 -0
  64. package/dist/models/index.d.ts +12 -113
  65. package/dist/models/index.js +26 -16
  66. package/dist/templates/accessibility-report.html +75 -101
  67. package/dist/templates/execution-summary.html +37 -103
  68. package/dist/templates/global-report-styles.css +400 -9
  69. package/dist/templates/report-app.js +171 -73
  70. package/dist/templates/test-execution-report.html +84 -113
  71. package/dist/utils/A11yTimeUtils.d.ts +13 -0
  72. package/dist/utils/A11yTimeUtils.js +40 -0
  73. package/dist/utils/TimeUtils.d.ts +13 -0
  74. package/dist/utils/TimeUtils.js +39 -0
  75. package/package.json +2 -2
package/dist/templates/accessibility-report.html CHANGED
@@ -26,39 +26,27 @@
26
26
  </head>
27
27
 
28
28
  <body>
29
- <div
30
- id="loader-overlay"
31
- style="
32
- position: fixed;
33
- inset: 0;
34
- background: #fff;
35
- z-index: 10000;
36
- display: flex;
37
- flex-direction: column;
38
- justify-content: center;
39
- align-items: center;
40
- transition: opacity 0.5s ease;
41
- display: none;
42
- "
43
- >
29
+ <a href="#accessibility-report-root" class="skip-link">Skip to main content</a>
30
+
31
+ <div id="loader-overlay" class="loader-overlay hidden" aria-live="polite" aria-busy="true">
44
32
  <div class="loader-pulse">
45
- <span class="material-symbols-outlined" style="font-size: 32px">query_stats</span>
33
+ <span class="material-symbols-outlined fs-32" aria-hidden="true">query_stats</span>
46
34
  </div>
47
35
  <div class="loader-text">Compiling Audit Results</div>
48
36
  </div>
49
37
 
50
- <header>
51
- <a href="#" class="brand" style="cursor: default; text-decoration: none">
52
- <div class="brand-icon">
53
- <span class="material-symbols-outlined" style="font-size: 22px"
38
+ <header role="banner">
39
+ <div class="brand">
40
+ <div class="brand-icon" aria-hidden="true">
41
+ <span class="material-symbols-outlined fs-6"
54
42
  >accessibility_new</span
55
43
  >
56
44
  </div>
57
45
  <h1 class="brand-text">Accessibility Audit</h1>
58
- </a>
59
- <div class="header-actions" style="display: flex; gap: 16px; align-items: center">
46
+ </div>
47
+ <nav class="header-actions d-flex-align-center gap-16" aria-label="Quick Actions">
60
48
  <a href="../summary.html" class="btn btn-link btn-sm btn-back">
61
- <span class="material-symbols-outlined btn-back-icon">arrow_back</span>
49
+ <span class="material-symbols-outlined btn-back-icon" aria-hidden="true">arrow_back</span>
62
50
  Back to Summary
63
51
  </a>
64
52
  <button
@@ -66,33 +54,39 @@
66
54
  class="btn btn-outline-primary btn-sm btn-token"
67
55
  data-bs-toggle="modal"
68
56
  data-bs-target="#tokenModal"
69
- >
70
- <span class="material-symbols-outlined btn-token-icon">key</span>
57
+ aria-label="Manage ADO Token">
58
+ <span class="material-symbols-outlined btn-token-icon" aria-hidden="true">key</span>
71
59
  ADO Token
72
60
  </button>
73
- </div>
61
+ </nav>
74
62
  </header>
75
63
 
76
- <div class="container" id="accessibility-report-root" style="display: none">
64
+ <main class="container hidden" id="accessibility-report-root">
77
65
  <!-- Hero Section -->
78
66
  <section class="page-hero">
79
67
  <div class="hero-content">
80
68
  <h2>Target Resource</h2>
81
69
  <p class="page-url" id="a11y-page-url"></p>
70
+ <div
71
+ class="hero-meta mt-2 hidden"
72
+ id="a11y-browser-container"
73
+ style="font-size: 0.9rem; opacity: 0.8; font-family: Inter, sans-serif;"
74
+ >
75
+ <b>Browser:</b> <span id="a11y-browser-text"></span>
76
+ </div>
82
77
  </div>
83
78
  <div class="stats-pills">
84
79
  <div
85
- class="stat-pill stat-pill-passed"
80
+ class="stat-pill stat-pill-passed hidden"
86
81
  id="a11y-pill-passed"
87
- style="display: none"
88
82
  >
89
- <span class="material-symbols-outlined" style="font-size: 20px"
83
+ <span class="material-symbols-outlined fs-20"
90
84
  >verified</span
91
85
  >
92
86
  No Violations
93
87
  </div>
94
88
 
95
- <div class="stat-pill" id="a11y-pill-failed" style="display: none">
89
+ <div class="stat-pill stat-pill-failed hidden" id="a11y-pill-failed">
96
90
  <span class="material-symbols-outlined stat-pill-icon">bug_report</span>
97
91
  <span><span id="a11y-failed-count"></span> Issues</span>
98
92
  </div>
@@ -100,28 +94,32 @@
100
94
  </section>
101
95
 
102
96
  <!-- Video Card -->
103
- <div class="video-card" id="a11y-video-card" style="display: none">
97
+ <div class="video-card hidden" id="a11y-video-card">
104
98
  <div class="video-header">
105
99
  <div class="video-icon-wrap">
106
100
  <span class="material-symbols-outlined">videocam</span>
107
101
  </div>
108
102
  <h2 class="video-title">Execution Recording</h2>
109
103
  </div>
110
- <div class="video-container">
111
- <video controls>
112
- <source id="a11y-video-source" type="video/webm" />
113
- Your browser does not support the video tag.
114
- </video>
104
+ <div class="video-container" id="a11y-videos-list">
105
+ <!-- Multiple videos will be injected here if available -->
115
106
  </div>
116
107
  </div>
117
108
 
118
109
  <!-- Success State -->
119
- <div class="success-verified-card" id="a11y-success-card" style="display: none">
120
- <span class="material-symbols-outlined success-hero-icon">check_circle</span>
121
- <h3 class="success-hero-title">Compliance Verified</h3>
122
- <p class="success-hero-desc">
123
- Congratulations! This page passed all automated accessibility checks.
124
- </p>
110
+ <div class="success-verified-card hidden" id="a11y-success-card">
111
+ <div class="success-content-layout">
112
+ <div class="success-icon-container">
113
+ <span class="material-symbols-outlined">verified_user</span>
114
+ <div class="icon-pulse"></div>
115
+ </div>
116
+ <div class="success-text-group">
117
+ <h3 class="success-hero-title">Compliance Verified</h3>
118
+ <p class="success-hero-desc">
119
+ Congratulations! This page passed all automated accessibility checks.
120
+ </p>
121
+ </div>
122
+ </div>
125
123
  </div>
126
124
 
127
125
  <!-- Violations Container -->
@@ -135,7 +133,7 @@
135
133
  <span class="violation-rule-info">
136
134
  <span class="rule-name"></span>
137
135
  <span class="rule-sep">•</span>
138
- <span class="rule-wcag-tags" style="margin-left: 8px"></span>
136
+ <span class="rule-wcag-tags ms-2"></span>
139
137
  </span>
140
138
  </div>
141
139
  <span class="severity-badge"></span>
@@ -158,7 +156,7 @@
158
156
  </div>
159
157
  </div>
160
158
 
161
- <div class="instances-list" style="margin-top: 16px">
159
+ <div class="instances-list mt-16">
162
160
  <h4 class="instances-title">
163
161
  <span class="material-symbols-outlined instances-icon"
164
162
  >preview</span
@@ -180,17 +178,17 @@
180
178
  data-bs-target=""
181
179
  aria-expanded="false"
182
180
  >
183
- <div class="d-flex align-items-center gap-3" style="max-width: 75%">
181
+ <div class="d-flex-align-center gap-3 max-w-75">
184
182
  <span class="material-symbols-outlined chevron">expand_more</span>
185
183
  <div class="bug-snippet">
186
- <strong style="color: var(--primary)" class="bug-rule-name"></strong
184
+ <strong class="text-primary bug-rule-name"></strong
187
185
  >:
188
186
  <span class="bug-snippet-text"></span>
189
187
  </div>
190
188
  </div>
191
189
  <div class="d-flex gap-2">
192
190
  <button class="btn btn-sm btn-bug log-bug-btn" type="button">
193
- <span class="material-symbols-outlined" style="font-size: 16px"
191
+ <span class="material-symbols-outlined fs-16"
194
192
  >bug_report</span
195
193
  >
196
194
  Log Bug
@@ -201,18 +199,16 @@
201
199
  <div id="" class="collapse bug-item-body-collapse">
202
200
  <div class="bug-details-body">
203
201
  <!-- Left: Repro Steps -->
204
- <div style="margin-bottom: 16px">
202
+ <div class="mb-3">
205
203
  <div class="bug-section-title">Reproduction Steps</div>
206
- <div class="bug-content-box bug-failure-summary">
207
- <span style="color: var(--text-muted); font-style: italic"
208
- >No interaction steps recorded. Issue found via static
209
- scan.</span
210
- >
204
+ <div class="bug-content-box bug-failure-summary text-muted fst-italic">
205
+ No interaction steps recorded. Issue found via static
206
+ scan.
211
207
  </div>
212
208
  </div>
213
209
 
214
210
  <!-- Right: Visual -->
215
- <div class="visual-evidence-section" style="display: none">
211
+ <div class="visual-evidence-section hidden">
216
212
  <div class="bug-section-title">Visual Evidence</div>
217
213
  <div class="screenshot-container">
218
214
  <img class="bug-screenshot" alt="Violation Evidence" />
@@ -235,6 +231,7 @@
235
231
  type="button"
236
232
  class="btn-close"
237
233
  data-bs-dismiss="modal"
234
+ aria-label="Close"
238
235
  ></button>
239
236
  </div>
240
237
  <div class="modal-body modal-body-custom">
@@ -250,6 +247,7 @@
250
247
  class="form-control token-input"
251
248
  id="tokenInput"
252
249
  placeholder="Enter PAT Token"
250
+ aria-label="Personal Access Token"
253
251
  required
254
252
  />
255
253
  </div>
@@ -272,8 +270,7 @@
272
270
  <div class="modal-header">
273
271
  <div class="modal-title">
274
272
  <span
275
- class="material-symbols-outlined"
276
- style="color: #cc293d; font-size: 24px"
273
+ class="material-symbols-outlined text-critical fs-24"
277
274
  >bug_report</span
278
275
  >
279
276
  New Bug Entry - Azure DevOps
@@ -287,7 +284,7 @@
287
284
  </div>
288
285
  <div class="modal-body">
289
286
  <div class="ado-field-group">
290
- <label class="ado-form-label">Title</label>
287
+ <label class="ado-form-label" for="bugTitleInput">Title</label>
291
288
  <input
292
289
  type="text"
293
290
  id="bugTitleInput"
@@ -299,7 +296,7 @@
299
296
  <div class="row">
300
297
  <div class="col-md-6">
301
298
  <div class="ado-field-group">
302
- <label class="ado-form-label">Severity</label>
299
+ <label class="ado-form-label" for="bugSeverityInput">Severity</label>
303
300
  <select id="bugSeverityInput" class="ado-form-input">
304
301
  <option value="critical">Critical (Priority 1)</option>
305
302
  <option value="serious">Serious (Priority 2)</option>
@@ -310,12 +307,12 @@
310
307
  </div>
311
308
  <div class="col-md-6">
312
309
  <div class="ado-field-group">
313
- <label class="ado-form-label">Target Area</label>
310
+ <label class="ado-form-label" for="bugAreaInput">Target Area</label>
314
311
  <input
315
312
  type="text"
316
313
  id="bugAreaInput"
317
314
  class="ado-form-input"
318
- placeholder="Project\\Area"
315
+ placeholder="Project\Area"
319
316
  />
320
317
  </div>
321
318
  </div>
@@ -325,23 +322,17 @@
325
322
  <label class="ado-form-label">Reproduction Steps & Description</label>
326
323
  <div
327
324
  id="bugReproPreview"
328
- class="ado-repro-preview"
329
- style="min-height: 150px"
325
+ class="ado-repro-preview min-h-150"
330
326
  ></div>
331
327
  </div>
332
328
 
333
329
  <!-- Visual Evidence - Single Column Full Width -->
334
330
  <div
335
- class="ado-field-group"
336
- id="screenshotThumbContainer"
337
- style="display: none"
338
- >
331
+ class="ado-field-group hidden"
332
+ id="screenshotThumbContainer">
339
333
  <label class="ado-form-label">
340
334
  <span
341
- class="material-symbols-outlined"
342
- style="font-size: 14px; vertical-align: middle"
343
- >image</span
344
- >
335
+ class="material-symbols-outlined fs-14 v-align-middle">image</span>
345
336
  Violation Screenshot
346
337
  </label>
347
338
  <img
@@ -352,13 +343,10 @@
352
343
  />
353
344
  </div>
354
345
 
355
- <div class="ado-field-group" id="videoThumbContainer" style="display: none">
346
+ <div class="ado-field-group hidden" id="videoThumbContainer">
356
347
  <label class="ado-form-label">
357
348
  <span
358
- class="material-symbols-outlined"
359
- style="font-size: 14px; vertical-align: middle"
360
- >videocam</span
361
- >
349
+ class="material-symbols-outlined fs-14 v-align-middle">videocam</span>
362
350
  Session Recording
363
351
  </label>
364
352
  <video id="bugVideoPreview" class="video-preview-player" controls>
@@ -366,51 +354,37 @@
366
354
  </video>
367
355
  </div>
368
356
 
369
- <div class="ado-field-group" style="margin-bottom: 0">
370
- <div
371
- class="ado-repro-preview"
372
- style="
373
- font-size: 0.75rem;
374
- background: #fffcf0;
375
- border-color: #f9f0c3;
376
- padding: 12px;
377
- line-height: 1.5;
378
- "
379
- >
380
- <b>Environment:</b> Playwright engine • <b>URL:</b>
381
- <span
382
- id="bugUrlPreview"
383
- style="word-break: break-all; color: var(--primary)"
384
- ></span>
357
+ <div class="ado-field-group mb-0">
358
+ <div class="ado-repro-preview ado-repro-env">
359
+ <b>Environment:</b> Playwright engine •
360
+ <b>Browser:</b> <span id="bugBrowserPreview" class="text-primary me-2"></span>
361
+ • <b>URL:</b>
362
+ <span id="bugUrlPreview" class="text-primary break-all"></span>
385
363
  </div>
386
364
  </div>
387
365
  </div>
388
366
  <div class="modal-footer">
389
367
  <button
390
368
  type="button"
391
- class="btn-ado-secondary btn btn-outline-secondary"
392
- data-bs-dismiss="modal"
393
- style="border-radius: 12px; font-weight: 700"
394
- >
369
+ class="btn-ado-secondary btn btn-outline-secondary rounded-12 fw-bold"
370
+ data-bs-dismiss="modal">
395
371
  Cancel
396
372
  </button>
397
373
  <button
398
374
  type="button"
399
375
  id="confirmBugBtn"
400
- class="btn-ado-primary btn btn-primary"
401
- style="border-radius: 12px; font-weight: 700"
402
- >
376
+ class="btn-ado-primary btn btn-primary rounded-12 fw-bold">
403
377
  Create Bug
404
378
  </button>
405
379
  </div>
406
380
  </div>
407
381
  </div>
408
- </div>
382
+ </main>
409
383
 
410
384
  <footer>
411
385
  <div class="powered-by">Generated by <span class="badge-tool">Snap Ally</span></div>
412
386
  <div>
413
- <span style="opacity: 0.7">&copy; <span id="year"></span> Snap Ally</span>
387
+ <span class="opacity-75">&copy; <span id="year"></span> Snap Ally</span>
414
388
  </div>
415
389
  </footer>
416
390
 
package/dist/templates/execution-summary.html CHANGED
@@ -23,37 +23,27 @@
23
23
  </head>
24
24
 
25
25
  <body>
26
- <header>
27
- <a href="#" class="brand" style="cursor: default">
28
- <div class="brand-icon">
29
- <span class="material-symbols-outlined" style="font-size: 22px"
26
+ <a href="#report-summary-root" class="skip-link">Skip to main content</a>
27
+ <header role="banner">
28
+ <div class="brand">
29
+ <div class="brand-icon" aria-hidden="true">
30
+ <span class="material-symbols-outlined fs-6"
30
31
  >fact_check</span
31
32
  >
32
33
  </div>
33
34
  <h1>Snap Ally Test Summary</h1>
34
- </a>
35
+ </div>
35
36
  </header>
36
37
 
37
- <div class="container" id="report-summary-root" style="display: none">
38
+ <main class="container hidden" id="report-summary-root">
38
39
  <!-- Hero Section -->
39
40
  <div class="summary-hero">
40
- <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 8px">
41
- <h2
42
- style="
43
- margin: 0;
44
- font-weight: 600;
45
- font-size: 1.4rem;
46
- color: var(--text-main);
47
- "
48
- >
41
+ <div class="d-flex-align-center gap-16 mb-2">
42
+ <h2 class="m-0 fw-semibold fs-4 text-main">
49
43
  Test Execution Summary
50
44
  </h2>
51
45
  <div class="status-badge" id="summary-status-badge">
52
- <span
53
- class="material-symbols-outlined"
54
- id="summary-status-icon"
55
- style="font-size: 16px"
56
- ></span>
46
+ <span class="material-symbols-outlined fs-6" id="summary-status-icon"></span>
57
47
  <span id="summary-status-text"></span>
58
48
  </div>
59
49
  </div>
@@ -79,12 +69,10 @@
79
69
  <!-- Global Tab Content -->
80
70
  <div id="tab-global" class="tab-content active">
81
71
  <!-- Global Success -->
82
- <div class="success-verified-card" id="global-success-card" style="display: none">
72
+ <div class="success-verified-card hidden" id="global-success-card">
83
73
  <div class="success-content-layout">
84
74
  <div class="success-icon-container">
85
- <span class="material-symbols-outlined" id="global-success-icon"
86
- >check_circle</span
87
- >
75
+ <span class="material-symbols-outlined" id="global-success-icon">check_circle</span>
88
76
  <div class="icon-pulse"></div>
89
77
  </div>
90
78
  <div class="success-text-group">
@@ -96,40 +84,26 @@
96
84
  your audited application.
97
85
  </p>
98
86
  <div class="success-badges">
99
- <span class="success-msg-badge"
100
- ><span class="material-symbols-outlined">verified</span> 0
101
- Violations Found</span
102
- >
103
- <span class="success-msg-badge"
104
- ><span class="material-symbols-outlined"
105
- >health_and_safety</span
106
- >
107
- 100% Compliant</span
108
- >
87
+ <span class="success-msg-badge"><span class="material-symbols-outlined">verified</span> 0
88
+ Violations Found</span>
89
+ <span class="success-msg-badge"><span class="material-symbols-outlined">health_and_safety</span>
90
+ 100% Compliant</span>
109
91
  </div>
110
92
  </div>
111
93
  </div>
112
94
  </div>
113
95
 
114
96
  <!-- Global Errors -->
115
- <div id="global-errors-container" style="display: none">
97
+ <div id="global-errors-container" class="hidden">
116
98
  <div class="metrics-grid" id="global-metrics-grid"></div>
117
99
  <div class="chart-box">
118
100
  <div class="chart-title">
119
101
  Global Violation Distribution
120
102
  <div class="chart-legend">
121
- <span class="legend-item"
122
- ><span class="legend-dot critical"></span> Critical</span
123
- >
124
- <span class="legend-item"
125
- ><span class="legend-dot serious"></span> Serious</span
126
- >
127
- <span class="legend-item"
128
- ><span class="legend-dot moderate"></span> Moderate</span
129
- >
130
- <span class="legend-item"
131
- ><span class="legend-dot minor"></span> Minor</span
132
- >
103
+ <span class="legend-item"><span class="legend-dot critical"></span> Critical</span>
104
+ <span class="legend-item"><span class="legend-dot serious"></span> Serious</span>
105
+ <span class="legend-item"><span class="legend-dot moderate"></span> Moderate</span>
106
+ <span class="legend-item"><span class="legend-dot minor"></span> Minor</span>
133
107
  </div>
134
108
  </div>
135
109
  <div id="chart-global-violations"></div>
@@ -143,24 +117,16 @@
143
117
  <template id="browser-tab-content-template">
144
118
  <div class="tab-content">
145
119
  <!-- Error State -->
146
- <div class="browser-errors-container" style="display: none">
120
+ <div class="browser-errors-container hidden">
147
121
  <div class="metrics-grid browser-metrics-grid"></div>
148
122
  <div class="chart-box">
149
123
  <div class="chart-title">
150
124
  <span class="browser-chart-title"></span> Violations by Rule
151
125
  <div class="chart-legend">
152
- <span class="legend-item"
153
- ><span class="legend-dot critical"></span> Critical</span
154
- >
155
- <span class="legend-item"
156
- ><span class="legend-dot serious"></span> Serious</span
157
- >
158
- <span class="legend-item"
159
- ><span class="legend-dot moderate"></span> Moderate</span
160
- >
161
- <span class="legend-item"
162
- ><span class="legend-dot minor"></span> Minor</span
163
- >
126
+ <span class="legend-item"><span class="legend-dot critical"></span> Critical</span>
127
+ <span class="legend-item"><span class="legend-dot serious"></span> Serious</span>
128
+ <span class="legend-item"><span class="legend-dot moderate"></span> Moderate</span>
129
+ <span class="legend-item"><span class="legend-dot minor"></span> Minor</span>
164
130
  </div>
165
131
  </div>
166
132
  <div class="browser-chart-container"></div>
@@ -168,15 +134,10 @@
168
134
  </div>
169
135
 
170
136
  <!-- Success State -->
171
- <div
172
- class="success-verified-card browser-success-container"
173
- style="display: none"
174
- >
137
+ <div class="success-verified-card browser-success-container hidden">
175
138
  <div class="success-content-layout">
176
139
  <div class="success-icon-container">
177
- <span class="material-symbols-outlined success-hero-icon"
178
- >verified_user</span
179
- >
140
+ <span class="material-symbols-outlined success-hero-icon">verified_user</span>
180
141
  <div class="icon-pulse"></div>
181
142
  </div>
182
143
  <div class="success-text-group">
@@ -200,14 +161,12 @@
200
161
  <span class="metric-rule"></span>
201
162
  <span class="metric-sev"></span>
202
163
  </div>
203
- <div class="metric-desc" style="display: none"></div>
164
+ <div class="metric-desc hidden"></div>
204
165
  </div>
205
166
  <div class="metric-footer">
206
167
  <div class="metric-count"></div>
207
- <a target="_blank" class="btn-guide" style="display: none">
208
- <span class="material-symbols-outlined" style="font-size: 16px"
209
- >menu_book</span
210
- >
168
+ <a target="_blank" class="btn-guide hidden">
169
+ <span class="material-symbols-outlined fs-16">menu_book</span>
211
170
  Guide
212
171
  </a>
213
172
  </div>
@@ -215,15 +174,8 @@
215
174
  </template>
216
175
 
217
176
  <!-- Test Suite Details Accordion -->
218
- <div class="results-list" style="margin-top: 40px">
219
- <h2
220
- style="
221
- font-family: 'Outfit', sans-serif;
222
- font-size: 1.25rem;
223
- margin-bottom: 24px;
224
- color: var(--text-main);
225
- "
226
- >
177
+ <div class="results-list mt-5">
178
+ <h2 class="section-heading-lg mb-4 text-main">
227
179
  Test Suite Details
228
180
  </h2>
229
181
  <div id="accordion-container"></div>
@@ -248,36 +200,18 @@
248
200
  <span class="browser-chip"></span>
249
201
  </div>
250
202
  <div class="test-meta">
251
- <span
252
- class="err-badge"
253
- style="
254
- display: none;
255
- background: #fee2e2;
256
- color: #ef4444;
257
- font-size: 0.7rem;
258
- font-weight: 800;
259
- padding: 2px 8px;
260
- border-radius: 6px;
261
- "
262
- ></span>
263
- <div
264
- class="test-dur"
265
- style="
266
- font-size: 0.8rem;
267
- color: var(--text-muted);
268
- font-weight: 700;
269
- "
270
- ></div>
203
+ <span class="err-badge hidden"></span>
204
+ <div class="test-dur text-muted-sm fw-bold"></div>
271
205
  </div>
272
206
  </div>
273
207
  </a>
274
208
  </template>
275
- </div>
209
+ </main>
276
210
 
277
211
  <footer>
278
212
  <div class="powered-by">Generated by <span class="badge-tool">Snap Ally</span></div>
279
213
  <div>
280
- <span style="opacity: 0.7">&copy; <span id="year"></span> Snap Ally</span>
214
+ <span class="opacity-75">&copy; <span id="year"></span> Snap Ally</span>
281
215
  </div>
282
216
  </footer>
283
217