diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js
index 96ce8735ebe7..9a841e3e4ad3 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js
@@ -21,14 +21,6 @@ Use this directive to render a ui component for selecting child items to a paren
                 on-remove="vm.removeChild">
         </umb-child-selector>
 
-        <!-- use overlay to select children from -->
-        <umb-overlay
-           ng-if="vm.overlay.show"
-           model="vm.overlay"
-           position="target"
-           view="vm.overlay.view">
-        </umb-overlay>
-
 	</div>
 </pre>
 
@@ -37,7 +29,7 @@ Use this directive to render a ui component for selecting child items to a paren
 	(function () {
 		"use strict";
 
-		function Controller() {
+		function Controller(overlayService) {
 
             var vm = this;
 
@@ -64,23 +56,29 @@ Use this directive to render a ui component for selecting child items to a paren
             vm.removeChild = removeChild;
 
             function addChild($event) {
-                vm.overlay = {
+                
+                const dialog = {
                     view: "itempicker",
                     title: "Choose child",
                     availableItems: vm.availableChildren,
                     selectedItems: vm.selectedChildren,
                     event: $event,
-                    show: true,
                     submit: function(model) {
-
-                        // add selected child
-                        vm.selectedChildren.push(model.selectedItem);
+                        
+                        if (model.selectedItem) {
+                            // add selected child
+                            vm.selectedChildren.push(model.selectedItem);
+                        }
 
                         // close overlay
-                        vm.overlay.show = false;
-                        vm.overlay = null;
+                        overlayService.close();
+                    },
+                    close: function() {
+                        overlayService.close();
                     }
                 };
+
+                overlayService.open(dialog);
             }
 
             function removeChild($index) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
index 1d88c0eb96b9..f038b8c4aaa3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
@@ -3,7 +3,7 @@
     <div class="umb-child-selector__child -parent">
         <div class="umb-child-selector__child-description">
             <div class="umb-child-selector__child-icon-holder">
-                <i class="umb-child-selector__child-icon {{ parentIcon }}"></i>
+                <i class="umb-child-selector__child-icon {{ parentIcon }}" aria-hidden="true"></i>
             </div>
             <span class="umb-child-selector__child-name">
                 <strong>{{ parentName }}</strong>
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js
index da8dee8e033c..94e0b443ca1f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js
@@ -14,12 +14,9 @@
         /* ----------- SCOPE VARIABLES ----------- */
 
         var vm = this;
-        var childNodeSelectorOverlayTitle = "";
 
         vm.contentTypes = [];
         vm.selectedChildren = [];
-
-        vm.overlayTitle = "";
         vm.showAllowSegmentationOption = Umbraco.Sys.ServerVariables.umbracoSettings.showAllowSegmentationForDocumentTypes || false;
 
         vm.addChild = addChild;
@@ -65,16 +62,18 @@
         }
 
         function addChild($event) {
-            var childNodeSelectorOverlay = {
+            
+            const dialog = {
                 view: "itempicker",
-                title: childNodeSelectorOverlayTitle,
                 availableItems: vm.contentTypes,
                 selectedItems: vm.selectedChildren,
                 position: "target",
                 event: $event,
-                submit: function(model) {
-                    vm.selectedChildren.push(model.selectedItem);
-                    $scope.model.allowedContentTypes.push(model.selectedItem.id);
+                submit: function (model) {
+                    if (model.selectedItem) {
+                        vm.selectedChildren.push(model.selectedItem);
+                        $scope.model.allowedContentTypes.push(model.selectedItem.id);
+                    }
                     overlayService.close();
                 },
                 close: function() {
@@ -82,8 +81,10 @@
                 }
             };
 
-            overlayService.open(childNodeSelectorOverlay);
-
+            localizationService.localize("contentTypeEditor_chooseChildNode").then(value => {
+                dialog.title = value;
+                overlayService.open(dialog);
+            });
         }
 
         function removeChild(selectedChild, index) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js b/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js
index 53a098a26e6e..7ff479327240 100644
--- a/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js
@@ -6,7 +6,6 @@
         /* ----------- SCOPE VARIABLES ----------- */
 
         var vm = this;
-        var childNodeSelectorOverlayTitle = "";
 
         vm.mediaTypes = [];
         vm.selectedChildren = [];
@@ -22,10 +21,6 @@
 
         function init() {
 
-            localizationService.localize("contentTypeEditor_chooseChildNode").then(function(value){
-                childNodeSelectorOverlayTitle = value;
-            });
-
             mediaTypeResource.getAll().then(function(mediaTypes){
 
                 vm.mediaTypes = mediaTypes;
@@ -44,23 +39,29 @@
         }
 
         function addChild($event) {
-            var childNodeSelectorOverlay = {
+            
+            var dialog = {
                 view: "itempicker",
-                title: childNodeSelectorOverlayTitle,
                 availableItems: vm.mediaTypes,
                 selectedItems: vm.selectedChildren,
                 position: "target",
                 event: $event,
-                submit: function(model) {
-                    vm.selectedChildren.push(model.selectedItem);
-                    $scope.model.allowedContentTypes.push(model.selectedItem.id);
+                submit: function (model) {
+                    if (model.selectedItem) {
+                        vm.selectedChildren.push(model.selectedItem);
+                        $scope.model.allowedContentTypes.push(model.selectedItem.id);
+                    }
                     overlayService.close();
                 },
                 close: function() {
                     overlayService.close();
                 }
             };
-            overlayService.open(childNodeSelectorOverlay);
+
+            localizationService.localize("contentTypeEditor_chooseChildNode").then(value => {
+                dialog.title = value;
+                overlayService.open(dialog);
+            });
         }
 
         function removeChild(selectedChild, index) {