UX: change tabindex on login to skip email login link (discourse#14732)

SongJunxi2000 · Oct 27, 2021 · 6aa6275 · 6aa6275
1 parent 50f4f43
commit 6aa6275
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs b/app/assets/javascripts/discourse/app/templates/components/login-buttons.hbs
@@ -1,5 +1,5 @@
 {{#each buttons as |b|}}
-  <button type="button" class="btn btn-social {{b.name}}" {{action externalLogin b}} aria-label={{b.screenReaderTitle}}>
+  <button type="button" class="btn btn-social {{b.name}}" {{action externalLogin b}} aria-label={{b.screenReaderTitle}} tabindex="2">
     {{#if b.isGoogle}}
       <svg class="fa d-icon d-icon-custom-google-oauth2 svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
     {{else if b.icon}}

diff --git a/app/assets/javascripts/discourse/app/templates/modal/login.hbs b/app/assets/javascripts/discourse/app/templates/modal/login.hbs
@@ -11,18 +11,18 @@
         <form id="login-form" method="post">
           <div id="credentials" class={{credentialsClass}}>
             <div class="input-group">
-              {{input value=loginName type="email" id="login-account-name" class=(value-entered loginName) autocomplete="username" autocorrect="off" autocapitalize="off" disabled=showSecondFactor autofocus="autofocus"}}
+              {{input value=loginName type="email" id="login-account-name" class=(value-entered loginName) autocomplete="username" autocorrect="off" autocapitalize="off" disabled=showSecondFactor autofocus="autofocus" tabindex="1"}}
               <label class="alt-placeholder" for="login-account-name">{{i18n "login.email_placeholder"}}</label>
               {{#if showLoginWithEmailLink}}
-                <a href class={{if loginName "" "no-login-filled"}} id="email-login-link" {{action (unless processingEmailLink "emailLogin")}}>
+                <a href class={{if loginName "" "no-login-filled"}} tabindex="2"  id="email-login-link" {{action (unless processingEmailLink "emailLogin")}}>
                   {{i18n "email_login.login_link"}}
                 </a>
               {{/if}}
             </div>
             <div class="input-group">
-              {{input value=loginPassword type="password" class=(value-entered loginPassword) id="login-account-password" autocomplete="current-password" maxlength="200" capsLockOn=capsLockOn disabled=disableLoginFields}}
+              {{input value=loginPassword type="password" class=(value-entered loginPassword) id="login-account-password" autocomplete="current-password" maxlength="200" capsLockOn=capsLockOn disabled=disableLoginFields tabindex="1"}}
               <label class="alt-placeholder" for="login-account-password">{{i18n "login.password"}}</label>
-              <a href id="forgot-password-link" {{action "forgotPassword"}}>{{i18n "forgot_password.action"}}</a>
+              <a href id="forgot-password-link" tabindex="2" {{action "forgotPassword"}}>{{i18n "forgot_password.action"}}</a>
               <div class="caps-lock-warning {{unless capsLockOn "hidden"}}">{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}</div>
             </div>
           </div>
@@ -57,15 +57,17 @@
                 icon="unlock"
                 label=loginButtonLabel
                 disabled=loginDisabled
-                class="btn btn-large btn-primary"}}
+                class="btn btn-large btn-primary"
+                tabindex="2"}}
             {{/unless}}
 
             {{#if showSignupLink}}
               {{d-button
                 class="btn-large"
                 id="new-account-link"
                 action=(action "createAccount")
-                label="create_account.title"}}
+                label="create_account.title"
+                tabindex="2"}}
             {{/if}}
           {{/if}}
           {{conditional-loading-spinner condition=showSpinner size="small"}}