@keycloakify/angular 0.0.1-rc.17 → 0.0.1-rc.18

package/src/login/pages/login/login.component.html

@@ -48,19 +48,19 @@
                     @for (provider of social?.providers; track provider.alias; let idx = $index) {
                         <li>
                             <a
+                                type="button"
                                 [id]="provider.alias"
                                 [kcClass]="{
                                     kcFormSocialAccountListButtonClass: true,
                                     kcFormSocialAccountGridItem: (social?.providers?.length ?? 0) > 3
                                 }"
-                                type="button"
                                 [href]="provider.loginUrl"
                             >
                                 @if (provider.iconClasses) {
                                     <i
+                                        aria-hidden="true"
                                         [ngClass]="provider.iconClasses"
                                         [kcClass]="'kcCommonLogoIdP'"
-                                        aria-hidden="true"
                                     ></i>
                                 }
                                 <span
@@ -84,9 +84,9 @@
                 @if (realm?.password) {
                     <form
                         id="kc-form-login"
-                        (onSubmit)="isLoginButtonDisabled.set(true)"
-                        [action]="url?.loginAction"
                         method="post"
+                        [action]="url?.loginAction"
+                        (onSubmit)="isLoginButtonDisabled.set(true)"
                     >
                         @if (!usernameHidden) {
                             <div [kcClass]="'kcFormGroupClass'">
@@ -105,18 +105,18 @@
                                 <input
                                     tabindex="2"
                                     id="username"
-                                    [kcClass]="'kcInputClass'"
                                     name="username"
                                     type="text"
                                     autofocus
+                                    [kcClass]="'kcInputClass'"
                                     [defaultValue]="login?.username || ''"
                                     [attr.aria-invalid]="messagesPerField?.existsError('username', 'password')"
                                 />
                                 @if (messagesPerField?.existsError('username', 'password')) {
                                     <span
                                         id="input-error"
-                                        [kcClass]="'kcInputErrorMessageClass'"
                                         aria-live="polite"
+                                        [kcClass]="'kcInputErrorMessageClass'"
                                         [innerHTML]="messagesPerField.getFirstError('username', 'password') | kcSanitize: 'html'"
                                     >
                                     </span>
@@ -136,18 +136,18 @@
                                 <input
                                     tabindex="3"
                                     id="password"
-                                    [kcClass]="'kcInputClass'"
                                     name="password"
                                     type="password"
                                     autocomplete="off"
+                                    [kcClass]="'kcInputClass'"
                                     [attr.aria-invalid]="messagesPerField.existsError('username', 'password')"
                                 />
                             </kc-password-wrapper>
                             @if (usernameHidden && messagesPerField?.existsError('username', 'password')) {
                                 <span
                                     id="input-error"
-                                    [kcClass]="'kcInputErrorMessageClass'"
                                     aria-live="polite"
+                                    [kcClass]="'kcInputErrorMessageClass'"
                                     [innerHTML]="messagesPerField.getFirstError('username', 'password') | kcSanitize: 'html'"
                                 >
                                 </span>
@@ -196,10 +196,10 @@
                             />
                             <input
                                 tabindex="7"
-                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                                 name="login"
                                 id="kc-login"
                                 type="submit"
+                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                                 [value]="i18n.msgStr('doLogIn')"
                                 [disabled]="isLoginButtonDisabled()"
                             />

package/src/login/pages/login-config-totp/login-config-totp.component.html

@@ -31,8 +31,8 @@
                     </p>
                     <p>
                         <a
-                            [href]="totp.qrUrl"
                             id="mode-barcode"
+                            [href]="totp.qrUrl"
                         >
                             {{ i18n.msgStr('loginTotpScanBarcode') }}
                         </a>
@@ -69,14 +69,14 @@
                     <p>{{ i18n.msgStr('loginTotpStep2') }}</p>
                     <img
                         id="kc-totp-secret-qr-code"
-                        [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
                         alt="Figure: Barcode"
+                        [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
                     />
                     <br />
                     <p>
                         <a
-                            [href]="totp.manualUrl"
                             id="mode-manual"
+                            [href]="totp.manualUrl"
                         >
                             {{ i18n.msgStr('loginTotpUnableToScan') }}
                         </a>
@@ -89,10 +89,10 @@
             </li>
         </ol>
         <form
-            [action]="url.loginAction"
-            [kcClass]="'kcFormClass'"
             id="kc-totp-settings-form"
             method="post"
+            [action]="url.loginAction"
+            [kcClass]="'kcFormClass'"
         >
             <div [kcClass]="'kcFormGroupClass'">
                 <div [kcClass]="'kcInputWrapperClass'">
@@ -116,8 +116,8 @@
                     @if (messagesPerField.existsError('totp')) {
                         <span
                             id="input-error-otp-code"
-                            [kcClass]="'kcInputErrorMessageClass'"
                             aria-live="polite"
+                            [kcClass]="'kcInputErrorMessageClass'"
                             [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
                         ></span>
                     }
@@ -160,8 +160,8 @@
                     @if (messagesPerField.existsError('userLabel')) {
                         <span
                             id="input-error-otp-label"
-                            [kcClass]="'kcInputErrorMessageClass'"
                             aria-live="polite"
+                            [kcClass]="'kcInputErrorMessageClass'"
                             [innerHTML]="messagesPerField.get('userLabel') | kcSanitize: 'html'"
                         ></span>
                     }
@@ -174,15 +174,15 @@
             @if (isAppInitiatedAction) {
                 <input
                     type="submit"
-                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     id="saveTOTPBtn"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     [value]="i18n.msgStr('doSubmit')"
                 />
                 <button
                     type="submit"
-                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass']"
                     id="cancelTOTPBtn"
                     name="cancel-aia"
+                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass']"
                     [value]="true"
                 >
                     {{ i18n.msgStr('doCancel') }}
@@ -190,8 +190,8 @@
             } @else {
                 <input
                     type="submit"
-                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     id="saveTOTPBtn"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     [value]="i18n.msgStr('doSubmit')"
                 />
             }

package/src/login/pages/login-idp-link-confirm/login-idp-link-confirm.component.html

@@ -13,25 +13,25 @@
     <ng-container content>
         <form
             id="kc-register-form"
-            [action]="url.loginAction"
             method="post"
+            [action]="url.loginAction"
         >
             <div [kcClass]="'kcFormGroupClass'">
                 <button
                     type="submit"
-                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                     name="submitAction"
                     id="updateProfile"
                     value="updateProfile"
+                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                 >
                     {{ i18n.msgStr('confirmLinkIdpReviewProfile') }}
                 </button>
                 <button
                     type="submit"
-                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                     name="submitAction"
                     id="linkAccount"
                     value="linkAccount"
+                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                 >
                     {{ i18n.msgStr('confirmLinkIdpContinue', idpAlias) }}
                 </button>

package/src/login/pages/login-idp-link-confirm-override/login-idp-link-confirm-override.component.html

@@ -14,8 +14,8 @@
     <ng-container content>
         <form
             id="kc-register-form"
-            [action]="url.loginAction"
             method="post"
+            [action]="url.loginAction"
         >
             {{ i18n.msgStr('pageExpiredMsg1') }}
             <a
@@ -28,10 +28,10 @@
             <br />
             <button
                 type="submit"
-                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                 name="submitAction"
                 id="confirmOverride"
                 value="confirmOverride"
+                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
             >
                 {{ i18n.msgStr('confirmOverrideIdpContinue', idpDisplayName) }}
             </button>

package/src/login/pages/login-oauth-grant/login-oauth-grant.component.html

@@ -11,8 +11,8 @@
     <ng-container headerNode>
         @if (client.attributes['logoUri']) {
             <img
-                [src]="client.attributes['logoUri']"
                 alt=""
+                [src]="client.attributes['logoUri']"
             />
         }
         <p>
@@ -49,8 +49,8 @@
                     @if (client.attributes['policyUri']) {
                         {{ i18n.msgStr('oauthGrantReview') }}
                         <a
-                            [href]="client.attributes['policyUri']"
                             target="_blank"
+                            [href]="client.attributes['policyUri']"
                         >
                             {{ i18n.msgStr('oauthGrantPolicy') }}
                         </a>
@@ -59,8 +59,8 @@
             }
             <form
                 class="form-actions"
-                [action]="url.oauthAction"
                 method="post"
+                [action]="url.oauthAction"
             >
                 <input
                     type="hidden"
@@ -75,13 +75,13 @@
                     <div id="kc-form-buttons">
                         <div [kcClass]="'kcFormButtonsWrapperClass'">
                             <input
-                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                                 type="submit"
+                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                                 [value]="i18n.msgStr('doYes')"
                             />
                             <input
-                                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                                 type="submit"
+                                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                                 [value]="i18n.msgStr('doNo')"
                             />
                         </div>

package/src/login/pages/login-oauth2-device-verify-user-code/login-oauth2-device-verify-user-code.component.html

@@ -12,9 +12,9 @@
     <ng-container content>
         <form
             id="kc-user-verify-device-user-code-form"
+            method="post"
             [kcClass]="'kcFormClass'"
             [action]="url.oauth2DeviceVerificationAction"
-            method="post"
         >
             <div [kcClass]="'kcFormGroupClass'">
                 <div [kcClass]="'kcLabelWrapperClass'">
@@ -32,8 +32,8 @@
                         name="device_user_code"
                         autoComplete="off"
                         type="text"
-                        [kcClass]="'kcInputClass'"
                         autofocus
+                        [kcClass]="'kcInputClass'"
                     />
                 </div>
             </div>
@@ -51,8 +51,8 @@
                 >
                     <div [kcClass]="'kcFormButtonsWrapperClass'">
                         <input
-                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                             type="submit"
+                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                             [value]="i18n.msgStr('doSubmit')"
                         />
                     </div>

package/src/login/pages/login-otp/login-otp.component.html

@@ -14,9 +14,9 @@
     <ng-container content>
         <form
             id="kc-otp-login-form"
+            method="post"
             [kcClass]="['kcFormClass']"
             [action]="url.loginAction"
-            method="post"
         >
             @if (otpLogin.userOtpCredentials.length > 1) {
                 <div [kcClass]="'kcFormGroupClass'">
@@ -24,10 +24,10 @@
                         @for (otpCredential of otpLogin.userOtpCredentials; track otpCredential; let i = $index) {
                             <ng-container>
                                 <input
-                                    [id]="'kc-otp-credential-' + i"
-                                    [kcClass]="'kcLoginOTPListClass'"
                                     type="radio"
                                     name="selectedCredentialId"
+                                    [id]="'kc-otp-credential-' + i"
+                                    [kcClass]="'kcLoginOTPListClass'"
                                     [value]="otpCredential.id"
                                     [checked]="otpCredential.id === otpLogin.selectedCredentialId"
                                 />
@@ -39,8 +39,8 @@
                                     <span [kcClass]="'kcLoginOTPListItemHeaderClass'">
                                         <span [kcClass]="'kcLoginOTPListItemIconBodyClass'">
                                             <i
-                                                [kcClass]="'kcLoginOTPListItemIconClass'"
                                                 aria-hidden="true"
+                                                [kcClass]="'kcLoginOTPListItemIconClass'"
                                             ></i>
                                         </span>
                                         <span [kcClass]="'kcLoginOTPListItemTitleClass'">{{ otpCredential.userLabel }}</span>
@@ -66,15 +66,15 @@
                         name="otp"
                         autoComplete="off"
                         type="text"
-                        [kcClass]="'kcInputClass'"
                         autoFocus
+                        [kcClass]="'kcInputClass'"
                         [attr.aria-invalid]="messagesPerField.existsError('totp')"
                     />
                     @if (messagesPerField.existsError('totp')) {
                         <span
                             id="input-error-otp-code"
-                            [kcClass]="['kcInputErrorMessageClass']"
                             aria-live="polite"
+                            [kcClass]="['kcInputErrorMessageClass']"
                             [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
                         ></span>
                     }
@@ -90,10 +90,10 @@
                     [kcClass]="'kcFormButtonsClass'"
                 >
                     <input
-                        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         name="login"
                         id="kc-login"
                         type="submit"
+                        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         [value]="i18n.msgStr('doLogIn')"
                     />
                 </div>

package/src/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component.html

@@ -29,8 +29,8 @@
     <ng-container content>
         <form
             id="webauth"
-            [action]="url.loginAction"
             method="post"
+            [action]="url.loginAction"
         >
             <input
                 type="hidden"
@@ -64,9 +64,9 @@
             />
         </form>
         <div
-            [kcClass]="'kcFormGroupClass'"
             no-bottom-margin="true"
             style="margin-bottom: 0"
+            [kcClass]="'kcFormGroupClass'"
         >
             @if (authenticators !== undefined && authenticators.authenticators.length !== 0) {
                 <form
@@ -97,9 +97,9 @@
                                 [kcClass]="'kcSelectAuthListItemClass'"
                             >
                                 <i
+                                    aria-hidden="true"
                                     [ngClass]="selectAuthListItemIconClass(authenticator.transports.iconClass)"
                                     [kcClass]="'kcCommonLogoIdP'"
-                                    aria-hidden="true"
                                 ></i>
                                 <div [kcClass]="'kcSelectAuthListItemBodyClass'">
                                     <div
@@ -150,9 +150,9 @@
                 @if (realm.password) {
                     <form
                         id="kc-form-passkey"
-                        [action]="url.loginAction"
                         method="post"
                         style="display: none"
+                        [action]="url.loginAction"
                     >
                         @if (!usernameHidden) {
                             <div [kcClass]="'kcFormGroupClass'">
@@ -165,19 +165,19 @@
                                 <input
                                     tabIndex="1"
                                     id="username"
-                                    [attr.aria-invalid]="messagesPerField.existsError('username')"
-                                    [kcClass]="'kcInputClass'"
                                     name="username"
-                                    [value]="login.username ?? ''"
                                     type="text"
                                     autoFocus
                                     autoComplete="off"
+                                    [attr.aria-invalid]="messagesPerField.existsError('username')"
+                                    [kcClass]="'kcInputClass'"
+                                    [value]="login.username ?? ''"
                                 />
                                 @if (messagesPerField.existsError('username')) {
                                     <span
                                         id="input-error-username"
-                                        [kcClass]="'kcInputErrorMessageClass'"
                                         aria-live="polite"
+                                        [kcClass]="'kcInputErrorMessageClass'"
                                     >
                                         {{ messagesPerField.get('username') }}
                                     </span>
@@ -187,8 +187,8 @@
                     </form>
                     <div
                         id="kc-form-passkey-button"
-                        [kcClass]="'kcFormButtonsClass'"
                         style="display: none"
+                        [kcClass]="'kcFormButtonsClass'"
                     >
                         <input
                             id="authButtonId"

package/src/login/pages/login-password/login-password.component.html

@@ -16,13 +16,13 @@
             <div id="kc-form-wrapper">
                 <form
                     id="kc-form-login"
-                    (onSubmit)="isLoginButtonDisabled.set(true)"
-                    [action]="url?.loginAction"
                     method="post"
+                    [action]="url?.loginAction"
+                    (onSubmit)="isLoginButtonDisabled.set(true)"
                 >
                     <div
-                        [kcClass]="'kcFormGroupClass'"
                         class="no-bottom-margin"
+                        [kcClass]="'kcFormGroupClass'"
                     >
                         <hr />
                         <label
@@ -36,19 +36,19 @@
                                 type="password"
                                 id="password"
                                 name="password"
+                                aria-describedby="input-error-password"
                                 [kcClass]="'kcInputClass'"
                                 [required]="true"
                                 [autofocus]="true"
                                 [tabindex]="1"
-                                aria-describedby="input-error-password"
                             />
                         </kc-password-wrapper>
 
                         @if (messagesPerField.existsError('password')) {
                             <span
                                 id="input-error-password"
-                                [kcClass]="'kcInputErrorMessageClass'"
                                 aria-live="polite"
+                                [kcClass]="'kcInputErrorMessageClass'"
                                 [innerHTML]="messagesPerField.getFirstError('password') | kcSanitize: 'html'"
                             >
                             </span>

package/src/login/pages/login-recovery-authn-code-config/login-recovery-authn-code-config.component.html

@@ -13,9 +13,9 @@
 
     <ng-container content>
         <div
-            [kcClass]="'kcRecoveryCodesWarning'"
             class="pf-c-alert pf-m-warning pf-m-inline"
             aria-label="Warning alert"
+            [kcClass]="'kcRecoveryCodesWarning'"
         >
             <div class="pf-c-alert__icon">
                 <i
@@ -83,15 +83,15 @@
         <!-- confirmation checkbox -->
 
         <div
-            [kcClass]="'kcFormOptionsClass'"
             class="checkbox"
+            [kcClass]="'kcFormOptionsClass'"
         >
             <label for="kcRecoveryCodesConfirmationCheck">
                 <input
-                    [kcClass]="'kcCheckInputClass'"
                     type="checkbox"
                     id="kcRecoveryCodesConfirmationCheck"
                     name="kcRecoveryCodesConfirmationCheck"
+                    [kcClass]="'kcCheckInputClass'"
                     [checked]="toggleRecoveryCodesConfirmation()"
                     (change)="toggleRecoveryCodesConfirmation.set($any($event.target).checked)"
                 />
@@ -100,10 +100,10 @@
         </div>
 
         <form
-            [action]="kcContext.url.loginAction"
-            [kcClass]="'kcFormGroupClass'"
             id="kc-recovery-codes-settings-form"
             method="post"
+            [action]="kcContext.url.loginAction"
+            [kcClass]="'kcFormGroupClass'"
         >
             <input
                 type="hidden"
@@ -122,30 +122,30 @@
                 [value]="i18n.msgStr('recovery-codes-label-default')"
             />
 
-            <kc-logout-other-sessions></kc-logout-other-sessions>
+            <kc-logout-other-sessions />
 
             @if (isAppInitiatedAction) {
                 <input
                     type="submit"
-                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     id="saveRecoveryAuthnCodesBtn"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     [value]="i18n.msgStr('recovery-codes-action-complete')"
                     [disabled]="!toggleRecoveryCodesConfirmation()"
                 />
                 <button
                     type="submit"
-                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                     id="cancelRecoveryAuthnCodesBtn"
                     name="cancel-aia"
                     value="true"
+                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                 >
                     {{ i18n.msgStr('recovery-codes-action-cancel') }}
                 </button>
             } @else {
                 <input
                     type="submit"
-                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                     id="saveRecoveryAuthnCodesBtn"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                     [value]="i18n.msgStr('recovery-codes-action-complete')"
                     [disabled]="!toggleRecoveryCodesConfirmation()"
                 />

package/src/login/pages/login-recovery-authn-code-input/login-recovery-authn-code-input.component.html

@@ -16,9 +16,9 @@
     <ng-container content>
         <form
             id="kc-recovery-code-login-form"
+            method="post"
             [kcClass]="'kcFormClass'"
             [action]="url.loginAction"
-            method="post"
         >
             <div [kcClass]="'kcFormGroupClass'">
                 <div [kcClass]="'kcLabelWrapperClass'">
@@ -34,17 +34,17 @@
                         tabIndex="1"
                         id="recoveryCodeInput"
                         name="recoveryCodeInput"
-                        [attr.aria-invalid]="messagesPerField.existsError('recoveryCodeInput')"
                         autoComplete="off"
                         type="text"
-                        [kcClass]="'kcInputClass'"
                         autoFocus
+                        [attr.aria-invalid]="messagesPerField.existsError('recoveryCodeInput')"
+                        [kcClass]="'kcInputClass'"
                     />
                     @if (messagesPerField.existsError('recoveryCodeInput')) {
                         <span
                             id="input-error"
-                            [kcClass]="'kcInputErrorMessageClass'"
                             aria-live="polite"
+                            [kcClass]="'kcInputErrorMessageClass'"
                             [innerHTML]="messagesPerField.get('recoveryCodeInput') | kcSanitize: 'html'"
                         ></span>
                     }
@@ -63,10 +63,10 @@
                     [kcClass]="'kcFormButtonsClass'"
                 >
                     <input
-                        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         name="login"
                         id="kc-login"
                         type="submit"
+                        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         [value]="i18n.msgStr('doLogIn')"
                     />
                 </div>

package/src/login/pages/login-reset-otp/login-reset-otp.component.html

@@ -13,9 +13,9 @@
     <ng-container content>
         <form
             id="kc-otp-reset-form"
+            method="post"
             [kcClass]="'kcFormClass'"
             [action]="url.loginAction"
-            method="post"
         >
             <div [kcClass]="'kcInputWrapperClass'">
                 <div [kcClass]="'kcInfoAreaWrapperClass'">
@@ -24,10 +24,10 @@
                     </p>
                     @for (otpCredential of configuredOtpCredentials.userOtpCredentials; track otpCredential; let i = $index) {
                         <input
-                            id="kc-otp-credential-{{ i }}"
-                            [kcClass]="'kcLoginOTPListInputClass'"
                             type="radio"
                             name="selectedCredentialId"
+                            [id]="'kc-otp-credential-' + i"
+                            [kcClass]="'kcLoginOTPListInputClass'"
                             [value]="otpCredential.id"
                             [defaultChecked]="otpCredential.id === configuredOtpCredentials.selectedCredentialId"
                         />
@@ -39,8 +39,8 @@
                             <span [kcClass]="'kcLoginOTPListItemHeaderClass'">
                                 <span [kcClass]="'kcLoginOTPListItemIconBodyClass'">
                                     <i
-                                        [kcClass]="'kcLoginOTPListItemIconClass'"
                                         aria-hidden="true"
+                                        [kcClass]="'kcLoginOTPListItemIconClass'"
                                     ></i>
                                 </span>
                                 <span [kcClass]="'kcLoginOTPListItemTitleClass'">{{ otpCredential.userLabel }}</span>
@@ -54,8 +54,8 @@
                         >
                             <input
                                 id="kc-otp-reset-form-submit"
-                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                                 type="submit"
+                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                                 [value]="i18n.msgStr('doSubmit')"
                             />
                         </div>