Index: modules/contextual/contextual.css =================================================================== RCS file: /cvs/drupal/drupal/modules/contextual/contextual.css,v retrieving revision 1.6 diff -u -r1.6 contextual.css --- modules/contextual/contextual.css 4 Jun 2010 20:38:55 -0000 1.6 +++ modules/contextual/contextual.css 10 Jul 2010 14:04:08 -0000 @@ -28,10 +28,13 @@ a.contextual-links-trigger { background: transparent url(images/gear-select.png) no-repeat 2px 0; border: 1px solid transparent; - display: none; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + display: block; height: 18px; margin: 0; padding: 0 2px; + position: absolute; outline: none; text-indent: 34px; /* LTR */ width: 28px; @@ -41,16 +44,19 @@ -khtml-border-radius: 4px; border-radius: 4px; } +a.contextual-links-trigger:active, +a.contextual-links-trigger:focus, a.contextual-links-trigger:hover, +.contextual-links-region:hover a.contextual-links-trigger, div.contextual-links-active a.contextual-links-trigger { background-position: 2px -18px; + position: relative; } div.contextual-links-active a.contextual-links-trigger { background-position: 2px -18px; background-color: #fff; border-color: #ccc; border-bottom: none; - position: relative; z-index: 1; -moz-border-radius: 4px 4px 0 0; -webkit-border-bottom-right-radius: 0; @@ -75,8 +81,6 @@ -webkit-border-bottom-left-radius: 4px; border-radius: 4px 0 4px 4px; /* LTR */ } -.contextual-links-region:hover a.contextual-links-trigger, -div.contextual-links-active a.contextual-links-trigger, div.contextual-links-active ul.contextual-links { display: block; } @@ -96,6 +100,9 @@ margin: 0.25em 0; padding: 0.25em 1em 0.25em 0.5em; } +ul.contextual-links li a:active, +ul.contextual-links li a:focus, ul.contextual-links li a:hover { + outline: none; background-color: #bfdcee; } Index: modules/contextual/contextual.js =================================================================== RCS file: /cvs/drupal/drupal/modules/contextual/contextual.js,v retrieving revision 1.5 diff -u -r1.5 contextual.js --- modules/contextual/contextual.js 26 Mar 2010 18:59:54 -0000 1.5 +++ modules/contextual/contextual.js 10 Jul 2010 14:04:08 -0000 @@ -12,33 +12,40 @@ var $wrapper = $(this); var $region = $wrapper.closest('.contextual-links-region'); var $links = $wrapper.find('ul.contextual-links'); - var $trigger = $('').text(Drupal.t('Configure')).click( - function () { + var $trigger = $('') + .text(Drupal.t('Configure')) + .click(function () { $links.stop(true, true).slideToggle(100); $wrapper.toggleClass('contextual-links-active'); return false; + }) + .focus(function () { $region.addClass('contextual-links-region-active'); }) + // Attach hover behavior to trigger and ul.contextual-links. + .add($links).hover( + function () { $region.addClass('contextual-links-region-active'); }, + function () { $region.removeClass('contextual-links-region-active'); } + ); + + // Hide the contextual links when user uses keyboard (TAB) navigation and + // is leaving the .contextual-links-wrapper. + $(document).bind('focusin', function (e) { + if (!$(e.target).closest('div.contextual-links-wrapper', $region[0]).length) { + $region.removeClass('contextual-links-region-active'); + $wrapper.removeClass('contextual-links-active'); + $links.hide(); } - ); - // Attach hover behavior to trigger and ul.contextual-links. - $trigger.add($links).hover( - function () { $region.addClass('contextual-links-region-active'); }, - function () { $region.removeClass('contextual-links-region-active'); } - ); + }); + // Hide the contextual links when user rolls out of the .contextual-links-region. - $region.bind('mouseleave', Drupal.contextualLinks.mouseleave); + $region.bind('mouseleave', function () { + $wrapper.removeClass('contextual-links-active'); + $links.hide(); + }); + // Prepend the trigger. $wrapper.prepend($trigger); }); } }; -/** - * Disables outline for the region contextual links are associated with. - */ -Drupal.contextualLinks.mouseleave = function () { - $(this) - .find('.contextual-links-active').removeClass('contextual-links-active') - .find('ul.contextual-links').hide(); -}; - })(jQuery);