diff --git a/modules/admin_toolbar/css/admin.toolbar.css b/modules/admin_toolbar/css/admin.toolbar.css index 38c2761..2a5211c 100644 --- a/modules/admin_toolbar/css/admin.toolbar.css +++ b/modules/admin_toolbar/css/admin.toolbar.css @@ -3,7 +3,7 @@ background: #fff; } -.toolbar-tray-horizontal .menu-item:focus { +.toolbar-tray-horizontal .menu-item a:focus { background: #abeae4; } @@ -74,12 +74,30 @@ background-repeat: no-repeat; } +/* Make the toolbar menu navigable with keyboard */ +ul.toolbar-menu li.menu-item--expanded.focused > ul, +.toolbar-tray-horizontal ul.toolbar-menu li.menu-item--expanded.focused > ul { + display: block; + position: absolute; + width: 200px; + box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4); + z-index: 1; +} + +.toolbar-tray-horizontal ul li.menu-item--expanded .menu-item.focused > ul { + display: block; +} +.toolbar-tray-horizontal ul li.menu-item--expanded .menu-item.focused ul { + margin: -39px 0 0 200px; +} + .toolbar-tray-horizontal ul li.menu-item--expanded .menu-item:hover ul { display: block; margin: -40px 0 0 197px; } -.toolbar-tray-horizontal li:hover ul li { +.toolbar-tray-horizontal li:hover ul li, +.toolbar-tray-horizontal li.focused li { float: none; } @@ -107,6 +125,10 @@ float: none !important; } +[dir="rtl"] .toolbar-tray-horizontal li:focus ul li { + float: none !important; +} + [dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon { padding-left: 1.3333em; } @@ -115,6 +137,10 @@ margin: -40px 197px 0 0; } +[dir="rtl"] .toolbar-tray-horizontal ul li.menu-item--expanded .menu-item:focus ul { + margin: -40px 197px 0 0; +} + [dir="rtl"] .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded { background-position: center left; background-image: url('../misc/icons/0074bd/chevron-left.svg'); diff --git a/modules/admin_toolbar/js/admin_toolbar.js b/modules/admin_toolbar/js/admin_toolbar.js index bc9c3b8..0ed3e32 100644 --- a/modules/admin_toolbar/js/admin_toolbar.js +++ b/modules/admin_toolbar/js/admin_toolbar.js @@ -8,8 +8,21 @@ $(this).parents('li.menu-item--expanded').addClass('focused'); }); + $('ul.toolbar-menu li.menu-item a').keydown(function (e) { + if ((e.shiftKey && (e.keyCode || e.which) == 9)) { + if ($(this).parent('.menu-item').prev().hasClass('menu-item--expanded')){ + $(this).parent('.menu-item').prev().addClass('focused'); + } + } + }); + $('body').on('click', function(){ $('li.menu-item--expanded').removeClass('focused'); }); + + $('body').hover(function () { + $('li.menu-item--expanded').removeClass('focused'); + }); + }); })(jQuery);