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

This commit is contained in:
Kris 2021-10-26 20:46:53 -04:00 committed by GitHub
parent 50f4f43825
commit 6aa6275f3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 7 deletions

View File

@ -1,5 +1,5 @@
{{#each buttons as |b|}} {{#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}} {{#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> <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}} {{else if b.icon}}

View File

@ -11,18 +11,18 @@
<form id="login-form" method="post"> <form id="login-form" method="post">
<div id="credentials" class={{credentialsClass}}> <div id="credentials" class={{credentialsClass}}>
<div class="input-group"> <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> <label class="alt-placeholder" for="login-account-name">{{i18n "login.email_placeholder"}}</label>
{{#if showLoginWithEmailLink}} {{#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"}} {{i18n "email_login.login_link"}}
</a> </a>
{{/if}} {{/if}}
</div> </div>
<div class="input-group"> <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> <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 class="caps-lock-warning {{unless capsLockOn "hidden"}}">{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}</div>
</div> </div>
</div> </div>
@ -57,7 +57,8 @@
icon="unlock" icon="unlock"
label=loginButtonLabel label=loginButtonLabel
disabled=loginDisabled disabled=loginDisabled
class="btn btn-large btn-primary"}} class="btn btn-large btn-primary"
tabindex="2"}}
{{/unless}} {{/unless}}
{{#if showSignupLink}} {{#if showSignupLink}}
@ -65,7 +66,8 @@
class="btn-large" class="btn-large"
id="new-account-link" id="new-account-link"
action=(action "createAccount") action=(action "createAccount")
label="create_account.title"}} label="create_account.title"
tabindex="2"}}
{{/if}} {{/if}}
{{/if}} {{/if}}
{{conditional-loading-spinner condition=showSpinner size="small"}} {{conditional-loading-spinner condition=showSpinner size="small"}}