Merge pull request #5450 from Matthew-Wise/5277-27

Login errors are not identified for screen reader users
umbraco · May 31, 2019 · 7c79cf3 · 7c79cf3
2 parents 6ad1607 + 9b0d16f
commit 7c79cf3
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html
@@ -148,10 +148,9 @@ <h1>{{greeting}}</h1>
 
                     <form method="POST" name="vm.loginForm" ng-submit="vm.loginSubmit()">
 
-                        <div class="control-group" ng-show="vm.loginForm.$invalid">
-                            <div class="text-error">{{vm.errorMsg}}</div>
+                        <div ng-messages="vm.loginForm.$error" class="control-group" aria-live="assertive">
+                            <p ng-message="auth" class="text-error" role="alert">{{vm.errorMsg}}</p>
                         </div>
-
                         <div class="control-group" ng-class="{error: vm.loginForm.username.$invalid}">
                             <label>{{vm.labels.usernameLabel}}</label>
                             <input type="text" ng-model="vm.login" name="username" class="-full-width-input" placeholder="{{vm.labels.usernamePlaceholder}}" focus-when="{{vm.view === 'login'}}" />
@@ -169,12 +168,11 @@ <h1>{{greeting}}</h1>
                         </div>
 
                         <div class="flex justify-between items-center">
-                            <umb-button
-                                button-style="success"
-                                size="m"
-                                label-key="general_login"
-                                state="vm.loginStates.submitButton"
-                                type="submit">
+                            <umb-button button-style="success"
+                                        size="m"
+                                        label-key="general_login"
+                                        state="vm.loginStates.submitButton"
+                                        type="submit">
                             </umb-button>
                             <div ng-show="vm.allowPasswordReset">
                                 <a class="muted" style="text-decoration: underline;" href="#" prevent-default ng-click="vm.showRequestPasswordReset()"><localize key="login_forgottenPassword">Forgotten password?</localize></a>