Merge pull request #17 from shayaan-khan-astero/main

Add autocomplete attributes for improved form accessibility + other changes

Author: azadshaikh

src/html/pages/authentication/basic/2-step-verification-code.astro

@@ -75,8 +75,8 @@ import ThemeToggler from '../../../components/common/theme-toggler.astro'
               />
             </div>
             <div class="form-check text-start mb-3">
-              <input class="form-check-input" type="checkbox" id="dontAskAgain" />
               <label class="form-check-label" for="dontAskAgain">
+                <input class="form-check-input" type="checkbox" id="dontAskAgain" />
                 Do not ask again on this device
               </label>
             </div>

src/html/pages/authentication/basic/2-step-verification.astro

@@ -47,6 +47,7 @@ import ThemeToggler from '../../../components/common/theme-toggler.astro'
                 id="phone"
                 placeholder="Enter your phone number"
                 pattern="[0-9]{10}"
+                autocomplete="tel"
                 required
               />
             </div>

src/html/pages/authentication/basic/forgot-password.astro

@@ -35,6 +35,7 @@ import { getPathPrefix } from '../../../../utils/path.js'
                 class="form-control"
                 id="email"
                 placeholder="m@example.com"
+                autocomplete="username"
                 required
               />
             </div>

src/html/pages/authentication/basic/lock-screen.astro

@@ -56,9 +56,10 @@ import { getPathPrefix, getAssetPrefix } from '../../../../utils/path.js'
                   class="form-control password-input"
                   id="password"
                   placeholder="Enter your password"
+                  autocomplete="current-password"
                   required
                 />
-                <button class="password-toggle" type="button">
+                <button class="password-toggle" type="button" aria-label="Show password">
                   <i class="ri-eye-off-line"></i>
                 </button>
               </div>

src/html/pages/authentication/basic/login.astro

@@ -29,6 +29,7 @@ import { getPathPrefix } from '../../../../utils/path.js'
                 class="form-control"
                 id="email"
                 placeholder="m@example.com"
+                autocomplete="username"
                 required
               />
             </div>
@@ -45,17 +46,19 @@ import { getPathPrefix } from '../../../../utils/path.js'
                   type="password"
                   class="form-control password-input"
                   id="password"
-                  placeholder="Enter your password"
+                  placeholder="Password"
+                  autocomplete="current-password"
                   required
                 />
-                <button class="password-toggle" type="button">
+                <button class="password-toggle" type="button" aria-label="Show password">
                   <i class="ri-eye-off-line"></i>
                 </button>
               </div>
             </div>
             <div class="mb-3 form-check">
-              <input type="checkbox" class="form-check-input" id="rememberMe" />
-              <label class="form-check-label" for="rememberMe"> Remember me </label>
+              <label class="form-check-label" for="rememberMe">
+                <input type="checkbox" class="form-check-input" id="rememberMe" /> Remember me
+              </label>
             </div>
             <button type="submit" class="btn btn-primary w-100 mb-3">Login</button>
           </form>

src/html/pages/authentication/basic/new-password.astro

@@ -36,12 +36,13 @@ import { getPathPrefix } from '../../../../utils/path.js'
                   type="password"
                   class="form-control password-input"
                   id="new-password"
-                  placeholder="Create a new password"
+                  placeholder="Password"
+                  autocomplete="new-password"
                   required
                   minlength="8"
                   title="Password must be at least 8 characters long"
                 />
-                <button class="password-toggle" type="button">
+                <button class="password-toggle" type="button" aria-label="Show password">
                   <i class="ri-eye-off-line"></i>
                 </button>
               </div>
@@ -53,10 +54,11 @@ import { getPathPrefix } from '../../../../utils/path.js'
                   type="password"
                   class="form-control password-input"
                   id="confirm-password"
-                  placeholder="Re-enter your new password"
+                  placeholder="Password"
+                  autocomplete="new-password"
                   required
                 />
-                <button class="password-toggle" type="button">
+                <button class="password-toggle" type="button" aria-label="Show password">
                   <i class="ri-eye-off-line"></i>
                 </button>
               </div>

src/html/pages/authentication/basic/register.astro

@@ -30,6 +30,7 @@ import { getPathPrefix } from '../../../../utils/path.js'
                 class="form-control"
                 id="fullName"
                 placeholder="John Doe"
+                autocomplete="name"
                 required
               />
             </div>
@@ -41,6 +42,7 @@ import { getPathPrefix } from '../../../../utils/path.js'
                 class="form-control"
                 id="email"
                 placeholder="m@example.com"
+                autocomplete="username"
                 required
               />
             </div>
@@ -52,10 +54,11 @@ import { getPathPrefix } from '../../../../utils/path.js'
                   type="password"
                   class="form-control password-input"
                   id="password"
-                  placeholder="Enter password"
+                  placeholder="Password"
+                  autocomplete="new-password"
                   required
                 />
-                <button class="password-toggle" type="button">
+                <button class="password-toggle" type="button" aria-label="Show password">
                   <i class="ri-eye-off-line"></i>
                 </button>
               </div>
@@ -68,10 +71,11 @@ import { getPathPrefix } from '../../../../utils/path.js'
                   type="password"
                   class="form-control password-input"
                   id="confirmPassword"
-                  placeholder="Confirm your password"
+                  placeholder="Password"
+                  autocomplete="new-password"
                   required
                 />
-                <button class="password-toggle" type="button">
+                <button class="password-toggle" type="button" aria-label="Show password">
                   <i class="ri-eye-off-line"></i>
                 </button>
               </div>

src/html/pages/authentication/basic/verify-email.astro

@@ -29,12 +29,12 @@ import { getPathPrefix } from '../../../../utils/path.js'
           <!-- Verification Code Form -->
           <form class="text-start mb-3">
             <div class="mb-3">
-              <label for="verification-code" class="form-label">Verification Code</label>
+              <label for="verification-code" class="form-label">Enter the verification code</label>
               <input
                 type="text"
                 class="form-control"
                 id="verification-code"
-                placeholder="Enter the verification code"
+                placeholder="Verification code"
                 required
                 maxlength="6"
                 pattern="[0-9]{6}"

src/html/pages/authentication/compact-split/2-step-verification-code.astro

@@ -81,8 +81,8 @@ import { getAssetPrefix } from '../../../../utils/path.js'
                   />
                 </div>
                 <div class="form-check text-start mb-3">
-                  <input class="form-check-input" type="checkbox" id="dontAskAgain" />
                   <label class="form-check-label" for="dontAskAgain">
+                    <input class="form-check-input" type="checkbox" id="dontAskAgain" />
                     Do not ask again on this device
                   </label>
                 </div>

src/html/pages/authentication/compact-split/2-step-verification.astro

@@ -53,6 +53,7 @@ import { getAssetPrefix } from '../../../../utils/path.js'
                     id="phone"
                     placeholder="Enter your phone number"
                     pattern="[0-9]{10}"
+                    autocomplete="tel"
                     required
                   />
                 </div>