From c288258a5ec355acc817bb0a41183fdb594ab9f5 Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Sun, 22 Sep 2019 12:03:39 +0200
Subject: [PATCH 1/7] Add role, aria-labbelledby, aria-describedby and some
 id's for the headline and description so things can be paired up nicely.

---
 .../src/views/components/overlays/umb-overlay.html          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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
index ae3cfcc776fd..f93515328977 100644
--- 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,9 +1,9 @@
-<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>
+            <h4 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h4> <!-- TODO: Turn this into a <h1> -->
+            <p class="umb-overlay__subtitle" id="umb-overlay-description">{{model.subtitle}}</p>
         </div>
 
         <div data-element="overlay-content" class="umb-overlay-container form-horizontal">

From 9867106ca157b0f0b8d7f68ac67bf1ffd1db3e71 Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Sun, 22 Sep 2019 12:17:10 +0200
Subject: [PATCH 2/7] Change the overlay headline from h4 to h1 since when the
 dialog is open it will lay on top of everything else and by our only context,
 which is why adding it in a h1 is perfectly fine

---
 .../src/views/components/overlays/umb-overlay.html              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index f93515328977..31d56476452d 100644
--- 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
@@ -2,7 +2,7 @@
     <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" id="umb-overlay-title">{{model.title}}</h4> <!-- TODO: Turn this into a <h1> -->
+            <h1 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h1>
             <p class="umb-overlay__subtitle" id="umb-overlay-description">{{model.subtitle}}</p>
         </div>
 

From d9460bd854ce4725531b1bc8ea71c8809f338b67 Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Sun, 22 Sep 2019 12:44:32 +0200
Subject: [PATCH 3/7] Adjust line-height since the default for h1 is too much

---
 src/Umbraco.Web.UI.Client/src/less/components/overlays.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
index c8f0195ea597..5835a7067555 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -47,6 +47,7 @@
 .umb-overlay__title {
     font-size: @fontSizeLarge;
     color: @black;
+    line-height: 20px;
     font-weight: bold;
     margin: 7px 0;
 }

From e33518da2ecefc7ca7eb7e7f83cca3d7962badaa Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Sun, 22 Sep 2019 13:36:37 +0200
Subject: [PATCH 4/7] Improve semantics by taking care of the sub headlines
 being h2 not h5 and hide the icons from screen readers

---
 .../src/views/components/overlays/umb-overlay.html       | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

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
index 31d56476452d..e28f9e8523b0 100644
--- 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
@@ -15,8 +15,8 @@ <h1 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h1>
         <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>
@@ -27,9 +27,12 @@ <h5 class="umb-overlay__item-details-title" ng-if="model.itemDetails.title">{{ m
 
             <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>
 
+                <!-- TODO: Maybe use the checkbox directive here -->
                 <label class="checkbox no-indent">
                     <input type="checkbox" ng-model="directive.enableConfirmButton" />
                     <strong>{{model.confirmSubmit.checkboxLabel}}</strong>

From a5b0112b9a843b41404db13ab046ea031125938d Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Sun, 22 Sep 2019 14:21:44 +0200
Subject: [PATCH 5/7] Don't fallback to the content text after all - since it's
 the same that is visual in the dialog

---
 .../src/views/components/overlays/umb-overlay.html             | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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
index e28f9e8523b0..18c590a06250 100644
--- 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,9 +1,8 @@
 <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">
             <h1 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h1>
-            <p class="umb-overlay__subtitle" id="umb-overlay-description">{{model.subtitle}}</p>
+            <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">

From 511330c4fbff54fc1303d6f61aa0a37a60a61579 Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Sun, 22 Sep 2019 14:42:27 +0200
Subject: [PATCH 6/7] Optimize semantics and style them accordingly

---
 .../src/less/components/overlays.less         | 25 ++++++++-----------
 .../components/overlays/umb-overlay.html      |  8 +++---
 2 files changed, 14 insertions(+), 19 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
index 5835a7067555..f38c5d58b8ff 100644
--- 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,7 +24,6 @@
     margin-top: 0;
     flex-grow: 0;
     flex-shrink: 0;
-    
     padding: 20px 30px 0;
 }
 
@@ -28,11 +31,11 @@
     width: 100%;
     margin-top:30px;
     margin-bottom: 10px;
-    
+
     h5 {
         display: inline;
     }
-    
+
     button {
         display: inline;
         float: right;
@@ -63,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;
@@ -76,7 +78,6 @@
     flex-basis: 31px;
     padding: 10px 20px;
     margin: 0;
-
     background: @gray-10;
     border-top: 1px solid @purple-l3;
 }
@@ -125,11 +126,7 @@
     max-height: 100vh;
     box-sizing: border-box;
     border-radius: @baseBorderRadius;
-    /* default:
-    &.umb-overlay--small {
-        width: 400px;
-    }
-    */
+
     &.umb-overlay--medium {
         width: 480px;
     }
@@ -229,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
index 18c590a06250..1e7b225bf3cb 100644
--- 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
@@ -8,18 +8,16 @@ <h1 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h1>
         <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" 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}">

From e3061bd7a5214d0da3cf97c06f0e0ea9077b5283 Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Sun, 22 Sep 2019 14:46:52 +0200
Subject: [PATCH 7/7] Remove stuff that is uneccessary

---
 src/Umbraco.Web.UI.Client/src/less/components/overlays.less     | 2 +-
 .../src/views/components/overlays/umb-overlay.html              | 1 -
 2 files changed, 1 insertion(+), 2 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
index f38c5d58b8ff..c2c4f265352c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -6,7 +6,7 @@
     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;
     }
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
index 1e7b225bf3cb..a19cf40e1a76 100644
--- 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
@@ -29,7 +29,6 @@ <h2 class="red" ng-if="model.confirmSubmit.title">
                 </h2>
                 <p ng-if="model.confirmSubmit.description">{{ model.confirmSubmit.description }}</p>
 
-                <!-- TODO: Maybe use the checkbox directive here -->
                 <label class="checkbox no-indent">
                     <input type="checkbox" ng-model="directive.enableConfirmButton" />
                     <strong>{{model.confirmSubmit.checkboxLabel}}</strong>