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/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>
67
+
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>
102
74
 
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
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,32 +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
- <span class="material-symbols-outlined success-hero-icon">check_circle</span>
200
- <h3 class="success-hero-title">Compliance Verified</h3>
201
- <p class="success-hero-desc">
202
- Excellent! No accessibility violations were detected for this target resource.
203
- </p>
204
- </div>
205
-
206
- <!-- Accessibility Errors -->
207
- <div class="card error-card" id="card-a11y-errors" style="display: none">
208
- <h2 class="violations-title">
209
- <span class="material-symbols-outlined section-icon" style="color: #9f1239"
210
- >accessibility_new</span
211
- >
212
- Accessibility Violations
213
- </h2>
214
- <div class="violations-container" id="list-a11y-errors"></div>
215
- </div>
216
187
  <template id="a11y-error-template">
217
188
  <div class="violation-item">
218
189
  <div class="violation-header">
@@ -220,12 +191,12 @@
220
191
  <span class="sev-badge"></span>
221
192
  </div>
222
193
  <div class="help-text"></div>
223
- <div class="desc-text" style="display: none"></div>
194
+ <div class="desc-text hidden"></div>
224
195
 
225
196
  <div class="instance-grid"></div>
226
197
 
227
198
  <div class="occ-row">
228
- <span class="material-symbols-outlined" style="font-size: 16px">tag</span>
199
+ <span class="material-symbols-outlined fs-6">tag</span>
229
200
  <span>Occurrences: <strong class="occ-count"></strong></span>
230
201
  </div>
231
202
  </div>
@@ -240,21 +211,21 @@
240
211
  </template>
241
212
 
242
213
  <!-- Exceptions -->
243
- <div class="card error-card" id="card-exceptions" style="display: none">
214
+ <div class="card error-card hidden" id="card-exceptions">
244
215
  <h2 class="exceptions-title">
245
- <span class="material-symbols-outlined section-icon" style="color: #9f1239"
216
+ <span class="material-symbols-outlined section-icon text-error-alt"
246
217
  >error</span
247
218
  >
248
219
  Exceptions
249
220
  </h2>
250
221
  <ol id="list-exceptions"></ol>
251
222
  </div>
252
- </div>
223
+ </main>
253
224
 
254
225
  <footer>
255
226
  <div class="powered-by">Generated by <span class="badge-tool">Snap Ally</span></div>
256
227
  <div>
257
- <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>
258
229
  </div>
259
230
  </footer>
260
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.5-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
+ }