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

…5963) (cherry picked from commit 4b344ac) # Conflicts: # src/Umbraco.Web.UI/Umbraco/config/lang/da.xml # src/Umbraco.Web.UI/Umbraco/config/lang/en.xml # src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
umbraco · Sep 5, 2019 · e1a438d · e1a438d
1 parent 5bbe1fa
commit e1a438d
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 9 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js b/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);
+            }
+        };
     });
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblayoutselector.directive.js b/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 });

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less b/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;

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html b/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>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1610,5 +1610,9 @@ 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>
+  <area alias="visuallyHiddenTexts">
+    <key alias="goBack">Gå tilbage</key>
+    <key alias="activeListLayout">Aktivt layout:</key>
+  </area>  
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2128,5 +2128,9 @@ 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>
+  <area alias="visuallyHiddenTexts">
+    <key alias="goBack">Go back</key>
+    <key alias="activeListLayout">Active layout:</key>
+  </area>  
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2142,5 +2142,9 @@ 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>
+  <area alias="visuallyHiddenTexts">
+    <key alias="goBack">Go back</key>
+    <key alias="activeListLayout">Active layout:</key>
+  </area>  
 </language>