From c8f75e461573251ef0b5b5b94b00a9670cdf0f96 Mon Sep 17 00:00:00 2001
From: Ralksta <16941050+ralksta@users.noreply.github.com>
Date: Fri, 27 Mar 2026 10:36:22 +0100
Subject: [PATCH] feat(a11y): enhance accessibility of password gate form (#46)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 components/PasswordGate.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/PasswordGate.tsx b/components/PasswordGate.tsx
index 0922b2e..2066616 100644
--- a/components/PasswordGate.tsx
+++ b/components/PasswordGate.tsx
@@ -51,6 +51,7 @@ export default function PasswordGate({ slug, title }: PasswordGateProps) {
 
         <form onSubmit={handleSubmit} className={styles.form}>
           <input
+            id="password-input"
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
@@ -59,13 +60,20 @@ export default function PasswordGate({ slug, title }: PasswordGateProps) {
             className={styles.input}
             autoFocus
             required
+            disabled={loading}
+            aria-invalid={!!error}
+            aria-describedby={error ? 'password-error' : undefined}
           />
           <button type="submit" className={styles.button} disabled={loading}>
             {loading ? 'Verifying…' : 'Enter'}
           </button>
         </form>
 
-        {error && <p className={styles.error}>{error}</p>}
+        {error && (
+          <p id="password-error" className={styles.error} role="alert" aria-live="polite">
+            {error}
+          </p>
+        )}
       </div>
     </div>
   );