From 71b04273e840474500940a947950d61571b83138 Mon Sep 17 00:00:00 2001
From: Joe Glombek <joe@rockdove.uk>
Date: Sat, 31 Oct 2020 12:27:47 +0000
Subject: [PATCH 1/2] Use umb-dropdown directive for Content dropdown

To allow keyboard toggling and automatic collapsing on click elsewhere
---
 .../umbeditornavigationitem.directive.js      |  9 +++++--
 .../umb-editor-navigation-item.less           |  2 +-
 .../editor/umb-editor-navigation-item.html    | 24 ++++++++++---------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js
index ae725ef25e8a..11ebd9dc3fc1 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js
@@ -4,8 +4,13 @@
     function UmbEditorNavigationItemController($scope, $element, $attrs) {
         
         var vm = this;
-        
-        vm.clicked = function() {
+
+        vm.close = function () {
+            vm.expanded = false;
+        };
+
+        vm.clicked = function () {
+            vm.expanded = vm.item.anchors && vm.item.anchors.length > 1 && !vm.expanded;
             vm.onOpen({item:vm.item});
         };
         
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
index 641e0dc7a71f..5e9772fb2631 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
@@ -93,7 +93,7 @@
         .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
     }
 
-    &:focus-within > &__anchor_dropdown,
+    & > &__anchor_dropdown.is-expanded,
     &:hover > &__anchor_dropdown {
         visibility: visible;
         opacity: 1;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
index 9e5669f443e4..813bc59c8446 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
@@ -1,21 +1,23 @@
 <button data-element="sub-view-{{vm.item.alias}}"
-   type="button"
-   ng-click="vm.clicked()"
-   hotkey="{{::vm.hotkey}}"
-   hotkey-when-hidden="true"
-   ng-class="{'is-active': vm.item.active, '-has-error': vm.item.hasError}"
-   ng-disabled="vm.item.disabled"
-   class="umb-sub-views-nav-item__action umb-outline umb-outline--thin">
+        type="button"
+        ng-click="vm.clicked()"
+        hotkey="{{::vm.hotkey}}"
+        hotkey-when-hidden="true"
+        ng-class="{'is-active': vm.item.active, '-has-error': vm.item.hasError }"
+        ng-disabled="vm.item.disabled"
+        class="umb-sub-views-nav-item__action umb-outline umb-outline--thin"
+        aria-haspopup="{{ vm.item.anchors && vm.item.anchors.length > 1 }}"
+        aria-expanded="{{ vm.expanded }}">
     <i class="icon {{ vm.item.icon }}" aria-hidden="true"></i>
     <span class="umb-sub-views-nav-item-text">{{ vm.item.name }}</span>
     <div ng-show="vm.item.badge" class="badge -type-{{vm.item.badge.type}}">{{vm.item.badge.count}}</div>
     <div ng-show="!vm.item.badge" class="badge -type-alert --error-badge">!</div>
 </button>
 
-<ul class="dropdown-menu umb-sub-views-nav-item__anchor_dropdown" ng-if="vm.item.anchors && vm.item.anchors.length > 1">
-    <li ng-repeat="anchor in vm.item.anchors" ng-class="{'is-active': vm.item.active && anchor.active}">
+<umb-dropdown on-close="vm.close()" umb-keyboard-list class="umb-sub-views-nav-item__anchor_dropdown" ng-class="{'is-expanded': vm.expanded}" ng-if="vm.item.anchors && vm.item.anchors.length > 1">
+    <umb-dropdown-item ng-repeat="anchor in vm.item.anchors" ng-class="{'is-active': vm.item.active && anchor.active}">
         <a href="#group-{{anchor.id}}" ng-click="vm.anchorClicked(anchor, $event)" prevent-default>
             <span class="sr-only"><localize key="visuallyHiddenTexts_jumpTo">Jump to</localize></span> {{anchor.label}} <span class="sr-only"><localize key="visuallyHiddenTexts_group"> group</localize></span>
         </a>
-    </li>
-</ul>
+    </umb-dropdown-item>
+</umb-dropdown>

From 7957bf94f7a0800bd1fd3e57e6c2b294a9d9b166 Mon Sep 17 00:00:00 2001
From: Joe Glombek <joe@rockdove.uk>
Date: Sat, 31 Oct 2020 12:37:59 +0000
Subject: [PATCH 2/2] Hide menu on blur

---
 .../src/views/components/editor/umb-editor-navigation-item.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
index 813bc59c8446..0fc84c7fb879 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
@@ -14,7 +14,7 @@
     <div ng-show="!vm.item.badge" class="badge -type-alert --error-badge">!</div>
 </button>
 
-<umb-dropdown on-close="vm.close()" umb-keyboard-list class="umb-sub-views-nav-item__anchor_dropdown" ng-class="{'is-expanded': vm.expanded}" ng-if="vm.item.anchors && vm.item.anchors.length > 1">
+<umb-dropdown on-close="vm.close()" deep-blur="vm.close()" umb-keyboard-list class="umb-sub-views-nav-item__anchor_dropdown" ng-class="{'is-expanded': vm.expanded}" ng-if="vm.item.anchors && vm.item.anchors.length > 1">
     <umb-dropdown-item ng-repeat="anchor in vm.item.anchors" ng-class="{'is-active': vm.item.active && anchor.active}">
         <a href="#group-{{anchor.id}}" ng-click="vm.anchorClicked(anchor, $event)" prevent-default>
             <span class="sr-only"><localize key="visuallyHiddenTexts_jumpTo">Jump to</localize></span> {{anchor.label}} <span class="sr-only"><localize key="visuallyHiddenTexts_group"> group</localize></span>