From 02d8b3c3396ed53e74cc37fff34a7c9e270a5a1b Mon Sep 17 00:00:00 2001 From: Joe Glombek Date: Wed, 18 Nov 2020 15:14:48 +0000 Subject: [PATCH] Accessibility (keyboard navigation): The 'Content' drop down menu opens 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 --- .../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..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 @@ -1,21 +1,23 @@ - + +