Accessibility (keyboard navigation): The 'Content' drop down menu ope…

…ns automatically when tabbing (#9325)

* Use umb-dropdown directive for Content dropdown

To allow keyboard toggling and automatic collapsing on click elsewhere

* Hide menu on blur

Co-authored-by: Joe Glombek <[email protected]>

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});
         };
 

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;

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()" 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>
         </a>
-    </li>
-</ul>
+    </umb-dropdown-item>
+</umb-dropdown>