Use aria attributes in dialog markup (#6402)

umbraco · Sep 29, 2019 · 2cd92e7 · 2cd92e7
1 parent cb5b9ed
commit 2cd92e7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 26 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -6,6 +6,10 @@
     animation: fadeIn 0.2s;
     box-shadow: 0 10px 50px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.16);
     text-align: left;
+
+    .scoped-view{
+        display: none;
+    }
 }
 
 .umb-overlay__form {
@@ -20,19 +24,18 @@
     margin-top: 0;
     flex-grow: 0;
     flex-shrink: 0;
-
     padding: 20px 30px 0;
 }
 
 .umb-overlay__section-header {
     width: 100%;
     margin-top:30px;
     margin-bottom: 10px;
-    
+
     h5 {
         display: inline;
     }
-    
+
     button {
         display: inline;
         float: right;
@@ -47,6 +50,7 @@
 .umb-overlay__title {
     font-size: @fontSizeLarge;
     color: @black;
+    line-height: 20px;
     font-weight: bold;
     margin: 7px 0;
 }
@@ -62,8 +66,7 @@
     flex-shrink: 1;
     flex-basis: auto;
     position: relative;
-
-    padding: 0px 30px;
+    padding: 0 30px;
     margin-bottom: 10px;
     max-height: calc(100vh - 170px);
     overflow-y: auto;
@@ -75,7 +78,6 @@
     flex-basis: 31px;
     padding: 10px 20px;
     margin: 0;
-
     background: @gray-10;
     border-top: 1px solid @purple-l3;
 }
@@ -124,11 +126,7 @@
     max-height: 100vh;
     box-sizing: border-box;
     border-radius: @baseBorderRadius;
-    /* default:
-    &.umb-overlay--small {
-        width: 400px;
-    }
-    */
+
     &.umb-overlay--medium {
         width: 480px;
     }
@@ -228,12 +226,12 @@
 }
 
 .umb-overlay__item-details-title {
-    margin-top: 0;
-    margin-bottom: 0;
+    margin: 0;
+    font-size: 15px;
 }
 
 .umb-overlay__item-details-description {
-    margin-top: 10px;
+    margin: 10px 0 0;
     font-size: 12px;
 }
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
@@ -1,33 +1,32 @@
-<div data-element="overlay" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{size}}" on-outside-click="outSideClick()">
+<div data-element="overlay" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{size}}" on-outside-click="outSideClick()" role="dialog" aria-labelledby="umb-overlay-title" aria-describedby="umb-overlay-description">
     <ng-form class="umb-overlay__form" name="overlayForm" novalidate val-form-manager>
-
         <div data-element="overlay-header" class="umb-overlay-header">
-            <h4 class="umb-overlay__title">{{model.title}}</h4>
-            <p class="umb-overlay__subtitle">{{model.subtitle}}</p>
+            <h1 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h1>
+            <p class="umb-overlay__subtitle" id="umb-overlay-description" ng-if="model.subtitle">{{model.subtitle}}</p>
         </div>
 
         <div data-element="overlay-content" class="umb-overlay-container form-horizontal">
             <ng-transclude></ng-transclude>
             <div ng-if="view && !parentScope" ng-include="view"></div>
-            <div class="scoped-view" style="display: none;"></div>
+            <div class="scoped-view"></div>
         </div>
 
+        <!-- If model contains the property of "itemDetails" we render  the relevant content here -->
         <div class="umb-overlay__item-details" ng-if="model.itemDetails">
-
             <div class="umb-overlay__item-details-title-wrapper" ng-if="model.itemDetails.icon || model.itemDetails.title">
-                <i class="{{ model.itemDetails.icon }} umb-overlay__item-details-icon" ng-if="model.itemDetails.icon"></i>
-                <h5 class="umb-overlay__item-details-title" ng-if="model.itemDetails.title">{{ model.itemDetails.title }}</h5>
+                <i class="{{ model.itemDetails.icon }} umb-overlay__item-details-icon" ng-if="model.itemDetails.icon" aria-hidden="true"></i>
+                <h2 class="umb-overlay__item-details-title" ng-if="model.itemDetails.title">{{ model.itemDetails.title }}</h2>
             </div>
-
-            <div class="umb-overlay__item-details-description" ng-if="model.itemDetails.description">{{ model.itemDetails.description }}</div>
-
+            <p class="umb-overlay__item-details-description" ng-if="model.itemDetails.description">{{ model.itemDetails.description }}</p>
         </div>
 
         <div data-element="overlay-footer" class="umb-overlay-drawer" ng-class="{'-auto-height': model.confirmSubmit.show}">
 
             <div ng-if="model.confirmSubmit.show">
 
-                <h5 class="red" ng-if="model.confirmSubmit.title"><i class="icon-alert"></i> {{ model.confirmSubmit.title }}</h5>
+                <h2 class="red" ng-if="model.confirmSubmit.title">
+                    <i class="icon-alert" aria-hidden="true"></i> {{ model.confirmSubmit.title }}
+                </h2>
                 <p ng-if="model.confirmSubmit.description">{{ model.confirmSubmit.description }}</p>
 
                 <label class="checkbox no-indent">