KEYCLOAK-14915 Upgrade registration screen to PF4

testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/auth/page/AccountFields.java

@@ -17,6 +17,7 @@
 
 package org.keycloak.testsuite.auth.page;
 
+import org.jboss.arquillian.graphene.page.Page;
 import org.keycloak.representations.idm.UserRepresentation;
 import org.keycloak.testsuite.util.UIUtils;
 import org.openqa.selenium.NoSuchElementException;
@@ -31,6 +32,9 @@ import static org.keycloak.testsuite.util.UIUtils.getTextFromElement;
  */
 public class AccountFields extends FieldsBase {
 
+    @Page
+    private AccountErrors inputErrors;
+
     @FindBy(id = "username")
     private WebElement usernameInput;
     @FindBy(xpath = "//label[@for='username']")
@@ -119,19 +123,69 @@ public class AccountFields extends FieldsBase {
     }
 
     public boolean hasUsernameError() {
-        return hasFieldError(usernameInput);
+        return inputErrors.getUsernameError() != null;
     }
 
     public boolean hasEmailError() {
-        return hasFieldError(emailInput);
+        return inputErrors.getEmailError() != null;
     }
 
     public boolean hasFirstNameError() {
-        return hasFieldError(firstNameInput);
+        return inputErrors.getFirstNameError() != null;
     }
 
     public boolean hasLastNameError() {
-        return hasFieldError(lastNameInput);
+        return inputErrors.getLastNameError() != null;
     }
 
+    public AccountErrors getInputErrors(){
+        return inputErrors;
+    }
+
+    public static class AccountErrors{
+
+        @FindBy(id = "input-error-firstname")
+        private WebElement firstNameError;
+
+        @FindBy(id = "input-error-lastname")
+        private WebElement lastNameError;
+
+        @FindBy(id = "input-error-email")
+        private WebElement emailError;
+
+        @FindBy(id = "input-error-username")
+        private WebElement usernameError;
+
+        public String getFirstNameError() {
+            try {
+                return getTextFromElement(firstNameError);
+            } catch (NoSuchElementException e) {
+                return null;
+            }
+        }
+
+        public String getLastNameError() {
+            try {
+                return getTextFromElement(lastNameError);
+            } catch (NoSuchElementException e) {
+                return null;
+            }
+        }
+
+        public String getEmailError() {
+            try {
+                return getTextFromElement(emailError);
+            } catch (NoSuchElementException e) {
+                return null;
+            }
+        }
+
+        public String getUsernameError() {
+            try {
+                return getTextFromElement(usernameError);
+            } catch (NoSuchElementException e) {
+                return null;
+            }
+        }
+    }
 }

testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/auth/page/PasswordFields.java

@@ -16,6 +16,7 @@
  */
 package org.keycloak.testsuite.auth.page;
 
+import org.jboss.arquillian.graphene.page.Page;
 import org.keycloak.testsuite.util.UIUtils;
 import org.openqa.selenium.NoSuchElementException;
 import org.openqa.selenium.WebElement;
@@ -29,6 +30,9 @@ import static org.keycloak.testsuite.util.UIUtils.getTextFromElement;
  */
 public class PasswordFields extends FieldsBase {
 
+    @Page
+    private PasswordErrors inputErrors;
+
     @FindBy(id = "password")
     private WebElement passwordInput;
     @FindBy(xpath = "//label[@for='password']")
@@ -84,7 +88,7 @@ public class PasswordFields extends FieldsBase {
     }
 
     public boolean hasPasswordError() {
-        return hasFieldError(passwordInput);
+        return inputErrors.getPasswordError() != null;
     }
 
     public boolean hasNewPasswordError() {
@@ -92,6 +96,35 @@ public class PasswordFields extends FieldsBase {
     }
 
     public boolean hasConfirmPasswordError() {
-        return hasFieldError(confirmPasswordInput);
+        return inputErrors.getPasswordConfirmError() != null;
+    }
+
+    public PasswordErrors getInputErrors() {
+        return inputErrors;
+    }
+
+    public static class PasswordErrors {
+        @FindBy(id = "input-error-password")
+        private WebElement passwordError;
+
+        @FindBy(id = "input-error-password-confirm")
+        private WebElement passwordConfirmError;
+
+
+        public String getPasswordError() {
+            try {
+                return getTextFromElement(passwordError);
+            } catch (NoSuchElementException e) {
+                return null;
+            }
+        }
+
+        public String getPasswordConfirmError() {
+            try {
+                return getTextFromElement(passwordConfirmError);
+            } catch (NoSuchElementException e) {
+                return null;
+            }
+        }
     }
 }

testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/RegisterPage.java

@@ -17,7 +17,11 @@
 
 package org.keycloak.testsuite.pages;
 
+import org.jboss.arquillian.graphene.page.Page;
 import org.junit.Assert;
+import org.keycloak.testsuite.auth.page.AccountFields;
+import org.keycloak.testsuite.auth.page.PasswordFields;
+import org.keycloak.testsuite.util.UIUtils;
 import org.openqa.selenium.NoSuchElementException;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.support.FindBy;
@@ -27,6 +31,12 @@ import org.openqa.selenium.support.FindBy;
  */
 public class RegisterPage extends AbstractPage {
 
+    @Page
+    private AccountFields.AccountErrors accountErrors;
+
+    @Page
+    private PasswordFields.PasswordErrors passwordErrors;
+
     @FindBy(id = "firstName")
     private WebElement firstNameInput;
 
@@ -49,7 +59,7 @@ public class RegisterPage extends AbstractPage {
     private WebElement submitButton;
 
     @FindBy(className = "alert-error")
-    private WebElement loginErrorMessage;
+    private WebElement loginAlertErrorMessage;
 
     @FindBy(className = "instruction")
     private WebElement loginInstructionMessage;
@@ -132,13 +142,17 @@ public class RegisterPage extends AbstractPage {
         backToLoginLink.click();
     }
 
-    public String getError() {
+    public String getAlertError() {
-        return loginErrorMessage != null ? loginErrorMessage.getText() : null;
+        try {
+            return UIUtils.getTextFromElement(loginAlertErrorMessage);
+        } catch (NoSuchElementException e) {
+            return null;
+        }
     }
 
     public String getInstruction() {
         try {
-            return loginInstructionMessage != null ? loginInstructionMessage.getText() : null;
+            return UIUtils.getTextFromElement(loginInstructionMessage);
         } catch (NoSuchElementException e){
             // OK
         }
@@ -173,6 +187,14 @@ public class RegisterPage extends AbstractPage {
         return PageUtils.getPageTitle(driver).equals("Register");
     }
 
+    public AccountFields.AccountErrors getInputAccountErrors(){
+        return accountErrors;
+    }
+
+    public PasswordFields.PasswordErrors getInputPasswordErrors(){
+        return passwordErrors;
+    }
+
     @Override
     public void open() {
         throw new UnsupportedOperationException();

testsuite/integration-arquillian/tests/base/src/test/java/org/keycloak/testsuite/federation/ldap/LDAPMSADFullNameTest.java

@@ -243,7 +243,7 @@ public class LDAPMSADFullNameTest extends AbstractLDAPTest {
         registerPage.assertCurrent();
 
         registerPage.register("John", "Existing", "johnyanth@check.cz", "existingkc", "Password1", "Password1");
-        Assert.assertEquals("Username already exists.", registerPage.getError());
+        Assert.assertEquals("Username already exists.", registerPage.getInputAccountErrors().getUsernameError());
 
         registerPage.register("John", "Existing", "johnyanth@check.cz", "existingkc2", "Password1", "Password1");
         appPage.logout();

testsuite/integration-arquillian/tests/base/src/test/java/org/keycloak/testsuite/federation/ldap/LDAPProvidersIntegrationTest.java

@@ -426,12 +426,12 @@ public class LDAPProvidersIntegrationTest extends AbstractLDAPTest {
         // check existing username
         registerPage.register("firstName", "lastName", "email@mail.cz", "existing", "Password1", "Password1");
         registerPage.assertCurrent();
-        Assert.assertEquals("Username already exists.", registerPage.getError());
+        Assert.assertEquals("Username already exists.", registerPage.getInputAccountErrors().getUsernameError());
 
         // Check existing email
         registerPage.register("firstName", "lastName", "existing@email.org", "nonExisting", "Password1", "Password1");
         registerPage.assertCurrent();
-        Assert.assertEquals("Email already exists.", registerPage.getError());
+        Assert.assertEquals("Email already exists.", registerPage.getInputAccountErrors().getEmailError());
     }
 
 

testsuite/integration-arquillian/tests/base/src/test/java/org/keycloak/testsuite/forms/RegisterTest.java

@@ -81,7 +81,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
         registerPage.register("firstName", "lastName", "registerExistingUser@email", "roleRichUser", "password", "password");
 
         registerPage.assertCurrent();
-        assertEquals("Username already exists.", registerPage.getError());
+        assertEquals("Username already exists.", registerPage.getInputAccountErrors().getUsernameError());
 
         // assert form keeps form fields on error
         assertEquals("firstName", registerPage.getFirstName());
@@ -105,7 +105,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
         registerPage.register("firstName", "lastName", "test-user@localhost", "registerExistingUser", "password", "password");
 
         registerPage.assertCurrent();
-        assertEquals("Email already exists.", registerPage.getError());
+        assertEquals("Email already exists.", registerPage.getInputAccountErrors().getEmailError());
 
         // assert form keeps form fields on error
         assertEquals("firstName", registerPage.getFirstName());
@@ -155,7 +155,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
         registerPage.register("firstName", "lastName", "registerUserInvalidPasswordConfirm@email", "registerUserInvalidPasswordConfirm", "password", "invalid");
 
         registerPage.assertCurrent();
-        assertEquals("Password confirmation doesn't match.", registerPage.getError());
+        assertEquals("Password confirmation doesn't match.", registerPage.getInputPasswordErrors().getPasswordConfirmError());
 
         // assert form keeps form fields on error
         assertEquals("firstName", registerPage.getFirstName());
@@ -180,7 +180,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
         registerPage.register("firstName", "lastName", "registerUserMissingPassword@email", "registerUserMissingPassword", null, null);
 
         registerPage.assertCurrent();
-        assertEquals("Please specify password.", registerPage.getError());
+        assertEquals("Please specify password.", registerPage.getInputPasswordErrors().getPasswordError());
 
         events.expectRegister("registerUserMissingPassword", "registerUserMissingPassword@email")
                 .removeDetail(Details.USERNAME)
@@ -208,7 +208,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
             registerPage.register("firstName", "lastName", "registerPasswordPolicy@email", "registerPasswordPolicy", "pass", "pass");
 
             registerPage.assertCurrent();
-            assertEquals("Invalid password: minimum length 8.", registerPage.getError());
+            assertEquals("Invalid password: minimum length 8.", registerPage.getInputPasswordErrors().getPasswordError());
 
             events.expectRegister("registerPasswordPolicy", "registerPasswordPolicy@email")
                     .removeDetail(Details.USERNAME)
@@ -240,7 +240,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
         registerPage.register("firstName", "lastName", "registerUserMissingUsername@email", null, "password", "password");
 
         registerPage.assertCurrent();
-        assertEquals("Please specify username.", registerPage.getError());
+        assertEquals("Please specify username.", registerPage.getInputAccountErrors().getUsernameError());
 
         events.expectRegister(null, "registerUserMissingUsername@email")
                 .removeDetail(Details.USERNAME)
@@ -258,11 +258,11 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
 
         registerPage.assertCurrent();
 
-        assertEquals("Please specify username.\n" +
+        assertEquals("Please specify username.", registerPage.getInputAccountErrors().getUsernameError());
-                "Please specify first name.\n" +
+        assertEquals("Please specify first name.", registerPage.getInputAccountErrors().getFirstNameError());
-                "Please specify last name.\n" +
+        assertEquals("Please specify last name.", registerPage.getInputAccountErrors().getLastNameError());
-                "Please specify email.\n" +
+        assertEquals("Please specify email.", registerPage.getInputAccountErrors().getEmailError());
-                "Please specify password.", registerPage.getError());
+        assertEquals("Please specify password.", registerPage.getInputPasswordErrors().getPasswordError());
 
         events.expectRegister(null, "registerUserMissingUsername@email")
                 .removeDetail(Details.USERNAME)
@@ -278,7 +278,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
 
         registerPage.register("firstName", "lastName", null, "registerUserMissingEmail", "password", "password");
         registerPage.assertCurrent();
-        assertEquals("Please specify email.", registerPage.getError());
+        assertEquals("Please specify email.", registerPage.getInputAccountErrors().getEmailError());
         events.expectRegister("registerUserMissingEmail", null)
                 .removeDetail("email")
                 .error("invalid_registration").assertEvent();
@@ -293,7 +293,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
         registerPage.register("firstName", "lastName", "registerUserInvalidEmailemail", "registerUserInvalidEmail", "password", "password");
         registerPage.assertCurrent();
         assertEquals("registerUserInvalidEmailemail", registerPage.getEmail());
-        assertEquals("Invalid email address.", registerPage.getError());
+        assertEquals("Invalid email address.", registerPage.getInputAccountErrors().getEmailError());
         events.expectRegister("registerUserInvalidEmail", "registerUserInvalidEmailemail")
                 .error("invalid_registration").assertEvent();
     }
@@ -480,19 +480,19 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
         registerPage.register("firstName", "lastName", "registerUserNotUsername@email", "registerUserNotUsername", "registerUserNotUsername", "registerUserNotUsername");
 
         assertTrue(registerPage.isCurrent());
-        assertEquals("Invalid password: must not be equal to the username.", registerPage.getError());
+        assertEquals("Invalid password: must not be equal to the username.", registerPage.getInputPasswordErrors().getPasswordError());
 
         adminClient.realm("test").users().create(UserBuilder.create().username("registerUserNotUsername").build());
 
         registerPage.register("firstName", "lastName", "registerUserNotUsername@email", "registerUserNotUsername", "registerUserNotUsername", "registerUserNotUsername");
 
         assertTrue(registerPage.isCurrent());
-        assertEquals("Username already exists.", registerPage.getError());
+        assertEquals("Username already exists.", registerPage.getInputAccountErrors().getUsernameError());
 
         registerPage.register("firstName", "lastName", "registerUserNotUsername@email", null, "password", "password");
 
         assertTrue(registerPage.isCurrent());
-        assertEquals("Please specify username.", registerPage.getError());
+        assertEquals("Please specify username.", registerPage.getInputAccountErrors().getUsernameError());
     }
 
     // KEYCLOAK-12729
@@ -514,7 +514,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
             registerPage.registerWithEmailAsUsername("firstName", "lastName", "registerUserNotEmail@email", "registerUserNotEmail@email", "registerUserNotEmail@email");
 
             assertTrue(registerPage.isCurrent());
-            assertEquals("Invalid password: must not be equal to the email.", registerPage.getError());
+            assertEquals("Invalid password: must not be equal to the email.", registerPage.getInputPasswordErrors().getPasswordError());
         } finally {
             configureRealmRegistrationEmailAsUsername(false);
         }
@@ -536,7 +536,7 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
             registerPage.registerWithEmailAsUsername("firstName", "lastName", "test-user@localhost", "password", "password");
 
             registerPage.assertCurrent();
-            assertEquals("Email already exists.", registerPage.getError());
+            assertEquals("Email already exists.", registerPage.getInputAccountErrors().getEmailError());
 
             events.expectRegister("test-user@localhost", "test-user@localhost").user((String) null).error("email_in_use").assertEvent();
         } finally {
@@ -555,12 +555,12 @@ public class RegisterTest extends AbstractTestRealmKeycloakTest {
 
             registerPage.registerWithEmailAsUsername("firstName", "lastName", null, "password", "password");
             registerPage.assertCurrent();
-            assertEquals("Please specify email.", registerPage.getError());
+            assertEquals("Please specify email.", registerPage.getInputAccountErrors().getEmailError());
             events.expectRegister(null, null).removeDetail("username").removeDetail("email").error("invalid_registration").assertEvent();
 
             registerPage.registerWithEmailAsUsername("firstName", "lastName", "registerUserInvalidEmailemail", "password", "password");
             registerPage.assertCurrent();
-            assertEquals("Invalid email address.", registerPage.getError());
+            assertEquals("Invalid email address.", registerPage.getInputAccountErrors().getEmailError());
             events.expectRegister("registerUserInvalidEmailemail", "registerUserInvalidEmailemail").error("invalid_registration").assertEvent();
         } finally {
             configureRealmRegistrationEmailAsUsername(false);

testsuite/integration-arquillian/tests/other/base-ui/src/test/java/org/keycloak/testsuite/ui/login/LoginPageTest.java

@@ -217,64 +217,35 @@ public class LoginPageTest extends AbstractLoginTest {
 
     private void assertRegistrationFields(String firstName, String lastName, String email, String username, boolean password, boolean passwordConfirm) {
         assertTrue(registrationPage.feedbackMessage().isError());
-        final String errorMsg = registrationPage.feedbackMessage().getText();
 
-        if (firstName != null) {
+        assertRegistrationAvailability(firstName != null, registrationPage.accountFields().hasFirstNameError(),
-            assertEquals(firstName, registrationPage.accountFields().getFirstName());
+                firstName, registrationPage.accountFields().getFirstName());
-            assertFalse(registrationPage.accountFields().hasFirstNameError());
-            assertFalse(errorMsg.contains("first name"));
-        }
-        else {
-            assertTrue(registrationPage.accountFields().hasFirstNameError());
-            assertTrue(errorMsg.contains("first name"));
-        }
 
-        if (lastName != null) {
+        assertRegistrationAvailability(lastName != null, registrationPage.accountFields().hasLastNameError(),
-            assertEquals(lastName, registrationPage.accountFields().getLastName());
+                lastName, registrationPage.accountFields().getLastName());
-            assertFalse(registrationPage.accountFields().hasLastNameError());
-            assertFalse(errorMsg.contains("last name"));
-        }
-        else {
-            assertTrue(registrationPage.accountFields().hasLastNameError());
-            assertTrue(errorMsg.contains("last name"));
-        }
 
-        if (email != null) {
+        assertRegistrationAvailability(email != null, registrationPage.accountFields().hasEmailError(),
-            assertEquals(email, registrationPage.accountFields().getEmail());
+                email, registrationPage.accountFields().getEmail());
-            assertFalse(registrationPage.accountFields().hasEmailError());
-            assertFalse(errorMsg.contains("email"));
-        }
-        else {
-            assertTrue(registrationPage.accountFields().hasEmailError());
-            assertTrue(errorMsg.contains("email"));
-        }
 
-        if (username != null) {
+        assertRegistrationAvailability(username != null, registrationPage.accountFields().hasUsernameError(),
-            assertEquals(username, registrationPage.accountFields().getUsername());
+                username, registrationPage.accountFields().getUsername());
-            assertFalse(registrationPage.accountFields().hasUsernameError());
-            assertFalse(errorMsg.contains("username"));
-        }
-        else {
-            assertTrue(registrationPage.accountFields().hasUsernameError());
-            assertTrue(errorMsg.contains("username"));
-        }
 
-        if (password) {
+        assertRegistrationAvailability(password, registrationPage.passwordFields().hasPasswordError());
-            assertFalse(registrationPage.passwordFields().hasPasswordError());
+        assertRegistrationAvailability(passwordConfirm, registrationPage.passwordFields().hasConfirmPasswordError());
-            assertFalse(errorMsg.contains("Please specify password."));
+    }
-        }
-        else {
-            assertTrue(registrationPage.passwordFields().hasPasswordError());
-            assertTrue(errorMsg.contains("Please specify password."));
-        }
 
-        if (passwordConfirm) {
+    private void assertRegistrationAvailability(boolean isAvailable, boolean state) {
-            assertFalse(registrationPage.passwordFields().hasConfirmPasswordError());
+        assertRegistrationAvailability(isAvailable, state, null, null);
-            assertFalse(registrationPage.feedbackMessage().getText().contains("Password confirmation doesn't match."));
+    }
-        }
+
-        else {
+    private void assertRegistrationAvailability(boolean isAvailable, boolean state, String expected, String actual) {
-            assertTrue(registrationPage.passwordFields().hasConfirmPasswordError());
+        if (isAvailable) {
-            assertTrue(registrationPage.feedbackMessage().getText().contains("Password confirmation doesn't match."));
+            assertFalse(state);
+            if (expected != null && actual != null) {
+                assertEquals(expected, actual);
+            }
+        } else {
+            assertTrue(state);
         }
     }
 

themes/src/main/resources/theme/base/login/register.ftl

@@ -1,63 +1,118 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout; section>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('firstName','lastName','email','username','password','password-confirm'); section>
     <#if section = "header">
         ${msg("registerTitle")}
     <#elseif section = "form">
         <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
-            <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('firstName',properties.kcFormGroupErrorClass!)}">
+            <div class="${properties.kcFormGroupClass!}">
                 <div class="${properties.kcLabelWrapperClass!}">
                     <label for="firstName" class="${properties.kcLabelClass!}">${msg("firstName")}</label>
                 </div>
                 <div class="${properties.kcInputWrapperClass!}">
-                    <input type="text" id="firstName" class="${properties.kcInputClass!}" name="firstName" value="${(register.formData.firstName!'')}" />
+                    <input type="text" id="firstName" class="${properties.kcInputClass!}" name="firstName"
+                           value="${(register.formData.firstName!'')}"
+                           aria-invalid="<#if messagesPerField.existsError('firstName')>true</#if>"
+                    />
+
+                    <#if messagesPerField.existsError('firstName')>
+                        <span id="input-error-firstname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('firstName'))?no_esc}
+                        </span>
+                    </#if>
                 </div>
             </div>
 
-            <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('lastName',properties.kcFormGroupErrorClass!)}">
+            <div class="${properties.kcFormGroupClass!}">
                 <div class="${properties.kcLabelWrapperClass!}">
                     <label for="lastName" class="${properties.kcLabelClass!}">${msg("lastName")}</label>
                 </div>
                 <div class="${properties.kcInputWrapperClass!}">
-                    <input type="text" id="lastName" class="${properties.kcInputClass!}" name="lastName" value="${(register.formData.lastName!'')}" />
+                    <input type="text" id="lastName" class="${properties.kcInputClass!}" name="lastName"
+                           value="${(register.formData.lastName!'')}"
+                           aria-invalid="<#if messagesPerField.existsError('lastName')>true</#if>"
+                    />
+
+                    <#if messagesPerField.existsError('lastName')>
+                        <span id="input-error-lastname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('lastName'))?no_esc}
+                        </span>
+                    </#if>
                 </div>
             </div>
 
-            <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('email',properties.kcFormGroupErrorClass!)}">
+            <div class="${properties.kcFormGroupClass!}">
                 <div class="${properties.kcLabelWrapperClass!}">
                     <label for="email" class="${properties.kcLabelClass!}">${msg("email")}</label>
                 </div>
                 <div class="${properties.kcInputWrapperClass!}">
-                    <input type="text" id="email" class="${properties.kcInputClass!}" name="email" value="${(register.formData.email!'')}" autocomplete="email" />
+                    <input type="text" id="email" class="${properties.kcInputClass!}" name="email"
+                           value="${(register.formData.email!'')}" autocomplete="email"
+                           aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
+                    />
+
+                    <#if messagesPerField.existsError('email')>
+                        <span id="input-error-email" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('email'))?no_esc}
+                        </span>
+                    </#if>
                 </div>
             </div>
 
             <#if !realm.registrationEmailAsUsername>
-                <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('username',properties.kcFormGroupErrorClass!)}">
+                <div class="${properties.kcFormGroupClass!}">
                     <div class="${properties.kcLabelWrapperClass!}">
                         <label for="username" class="${properties.kcLabelClass!}">${msg("username")}</label>
                     </div>
                     <div class="${properties.kcInputWrapperClass!}">
-                        <input type="text" id="username" class="${properties.kcInputClass!}" name="username" value="${(register.formData.username!'')}" autocomplete="username" />
+                        <input type="text" id="username" class="${properties.kcInputClass!}" name="username"
+                               value="${(register.formData.username!'')}" autocomplete="username"
+                               aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
+                        />
+
+                        <#if messagesPerField.existsError('username')>
+                            <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                ${kcSanitize(messagesPerField.get('username'))?no_esc}
+                            </span>
+                        </#if>
                     </div>
                 </div>
             </#if>
 
             <#if passwordRequired??>
-                <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('password',properties.kcFormGroupErrorClass!)}">
+                <div class="${properties.kcFormGroupClass!}">
                     <div class="${properties.kcLabelWrapperClass!}">
                         <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
                     </div>
                     <div class="${properties.kcInputWrapperClass!}">
-                        <input type="password" id="password" class="${properties.kcInputClass!}" name="password" autocomplete="new-password"/>
+                        <input type="password" id="password" class="${properties.kcInputClass!}" name="password"
+                               autocomplete="new-password"
+                               aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
+                        />
+
+                        <#if messagesPerField.existsError('password')>
+                            <span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                ${kcSanitize(messagesPerField.get('password'))?no_esc}
+                            </span>
+                        </#if>
                     </div>
                 </div>
 
-                <div class="${properties.kcFormGroupClass!} ${messagesPerField.printIfExists('password-confirm',properties.kcFormGroupErrorClass!)}">
+                <div class="${properties.kcFormGroupClass!}">
                     <div class="${properties.kcLabelWrapperClass!}">
-                        <label for="password-confirm" class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
+                        <label for="password-confirm"
+                               class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
                     </div>
                     <div class="${properties.kcInputWrapperClass!}">
-                        <input type="password" id="password-confirm" class="${properties.kcInputClass!}" name="password-confirm" />
+                        <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
+                               name="password-confirm"
+                               aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
+                        />
+
+                        <#if messagesPerField.existsError('password-confirm')>
+                            <span id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
+                            </span>
+                        </#if>
                     </div>
                 </div>
             </#if>