Skip to content

Commit

Permalink
Merge pull request #32 from RossRogers/master
Browse files Browse the repository at this point in the history 
Fix form tab navigation with tabindex="0"
  • Loading branch information
@cooperlyt
cooperlyt authored Mar 13, 2023
2 parents 0667a4f + ad7d685 commit 9a98b2e
Show file tree
Hide file tree
Showing 7 changed files with 27 additions and 27 deletions.
2 changes: 1 addition & 1 deletion ...ak-phone-provider.resources/src/main/resources/theme/phone/login/login-reset-password.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
class="${properties.kcInputClass!}" autocomplete="off"/>
</div>
<div class="col-xs-4" style="padding: 0 0 0 5px">
<input tabindex="2" style="height: 36px"
<input tabindex="0" style="height: 36px"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
type="button" v-model="sendButtonText"
:disabled='sendButtonText !== initSendButtonText'
Expand Down
8 changes: 4 additions & 4 deletions ...ak-phone-provider.resources/src/main/resources/theme/phone/login/login-sms-otp-config.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@
class="${properties.kcLabelClass!}">${msg("phoneNumber")}</label>
</div>
<div class="col-xs-8" style="padding: 0 5px 0 0">
<input tabindex="1" id="phoneNumber" class="${properties.kcInputClass!}"
<input tabindex="0" id="phoneNumber" class="${properties.kcInputClass!}"
name="phoneNumber" type="tel" <#if !phoneNumber??>autofocus</#if>
value="${phoneNumber!''}"
autocomplete="mobile tel"/>
</div>
<div class="col-xs-4" style="padding: 0 0 0 5px">
<input tabindex="2" style="height: 36px"
<input tabindex="0" style="height: 36px"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
v-model="sendButtonText" :disabled='sendButtonText !== initSendButtonText'
v-on:click="sendVerificationCode()"
Expand All @@ -41,14 +41,14 @@
</div>
<div class="${properties.kcFormGroupClass!} row">
<label for="code" class="${properties.kcLabelClass!}">${msg("verificationCode")}</label>
<input tabindex="3" id="code" class="${properties.kcInputClass!}" name="code"
<input tabindex="0" id="code" class="${properties.kcInputClass!}" name="code"
type="text" <#if phoneNumber??>autofocus</#if>
autocomplete="off"/>
</div>
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
<input type="hidden" id="id-hidden-input" name="credentialId"
<#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<input tabindex="4"
<input tabindex="0"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
:disabled='sendButtonText === initSendButtonText'
name="save" id="kc-login" type="submit" value="${msg("doSubmit")}"/>
Expand Down
6 changes: 3 additions & 3 deletions keycloak-phone-provider.resources/src/main/resources/theme/phone/login/login-sms-otp.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@
class="${properties.kcLabelClass!}">${msg("authenticationCode")}</label>
</div>
<div class="col-xs-8" style="padding: 0 5px 0 0">
<input tabindex="1" id="code" class="${properties.kcInputClass!}" name="code"
<input tabindex="0" id="code" class="${properties.kcInputClass!}" name="code"
type="text" autofocus
autocomplete="off"/>
</div>
<div class="col-xs-4" style="padding: 0 0 0 5px">
<input tabindex="2" style="height: 36px"
<input tabindex="0" style="height: 36px"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
type="button" v-model="sendButtonText"
:disabled='sendButtonText !== initSendButtonText'
Expand All @@ -42,7 +42,7 @@
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
<input type="hidden" id="id-hidden-input" name="credentialId"
<#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<input tabindex="2"
<input tabindex="0"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
name="save" id="kc-login" type="submit" value="${msg("doSubmit")}"/>
</div>
Expand Down
8 changes: 4 additions & 4 deletions ...one-provider.resources/src/main/resources/theme/phone/login/login-update-phone-number.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@
class="${properties.kcLabelClass!}">${msg("phoneNumber")}</label>
</div>
<div class="col-xs-8" style="padding: 0 5px 0 0">
<input tabindex="1" id="phoneNumber" class="${properties.kcInputClass!}"
<input tabindex="0" id="phoneNumber" class="${properties.kcInputClass!}"
name="phoneNumber" type="tel" <#if !phoneNumber??>autofocus</#if>
value="${phoneNumber!''}"
autocomplete="mobile tel"/>
</div>
<div class="col-xs-4" style="padding: 0 0 0 5px">
<input tabindex="2" style="height: 36px"
<input tabindex="0" style="height: 36px"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
v-model="sendButtonText" :disabled='sendButtonText !== initSendButtonText'
v-on:click="sendVerificationCode()"
Expand All @@ -40,14 +40,14 @@
</div>
<div class="${properties.kcFormGroupClass!} row">
<label for="code" class="${properties.kcLabelClass!}">${msg("verificationCode")}</label>
<input tabindex="3" id="code" class="${properties.kcInputClass!}" name="code"
<input tabindex="0" id="code" class="${properties.kcInputClass!}" name="code"
type="text" <#if phoneNumber??>autofocus</#if>
autocomplete="off"/>
</div>
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
<input type="hidden" id="id-hidden-input" name="credentialId"
<#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<input tabindex="4"
<input tabindex="0"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
name="save" id="kc-login" type="submit" value="${msg("doSubmit")}"/>
</div>
Expand Down
20 changes: 10 additions & 10 deletions keycloak-phone-provider.resources/src/main/resources/theme/phone/login/login.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
</#if>
</label>

<input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off"
<input tabindex="0" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
/>

Expand All @@ -87,7 +87,7 @@
<div class="${properties.kcFormGroupClass!}">
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>

<input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off"
<input tabindex="0" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
/>

Expand All @@ -106,17 +106,17 @@
<div class="checkbox">
<label>
<#if login.rememberMe??>
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
<input tabindex="0" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
<#else>
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
<input tabindex="0" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
</#if>
</label>
</div>
</#if>
</div>
<div class="${properties.kcFormOptionsWrapperClass!}">
<#if realm.resetPasswordAllowed>
<span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
<span><a tabindex="0" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
</#if>
</div>
</div>
Expand All @@ -128,7 +128,7 @@
<div v-if="phoneActivated">
<div class="${properties.kcFormGroupClass!}">
<label for="phoneNumber" class="${properties.kcLabelClass!}">${msg("phoneNumber")}</label>
<input tabindex="1" type="text" id="phoneNumber" name="phoneNumber" v-model="phoneNumber"
<input tabindex="0" type="text" id="phoneNumber" name="phoneNumber" v-model="phoneNumber"
aria-invalid="<#if messagesPerField.existsError('code','phoneNumber')>true</#if>"
class="${properties.kcInputClass!}" autofocus/>
<#if messagesPerField.existsError('code','phoneNumber')>
Expand All @@ -143,13 +143,13 @@
<label for="code" class="${properties.kcLabelClass!}">${msg("verificationCode")}</label>
</div>
<div class="col-xs-8" style="padding: 0 5px 0 0">
<input tabindex="2" type="text" id="code" name="code"
<input tabindex="0" type="text" id="code" name="code"
aria-invalid="<#if messagesPerField.existsError('code','phoneNumber')>true</#if>"
class="${properties.kcInputClass!}" autocomplete="off"/>

</div>
<div class="col-xs-4" style="padding: 0 0 0 5px">
<input tabindex="2" style="height: 36px"
<input tabindex="0" style="height: 36px"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
type="button" v-model="sendButtonText" :disabled='sendButtonText !== initSendButtonText' v-on:click="sendVerificationCode()"/>
</div>
Expand All @@ -160,7 +160,7 @@

<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
<input tabindex="0" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
</div>

</form>
Expand Down Expand Up @@ -222,7 +222,7 @@
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration-container">
<div id="kc-registration">
<span>${msg("noAccount")} <a tabindex="6"
<span>${msg("noAccount")} <a tabindex="0"
href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions keycloak-phone-provider.resources/src/main/resources/theme/phone/login/register.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
<label for="phoneNumber" class="${properties.kcLabelClass!}">${msg("phoneNumber")}</label>
</div>
<div class="${properties.kcInputWrapperClass!}">
<input tabindex="1" id="phoneNumber" class="${properties.kcInputClass!}"
<input tabindex="0" id="phoneNumber" class="${properties.kcInputClass!}"
name="phoneNumber" id="phoneNumber" type="tel"
aria-invalid="<#if messagesPerField.existsError('phoneNumber')>true</#if>"
autofocus
Expand All @@ -164,7 +164,7 @@
<label for="registerCode" class="${properties.kcLabelClass!}">${msg("verificationCode")}</label>
</div>
<div class="col-xs-8" style="padding: 0 5px 0 0">
<input tabindex="3" id="code" name="code"
<input tabindex="0" id="code" name="code"
aria-invalid="<#if messagesPerField.existsError('registerCode')>true</#if>"
type="text" class="${properties.kcInputClass!}"
autocomplete="off"/>
Expand All @@ -175,7 +175,7 @@
</#if>
</div>
<div class="col-xs-4" style="padding: 0 0 0 5px">
<input tabindex="2" style="height: 36px"
<input tabindex="0" style="height: 36px"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
v-model="sendButtonText" :disabled='sendButtonText !== initSendButtonText'
v-on:click="sendVerificationCode()"
Expand Down
4 changes: 2 additions & 2 deletions .../cc/coopersoft/keycloak/phone/authentication/forms/RegistrationPhoneVerificationCode.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,8 @@ public boolean isConfigurable() {
.property().name(CONFIG_OPT_CREDENTIAL)
.type(BOOLEAN_TYPE)
.defaultValue(false)
.label("Create a phone OPT credential")
.helpText("Create a phone OPT credential.")
.label("Create a phone OTP credential")
.helpText("Create a phone OTP credential.")
.add()
.build();
}
Expand Down

0 comments on commit 9a98b2e

Please sign in to comment.