Revert "Accessibility: Grid filter drop down can't be accessed via keyboard (#5963)"

This reverts commit e1a438dfc9.

Should not have been picked into a patch release :)

src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js

@@ -233,41 +233,4 @@ angular.module('umbraco.directives')
                 });
             }
         };
-    })
-    
-    // A slightly modified version of https://github.com/myplanet/angular-deep-blur/blob/master/angular-deep-blur.js - Kudos to Ufuk Kayserilioglu (paracycle)
-    .directive('deepBlur', function ($timeout) {
-        return {
-
-            restrict: 'A',
-
-            controller: function ($scope, $element, $attrs) {
-                var leaveExpr = $attrs.deepBlur,
-                    dom = $element[0];
-
-                function containsDom(parent, dom) {
-                    while (dom) {
-                        if (dom === parent) {
-                            return true;
-                        }
-                        dom = dom.parentNode;
-                    }
-                    return false;
-                }
-
-                function onBlur(e) {
-                    var targetElement = e.relatedTarget;
-
-                    if (!containsDom(dom, targetElement)) {
-                        $timeout(function () {
-                            $scope.$apply(leaveExpr);
-                        }, 10);
-                    }
-                }
-
-                dom.addEventListener('blur', onBlur, true);
-            }
-        };
     });
-
-    

src/Umbraco.Web.UI.Client/src/common/directives/components/umblayoutselector.directive.js

@@ -24,7 +24,6 @@
         vm.showLayoutSelector = true;
         vm.pickLayout = pickLayout;
         vm.toggleLayoutDropdown = toggleLayoutDropdown;
-        vm.leaveLayoutDropdown = leaveLayoutDropdown;
         vm.closeLayoutDropdown = closeLayoutDropdown;
 
         function onInit() {
@@ -39,10 +38,6 @@
             vm.layoutDropDownIsOpen = !vm.layoutDropDownIsOpen;
         }
 
-        function leaveLayoutDropdown() {
-            vm.layoutDropDownIsOpen = false;
-        }
-
         function pickLayout(selectedLayout) {
             if (vm.onLayoutSelect) {
                 vm.onLayoutSelect({ layout: selectedLayout });

src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less

@@ -4,7 +4,6 @@
 }
 
 .umb-layout-selector__active-layout {
-   background: transparent;
    box-sizing: border-box;
    border: 1px solid @inputBorder;
    cursor: pointer;
@@ -34,7 +33,6 @@
 }
 
 .umb-layout-selector__dropdown-item {
-   background: transparent;
    padding: 5px;
    margin: 3px 5px;
    display: flex;

src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html

@@ -1,26 +1,20 @@
 <div class="umb-layout-selector" ng-show="vm.showLayoutSelector">
 
-   <button type="button" aria-expanded="{{vm.layoutDropDownIsOpen}}" class="umb-layout-selector__active-layout" ng-click="vm.toggleLayoutDropdown()" prevent-default>
-      <i class="{{ vm.activeLayout.icon }}" aria-hidden="true"></i>
-      <span class="sr-only">
-          <localize key="visuallyHiddenTexts_activeListLayout">Active layout:</localize>&nbsp;
-          {{vm.activeLayout.name}}
-      </span>
-   </button>
+   <div class="umb-layout-selector__active-layout" ng-click="vm.toggleLayoutDropdown()">
+      <i class="{{ vm.activeLayout.icon }}"></i>
+   </div>
 
    <div ng-if="vm.layoutDropDownIsOpen"
         class="umb-layout-selector__dropdown shadow-depth-3 animated -half-second fadeIn"
-        on-outside-click="vm.closeLayoutDropdown()"
-        deep-blur="vm.leaveLayoutDropdown()">
+        on-outside-click="vm.closeLayoutDropdown()">
 
-       <button type="button" prevent-default ng-repeat="layout in vm.layouts | filter:{selected:true} track by $id(layout)"
+       <div ng-repeat="layout in vm.layouts | filter:{selected:true} track by $id(layout)"
             class="umb-layout-selector__dropdown-item"
             ng-click="vm.pickLayout(layout)"
             ng-class="{'-active': layout.active }"
             ng-attr-title="{{layout.name}}">
 
-           <i class="{{ layout.icon }} umb-layout-selector__dropdown-item-icon" aria-hidden="true"></i>
-           <span class="sr-only">{{layout.name}}</span>
+           <i class="{{ layout.icon }} umb-layout-selector__dropdown-item-icon"></i>
        </div>
 
    </div>

src/Umbraco.Web.UI/Umbraco/config/lang/da.xml

@@ -1610,9 +1610,5 @@ Mange hilsner fra Umbraco robotten
     <key alias="settingsProfiler">Profiling</key>
     <key alias="memberIntro">Kom godt i gang</key>
     <key alias="formsInstall">Installer Umbraco Forms</key>
-  </area>
-  <area alias="visuallyHiddenTexts">
-    <key alias="goBack">Gå tilbage</key>
-    <key alias="activeListLayout">Aktivt layout:</key>
-  </area>  
+  </area>
 </language>

src/Umbraco.Web.UI/Umbraco/config/lang/en.xml

@@ -2128,9 +2128,5 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="settingsProfiler">Profiling</key>
     <key alias="memberIntro">Getting Started</key>
     <key alias="formsInstall">Install Umbraco Forms</key>
-  </area>
-  <area alias="visuallyHiddenTexts">
-    <key alias="goBack">Go back</key>
-    <key alias="activeListLayout">Active layout:</key>
-  </area>  
+  </area>>
 </language>

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -2142,9 +2142,5 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="settingsProfiler">Profiling</key>
     <key alias="memberIntro">Getting Started</key>
     <key alias="formsInstall">Install Umbraco Forms</key>
-  </area>
-  <area alias="visuallyHiddenTexts">
-    <key alias="goBack">Go back</key>
-    <key alias="activeListLayout">Active layout:</key>
-  </area>  
+  </area>
 </language>