Ensure notifications are announced by screen readers and tweak semani…

…cs and a litle styling too
umbraco · Sep 29, 2019 · e1d2860 · e1d2860
1 parent 795b64d
commit e1d2860
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less b/src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less
@@ -14,7 +14,7 @@
     list-style: none;
     margin: 0;
     position: relative;
-} 
+}
 
 .umb-notifications__notification {
     padding: 5px 20px;
@@ -24,11 +24,14 @@
     position: relative;
     border-radius: 10px;
     margin: 10px;
-    
+
     .close {
+        position: absolute;
         top: 0;
-        right: -6px;
+        bottom: 0;
+        right: 6px;
         opacity: 0.4;
+        margin: auto 0;
     }
 }
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/notifications/umb-notifications.html b/src/Umbraco.Web.UI.Client/src/views/components/notifications/umb-notifications.html
@@ -1,11 +1,9 @@
 <div class="umb-notifications" id="umb-notifications-wrapper" ng-cloak>
-    <ul class="umb-notifications__notifications">
+    <ul class="umb-notifications__notifications" aria-live="assertive" aria-relevant="additions">
         <li ng-repeat="notification in notifications"
             class="alert alert-block alert-{{notification.type}} umb-notifications__notification animated -half-second fadeIn"
             ng-class="{'-no-border -extra-padding': notification.type === 'form'}">
 
-            <a class='close -align-right' ng-click="removeNotification($index)" prevent-default href>&times;</a>
-
             <div ng-if="notification.view">
                 <div ng-include="notification.view"></div>
             </div>
@@ -19,6 +17,10 @@
                     <span ng-bind-html="notification.message"></span>
                 </div>
             </div>
+
+            <button type="button" class='close -align-right' ng-click="removeNotification($index)" aria-hidden="true">
+                <span aria-hidden="true">&times;</span>
+            </button>
         </li>
     </ul>
 </div>