snap-ally 0.2.7-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 +62 -95
  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 +170 -72
  70. package/dist/templates/test-execution-report.html +84 -121
  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/test-execution-report.html CHANGED
@@ -22,101 +22,85 @@
22
22
  </head>
23
23
 
24
24
  <body>
25
- <header>
26
- <a href="#" class="brand" style="cursor: default">
27
- <div class="brand-icon">
28
- <span class="material-symbols-outlined" style="font-size: 22px"
29
- >fact_check</span
30
- >
25
+ <a href="#test-execution-root" class="skip-link">Skip to main content</a>
26
+
27
+ <header role="banner">
28
+ <div class="brand">
29
+ <div class="brand-icon" aria-hidden="true">
30
+ <span class="material-symbols-outlined fs-6">fact_check</span>
31
31
  </div>
32
32
  <h1>Test Execution Report</h1>
33
- </a>
34
- <a href="../summary.html" class="back-link">
35
- <span class="material-symbols-outlined" style="font-size: 18px">arrow_back</span>
36
- Back to Summary
37
- </a>
33
+ </div>
34
+ <nav aria-label="Toolbar">
35
+ <a href="../summary.html" class="back-link no-underline">
36
+ <span class="material-symbols-outlined fs-6" aria-hidden="true">arrow_back</span>
37
+ Back to Summary
38
+ </a>
39
+ </nav>
38
40
  </header>
39
41
 
40
- <div class="container" id="test-execution-root" style="display: none">
42
+ <main class="container hidden" id="test-execution-root">
41
43
  <!-- Report Header -->
42
44
  <div class="report-header">
43
- <div class="header-info" style="width: 100%">
44
- <div
45
- style="
46
- display: flex;
47
- justify-content: space-between;
48
- align-items: flex-start;
49
- margin-bottom: 4px;
50
- "
51
- >
52
- <div style="display: flex; align-items: center; gap: 16px">
53
- <h1 class="report-title" id="report-title" style="margin: 0"></h1>
45
+ <div class="header-top-row d-flex-between mb-16">
46
+ <div class="header-titles">
47
+ <div class="d-flex-align-center gap-16">
48
+ <h1 class="report-title m-0" id="report-title"></h1>
54
49
  <div class="status-badge" id="report-status-badge">
55
- <span
56
- class="material-symbols-outlined"
57
- id="report-status-icon"
58
- style="font-size: 16px"
59
- ></span>
50
+ <span class="material-symbols-outlined fs-6" id="report-status-icon"></span>
60
51
  <span id="report-status-text"></span>
61
52
  </div>
62
- <div
63
- class="status-badge status-passed-a11y"
64
- id="report-a11y-verified"
65
- style="display: none"
66
- >
67
- <span class="material-symbols-outlined" style="font-size: 16px"
68
- >verified</span
69
- >
70
- A11y Verified
71
- </div>
72
53
  </div>
73
-
74
- <div
75
- class="duration-text"
76
- style="color: var(--text-muted); font-size: 0.9rem"
77
- >
78
- Duration:
79
- <strong
80
- class="duration-val"
81
- id="report-duration"
82
- style="color: var(--text-main); font-size: 1.1rem"
83
- ></strong>
54
+ </div>
55
+ <div class="header-badges d-flex gap-8">
56
+ <div class="status-badge status-passed-a11y hidden" id="report-a11y-verified">
57
+ <span class="material-symbols-outlined fs-6">verified</span>
58
+ A11y Verified
84
59
  </div>
85
60
  </div>
61
+ </div>
86
62
 
87
- <div
88
- style="
89
- display: flex;
90
- justify-content: space-between;
91
- align-items: center;
92
- width: 100%;
93
- "
94
- >
95
- <div style="display: flex; align-items: center; gap: 8px">
96
- <span class="browser-chip" id="report-browser"></span>
97
- <span id="report-tags-container"></span>
98
- <template id="tag-template">
99
- <span class="tag-badge"></span>
100
- </template>
101
- </div>
63
+ <div class="metadata-strip d-flex-align-center gap-24">
64
+ <div class="meta-item">
65
+ <span class="browser-chip" id="report-browser"></span>
66
+ </div>
102
67
 
103
- <a
104
- href="#"
105
- id="view-a11y-report-link"
106
- class="text-link"
107
- style="display: none"
108
- >
109
- <span class="material-symbols-outlined" style="font-size: 18px"
110
- >accessibility_new</span
111
- >
112
- View Accessibility Report
68
+ <div class="meta-item">
69
+ <span class="material-symbols-outlined meta-icon">timer</span>
70
+ <span id="report-duration" class="meta-text"></span>
71
+ </div>
72
+
73
+ <div id="report-tags-container" class="meta-item d-flex gap-8"></div>
74
+
75
+ <div class="meta-item ms-auto">
76
+ <a href="#" id="view-a11y-report-link" class="a11y-audit-link hidden">
77
+ <span class="material-symbols-outlined meta-icon">accessibility_new</span>
78
+ View Audit Report
79
+ <span class="material-symbols-outlined fs-6 link-arrow ms-1">chevron_right</span>
113
80
  </a>
114
81
  </div>
115
82
  </div>
116
83
  </div>
117
84
 
85
+ <!-- Accessibility Success -->
86
+ <div class="success-verified-card hidden" id="card-a11y-success">
87
+ <div class="success-content-layout">
88
+ <div class="success-icon-container">
89
+ <span class="material-symbols-outlined">check_circle</span>
90
+ <div class="icon-pulse"></div>
91
+ </div>
92
+ <div class="success-text-group">
93
+ <h3 class="success-hero-title">Compliance Verified</h3>
94
+ <p class="success-hero-desc">
95
+ Excellent! No accessibility violations were detected for this target
96
+ resource.
97
+ </p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
118
102
  <!-- Description -->
119
- <div class="card" id="card-description" style="display: none">
103
+ <div class="card hidden" id="card-description">
120
104
  <h2>
121
105
  <span class="material-symbols-outlined section-icon">info</span> Description
122
106
  </h2>
@@ -124,7 +108,7 @@
124
108
  </div>
125
109
 
126
110
  <!-- Pre-conditions -->
127
- <div class="card" id="card-preconditions" style="display: none">
111
+ <div class="card hidden" id="card-preconditions">
128
112
  <h2>
129
113
  <span class="material-symbols-outlined section-icon">settings</span>
130
114
  Pre-conditions
@@ -133,7 +117,7 @@
133
117
  </div>
134
118
 
135
119
  <!-- Test Steps -->
136
- <div class="card" id="card-steps" style="display: none">
120
+ <div class="card hidden" id="card-steps">
137
121
  <h2>
138
122
  <span class="material-symbols-outlined section-icon">analytics</span> Test Steps
139
123
  </h2>
@@ -146,7 +130,7 @@
146
130
  </template>
147
131
 
148
132
  <!-- Post-conditions -->
149
- <div class="card" id="card-postconditions" style="display: none">
133
+ <div class="card hidden" id="card-postconditions">
150
134
  <h2>
151
135
  <span class="material-symbols-outlined section-icon">check_circle</span>
152
136
  Post-conditions
@@ -154,18 +138,27 @@
154
138
  <ol id="list-postconditions"></ol>
155
139
  </div>
156
140
 
141
+ <!-- Accessibility Errors -->
142
+ <div class="card error-card hidden" id="card-a11y-errors">
143
+ <h2 class="violations-title">
144
+ <span class="material-symbols-outlined section-icon text-error-alt"
145
+ >accessibility_new</span
146
+ >
147
+ Accessibility Violations
148
+ </h2>
149
+ <div class="violations-container" id="list-a11y-errors"></div>
150
+ </div>
151
+
157
152
  <!-- Recording -->
158
- <div class="card" id="card-video" style="display: none">
153
+ <div class="card hidden" id="card-video">
159
154
  <h2>
160
155
  <span class="material-symbols-outlined section-icon">videocam</span> Recording
161
156
  </h2>
162
- <video controls>
163
- <source id="report-video-source" type="video/webm" />
164
- </video>
157
+ <div id="report-video-container"></div>
165
158
  </div>
166
159
 
167
160
  <!-- Evidence Gap (Screenshots) -->
168
- <div class="card" id="card-screenshots" style="display: none">
161
+ <div class="card hidden" id="card-screenshots">
169
162
  <h2>
170
163
  <span class="material-symbols-outlined section-icon">image</span> Evidence Gap
171
164
  </h2>
@@ -178,7 +171,7 @@
178
171
  </template>
179
172
 
180
173
  <!-- Attachments -->
181
- <div class="card" id="card-attachments" style="display: none">
174
+ <div class="card hidden" id="card-attachments">
182
175
  <h2>
183
176
  <span class="material-symbols-outlined section-icon">attachment</span>
184
177
  Attachments
@@ -187,40 +180,10 @@
187
180
  </div>
188
181
  <template id="attachment-template">
189
182
  <a target="_blank" class="attachment-item">
190
- <span class="material-symbols-outlined" style="font-size: 18px"
191
- >description</span
192
- >
183
+ <span class="material-symbols-outlined fs-6">description</span>
193
184
  <span class="attachment-name"></span>
194
185
  </a>
195
186
  </template>
196
-
197
- <!-- Accessibility Success -->
198
- <div class="success-verified-card" id="card-a11y-success" style="display: none">
199
- <div class="success-content-layout">
200
- <div class="success-icon-container">
201
- <span class="material-symbols-outlined">check_circle</span>
202
- <div class="icon-pulse"></div>
203
- </div>
204
- <div class="success-text-group">
205
- <h3 class="success-hero-title">Compliance Verified</h3>
206
- <p class="success-hero-desc">
207
- Excellent! No accessibility violations were detected for this target
208
- resource.
209
- </p>
210
- </div>
211
- </div>
212
- </div>
213
-
214
- <!-- Accessibility Errors -->
215
- <div class="card error-card" id="card-a11y-errors" style="display: none">
216
- <h2 class="violations-title">
217
- <span class="material-symbols-outlined section-icon" style="color: #9f1239"
218
- >accessibility_new</span
219
- >
220
- Accessibility Violations
221
- </h2>
222
- <div class="violations-container" id="list-a11y-errors"></div>
223
- </div>
224
187
  <template id="a11y-error-template">
225
188
  <div class="violation-item">
226
189
  <div class="violation-header">
@@ -228,12 +191,12 @@
228
191
  <span class="sev-badge"></span>
229
192
  </div>
230
193
  <div class="help-text"></div>
231
- <div class="desc-text" style="display: none"></div>
194
+ <div class="desc-text hidden"></div>
232
195
 
233
196
  <div class="instance-grid"></div>
234
197
 
235
198
  <div class="occ-row">
236
- <span class="material-symbols-outlined" style="font-size: 16px">tag</span>
199
+ <span class="material-symbols-outlined fs-6">tag</span>
237
200
  <span>Occurrences: <strong class="occ-count"></strong></span>
238
201
  </div>
239
202
  </div>
@@ -248,21 +211,21 @@
248
211
  </template>
249
212
 
250
213
  <!-- Exceptions -->
251
- <div class="card error-card" id="card-exceptions" style="display: none">
214
+ <div class="card error-card hidden" id="card-exceptions">
252
215
  <h2 class="exceptions-title">
253
- <span class="material-symbols-outlined section-icon" style="color: #9f1239"
216
+ <span class="material-symbols-outlined section-icon text-error-alt"
254
217
  >error</span
255
218
  >
256
219
  Exceptions
257
220
  </h2>
258
221
  <ol id="list-exceptions"></ol>
259
222
  </div>
260
- </div>
223
+ </main>
261
224
 
262
225
  <footer>
263
226
  <div class="powered-by">Generated by <span class="badge-tool">Snap Ally</span></div>
264
227
  <div>
265
- <span style="opacity: 0.7">&copy; <span id="year"></span> Snap Ally</span>
228
+ <span class="opacity-75">&copy; <span id="year"></span> Snap Ally</span>
266
229
  </div>
267
230
  </footer>
268
231
 
package/dist/utils/A11yTimeUtils.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Time utility functions for formatting test durations.
3
+ */
4
+ export declare class A11yTimeUtils {
5
+ /**
6
+ * Formats milliseconds into a human-readable duration string.
7
+ */
8
+ static formatDuration(ms: number): string;
9
+ /**
10
+ * Formats a Date object into a human-readable string.
11
+ */
12
+ static formatDate(date: Date): string;
13
+ }
package/dist/utils/A11yTimeUtils.js ADDED
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.A11yTimeUtils = void 0;
4
+ /**
5
+ * Time utility functions for formatting test durations.
6
+ */
7
+ class A11yTimeUtils {
8
+ /**
9
+ * Formats milliseconds into a human-readable duration string.
10
+ */
11
+ static formatDuration(ms) {
12
+ if (ms < 1000) {
13
+ return `${ms.toFixed(0)}ms`;
14
+ }
15
+ const seconds = ms / 1000;
16
+ if (seconds < 60) {
17
+ return `${seconds.toFixed(1)}s`;
18
+ }
19
+ const minutes = Math.floor(seconds / 60);
20
+ const remainingSeconds = seconds % 60;
21
+ return `${minutes}m ${remainingSeconds.toFixed(0)}s`;
22
+ }
23
+ /**
24
+ * Formats a Date object into a human-readable string.
25
+ */
26
+ static formatDate(date) {
27
+ const parts = new Intl.DateTimeFormat('en-US', {
28
+ day: '2-digit',
29
+ month: 'short',
30
+ year: 'numeric',
31
+ hour: '2-digit',
32
+ minute: '2-digit',
33
+ hour12: true,
34
+ }).formatToParts(date);
35
+ const get = (type) => { var _a; return ((_a = parts.find((p) => p.type === type)) === null || _a === void 0 ? void 0 : _a.value) || ''; };
36
+ // Standard US Format: MMM DD, YYYY, HH:MM AM/PM
37
+ return `${get('month')} ${get('day')}, ${get('year')}, ${get('hour')}:${get('minute')} ${get('dayPeriod').toUpperCase()}`;
38
+ }
39
+ }
40
+ exports.A11yTimeUtils = A11yTimeUtils;
package/dist/utils/TimeUtils.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Time utility functions for formatting test durations.
3
+ */
4
+ export declare class TimeUtils {
5
+ /**
6
+ * Formats milliseconds into a human-readable duration string.
7
+ */
8
+ static formatDuration(ms: number): string;
9
+ /**
10
+ * Formats a Date object into a human-readable string.
11
+ */
12
+ static formatDate(date: Date): string;
13
+ }
package/dist/utils/TimeUtils.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.TimeUtils = void 0;
4
+ /**
5
+ * Time utility functions for formatting test durations.
6
+ */
7
+ class TimeUtils {
8
+ /**
9
+ * Formats milliseconds into a human-readable duration string.
10
+ */
11
+ static formatDuration(ms) {
12
+ if (ms < 1000) {
13
+ return `${ms.toFixed(0)}ms`;
14
+ }
15
+ const seconds = ms / 1000;
16
+ if (seconds < 60) {
17
+ return `${seconds.toFixed(1)}s`;
18
+ }
19
+ const minutes = Math.floor(seconds / 60);
20
+ const remainingSeconds = seconds % 60;
21
+ return `${minutes}m ${remainingSeconds.toFixed(0)}s`;
22
+ }
23
+ /**
24
+ * Formats a Date object into a human-readable string.
25
+ */
26
+ static formatDate(date) {
27
+ const parts = new Intl.DateTimeFormat('en-US', {
28
+ day: '2-digit',
29
+ month: 'short',
30
+ year: 'numeric',
31
+ hour: '2-digit',
32
+ minute: '2-digit',
33
+ hour12: true,
34
+ }).formatToParts(date);
35
+ const get = (type) => { var _a; return ((_a = parts.find((p) => p.type === type)) === null || _a === void 0 ? void 0 : _a.value) || ''; };
36
+ return `${get('month')} ${get('day')}, ${get('year')}, ${get('hour')}:${get('minute')} ${get('dayPeriod').toUpperCase()}`;
37
+ }
38
+ }
39
+ exports.TimeUtils = TimeUtils;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "snap-ally",
3
- "version": "0.2.7-beta",
3
+ "version": "0.3.0",
4
4
  "description": "A custom Playwright reporter for Accessibility testing using Axe, with HTML reporting and Azure DevOps integration.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -48,4 +48,4 @@
48
48
  "prettier": "^3.8.1",
49
49
  "typescript": "^5.0.0"
50
50
  }
51
- }
51
+ }