yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accessibility (keyboard navigation): The 'Content' drop down menu opens automatically when tabbing (#9325)

Browse Source 
* 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 <joe@rockdove.uk>
This commit is contained in:
Joe Glombek
2020-11-18 15:14:48 +00:00
committed by GitHub
parent 353aaa46c7
commit 02d8b3c339
3 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js
View File

@@ -5,7 +5,12 @@
var vm = this;
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});
};

2
src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
View File

@@ -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;

12
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
View File

@@ -5,17 +5,19 @@
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">
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>