a11y-hud 0.2.0 → 0.4.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 (10) hide show
  1. package/dist/bookmarklet.html +133 -0
  2. package/dist/index.cjs +535 -22
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +69 -1
  5. package/dist/index.d.ts +69 -1
  6. package/dist/index.js +526 -23
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.umd.js +536 -77
  9. package/dist/index.umd.js.map +1 -1
  10. package/package.json +2 -2
package/dist/bookmarklet.html ADDED
@@ -0,0 +1,133 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>a11y-hud &mdash; Bookmarklet</title>
7
+ <style>
8
+ :root {
9
+ --bg: #0d1117;
10
+ --fg: #e6edf3;
11
+ --muted: #7d8590;
12
+ --border: #30363d;
13
+ --accent: #1f6feb;
14
+ --accent-fg: #ffffff;
15
+ --accent-hover: #388bfd;
16
+ --code-bg: #161b22;
17
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
18
+ }
19
+ @media (prefers-color-scheme: light) {
20
+ :root {
21
+ --bg: #ffffff;
22
+ --fg: #1f2328;
23
+ --muted: #57606a;
24
+ --border: #d0d7de;
25
+ --accent: #0969da;
26
+ --accent-fg: #ffffff;
27
+ --accent-hover: #0860ca;
28
+ --code-bg: #f6f8fa;
29
+ }
30
+ }
31
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
32
+ body {
33
+ background: var(--bg);
34
+ color: var(--fg);
35
+ min-height: 100dvh;
36
+ display: grid;
37
+ place-items: center;
38
+ padding: 2rem 1rem;
39
+ line-height: 1.5;
40
+ }
41
+ .card {
42
+ max-width: 580px;
43
+ width: 100%;
44
+ border: 1px solid var(--border);
45
+ border-radius: 12px;
46
+ padding: 2.5rem;
47
+ }
48
+ .logo { font-size: 0.875rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 0.25rem; }
49
+ h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.375rem; }
50
+ .tagline { color: var(--muted); font-size: 1rem; margin-bottom: 2.5rem; }
51
+ .steps { display: flex; flex-direction: column; gap: 1.75rem; }
52
+ .step-num {
53
+ display: inline-flex; align-items: center; justify-content: center;
54
+ width: 1.5rem; height: 1.5rem; border-radius: 50%;
55
+ background: var(--border); color: var(--fg);
56
+ font-size: 0.75rem; font-weight: 700;
57
+ flex-shrink: 0; margin-right: 0.625rem;
58
+ }
59
+ .step-header { display: flex; align-items: center; font-weight: 600; margin-bottom: 0.625rem; }
60
+ .step-body { color: var(--muted); font-size: 0.9375rem; padding-left: 2.125rem; }
61
+ .bookmarklet-wrap { padding-left: 2.125rem; margin-top: 0.75rem; }
62
+ .bookmarklet-link {
63
+ display: inline-block;
64
+ background: var(--accent);
65
+ color: var(--accent-fg);
66
+ padding: 0.5rem 1rem;
67
+ border-radius: 6px;
68
+ text-decoration: none;
69
+ font-weight: 600;
70
+ font-size: 0.9375rem;
71
+ cursor: move;
72
+ user-select: none;
73
+ transition: background 0.15s;
74
+ }
75
+ .bookmarklet-link:hover { background: var(--accent-hover); }
76
+ .drag-hint { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted); }
77
+ hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
78
+ .version-row { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--muted); }
79
+ .version-row a { color: var(--fg); text-underline-offset: 3px; }
80
+ code {
81
+ background: var(--code-bg); border: 1px solid var(--border);
82
+ padding: 0.1em 0.4em; border-radius: 4px;
83
+ font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
84
+ font-size: 0.8125rem;
85
+ }
86
+ .footer { margin-top: 2rem; font-size: 0.8125rem; color: var(--muted); }
87
+ .footer a { color: inherit; text-underline-offset: 3px; }
88
+ </style>
89
+ </head>
90
+ <body>
91
+ <div class="card">
92
+ <div class="logo">a11y-hud</div>
93
+ <h1>Bookmarklet installer</h1>
94
+ <p class="tagline">Run axe-core accessibility audits on any page &mdash; no extensions required.</p>
95
+
96
+ <div class="steps">
97
+ <div class="step">
98
+ <div class="step-header">
99
+ <span class="step-num">1</span>
100
+ Drag to your bookmarks bar
101
+ </div>
102
+ <div class="bookmarklet-wrap">
103
+ <a class="bookmarklet-link" href="javascript:(function(){if(window.A11yHud){window.A11yHud.mount();return;}var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/a11y-hud@latest/dist/index.umd.js';s.onload=function(){window.A11yHud.mount();};document.head.appendChild(s);})()">a11y-hud</a>
104
+ <p class="drag-hint">Drag the button above to your bookmarks bar, or right-click &rarr; &ldquo;Bookmark this link&rdquo;.</p>
105
+ </div>
106
+ </div>
107
+
108
+ <div class="step">
109
+ <div class="step-header">
110
+ <span class="step-num">2</span>
111
+ Click it on any page
112
+ </div>
113
+ <p class="step-body">
114
+ Navigate to any web page and click the bookmark.
115
+ The a11y-hud overlay will appear with a full accessibility scan report.
116
+ </p>
117
+ </div>
118
+ </div>
119
+
120
+ <hr>
121
+
122
+ <div class="version-row">
123
+ <span>This installer uses <strong>latest</strong>. To pin a specific release:</span>
124
+ <a href="javascript:(function(){if(window.A11yHud){window.A11yHud.mount();return;}var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/a11y-hud@0.4.0/dist/index.umd.js';s.onload=function(){window.A11yHud.mount();};document.head.appendChild(s);})()" title="Bookmarklet pinned to v0.4.0">Pinned to v0.4.0</a>
125
+ </div>
126
+
127
+ <div class="footer">
128
+ <a href="https://github.com/arthurvasconcelos/a11y-hud">github.com/arthurvasconcelos/a11y-hud</a>
129
+ &nbsp;&middot;&nbsp;MIT licence
130
+ </div>
131
+ </div>
132
+ </body>
133
+ </html>