a11y & SEO: fix source files - aria-labels, focus management, canonical, WebApplication schema, focus-visible
This commit is contained in:
parent
17c1f00e2b
commit
9095175141
4 changed files with 23 additions and 12 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<!-- Signup Modal -->
|
||||
<div class="modal-overlay" id="signupModal" role="dialog" aria-label="Sign up for API key">
|
||||
<div class="modal-overlay" id="signupModal" role="dialog" aria-modal="true" aria-label="Sign up for API key">
|
||||
<div class="modal">
|
||||
<button class="close" id="btn-close-signup" aria-label="Close">×</button>
|
||||
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="signup-error" id="signupError"></div>
|
||||
<label for="signupEmail" class="sr-only">Email address</label>
|
||||
<input type="email" id="signupEmail" placeholder="your.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
|
||||
<button class="btn btn-primary" style="width:100%" id="signupBtn">Generate API Key →</button>
|
||||
<button class="btn btn-primary" style="width:100%" id="signupBtn" aria-label="Generate API key">Generate API Key →</button>
|
||||
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">100 free PDFs/month • All endpoints included<br><a href="#" class="open-recover" style="color:var(--muted)">Lost your API key? Recover it →</a></p>
|
||||
</div>
|
||||
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<div class="signup-error" id="verifyError"></div>
|
||||
<label for="verifyCode" class="sr-only">Verification code</label>
|
||||
<input type="text" id="verifyCode" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
|
||||
<button class="btn btn-primary" style="width:100%" id="verifyBtn">Verify →</button>
|
||||
<button class="btn btn-primary" style="width:100%" id="verifyBtn" aria-label="Verify code">Verify →</button>
|
||||
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
<div style="background:var(--bg);border:1px solid var(--accent);border-radius:8px;padding:14px;font-family:monospace;font-size:0.82rem;word-break:break-all;margin:16px 0;position:relative;">
|
||||
<span id="apiKeyText"></span>
|
||||
<button onclick="copyKey()" id="copyBtn" style="position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;">Copy</button>
|
||||
<button onclick="copyKey()" id="copyBtn" aria-label="Copy API key" style="position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;">Copy</button>
|
||||
</div>
|
||||
<p style="margin-top:20px;color:var(--muted);font-size:0.9rem;">100 free PDFs/month • <a href="/docs">Read the docs →</a></p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -219,5 +219,5 @@ html, body {
|
|||
}
|
||||
|
||||
/* Focus-visible for accessibility */
|
||||
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
.btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue