Accessibility: Grid filter drop down can't be accessed via keyboard

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

@@ -233,4 +233,41 @@ 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,6 +24,7 @@
         vm.showLayoutSelector = true;
         vm.pickLayout = pickLayout;
         vm.toggleLayoutDropdown = toggleLayoutDropdown;
+        vm.leaveLayoutDropdown = leaveLayoutDropdown;
         vm.closeLayoutDropdown = closeLayoutDropdown;
 
         function onInit() {
@@ -38,6 +39,10 @@
             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,6 +4,7 @@
 }
 
 .umb-layout-selector__active-layout {
+   background: transparent;
    box-sizing: border-box;
    border: 1px solid @inputBorder;
    cursor: pointer;
@@ -33,6 +34,7 @@
 }
 
 .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,20 +1,26 @@
 <div class="umb-layout-selector" ng-show="vm.showLayoutSelector">
 
-   <div class="umb-layout-selector__active-layout" ng-click="vm.toggleLayoutDropdown()">
-      <i class="{{ vm.activeLayout.icon }}"></i>
-   </div>
+   <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 ng-if="vm.layoutDropDownIsOpen"
         class="umb-layout-selector__dropdown shadow-depth-3 animated -half-second fadeIn"
-        on-outside-click="vm.closeLayoutDropdown()">
+        on-outside-click="vm.closeLayoutDropdown()"
+        deep-blur="vm.leaveLayoutDropdown()">
 
-       <div ng-repeat="layout in vm.layouts | filter:{selected:true} track by $id(layout)"
+       <button type="button" prevent-default 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"></i>
+           <i class="{{ layout.icon }} umb-layout-selector__dropdown-item-icon" aria-hidden="true"></i>
+           <span class="sr-only">{{layout.name}}</span>
        </div>
 
    </div>

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

@@ -1613,6 +1613,7 @@ Mange hilsner fra Umbraco robotten
     <key alias="formsInstall">Installer Umbraco Forms</key>
   </area>
   <area alias="visuallyHiddenTexts">
-    <key alias="goBack">Gå tilbage</key>
+    <key alias="goBack">Gå tilbage</key>
+    <key alias="activeListLayout">Aktivt layout:</key>
   </area>
 </language>

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

@@ -2131,6 +2131,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="formsInstall">Install Umbraco Forms</key>
   </area>
   <area alias="visuallyHiddenTexts">
-    <key alias="goBack">Go back</key>
+    <key alias="goBack">Go back</key>
+    <key alias="activeListLayout">Active layout:</key>
   </area>
 </language>

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

@@ -2145,6 +2145,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="formsInstall">Install Umbraco Forms</key>
   </area>
   <area alias="visuallyHiddenTexts">
-    <key alias="goBack">Go back</key>
+    <key alias="goBack">Go back</key>
+    <key alias="activeListLayout">Active layout:</key>
   </area>
 </language>