Index: vertical-tabs.css =================================================================== RCS file: /cvs/drupal/drupal/misc/vertical-tabs.css,v retrieving revision 1.6 diff -u -p -r1.6 vertical-tabs.css --- vertical-tabs.css 31 May 2009 00:51:41 -0000 1.6 +++ vertical-tabs.css 9 Jan 2010 16:49:31 -0000 @@ -4,6 +4,7 @@ margin: 1em 0 1em 15em; border: 1px solid #ccc; } + div.vertical-tabs ul.vertical-tabs-list { width: 15em; list-style: none; @@ -40,27 +41,39 @@ line-height: 1.3em; height: 1%; } -div.vertical-tabs ul.vertical-tabs-list li a:focus { + +div.vertical-tabs ul.vertical-tabs-list li a:focus, +div.vertical-tabs ul.vertical-tabs-list li a:active { + background-color: highlight; + color: highlighttext; + outline: 3px dotted; position: relative; z-index: 5; } + div.vertical-tabs ul.vertical-tabs-list li a:hover { + background-color: highlight; + color: highlighttext; text-decoration: none; } + div.vertical-tabs ul.vertical-tabs-list li.selected { - background: #fff; + background-color: white; border-right-width: 0; + outline: 1px solid; position: relative; } + div.vertical-tabs ul.vertical-tabs-list li.selected a:focus { - outline: 0; + outline: 2px solid; } -div.vertical-tabs ul.vertical-tabs-list li.selected strong, -div.vertical-tabs ul.vertical-tabs-list li.selected small { +div.vertical-tabs ul.vertical-tabs-list span.selected strong { color: #000; } div.vertical-tabs ul.vertical-tabs-list .summary { display: block; + font-size: smaller; + padding-bottom: 0; } div.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary { line-height: normal; Index: vertical-tabs.js =================================================================== RCS file: /cvs/drupal/drupal/misc/vertical-tabs.js,v retrieving revision 1.7 diff -u -p -r1.7 vertical-tabs.js --- vertical-tabs.js 31 Aug 2009 05:51:08 -0000 1.7 +++ vertical-tabs.js 9 Jan 2010 16:08:49 -0000 @@ -17,31 +17,34 @@ attach: function (context) { $('.vertical-tabs-panes', context).once('vertical-tabs', function () { var focusID = $(':hidden.vertical-tabs-active-tab', this).val(); - var focus; + var tab_focus; // Create the tab column. - var list = $(''); - $(this).wrap('
').before(list); + var tab_list = $(''); + $(this).wrap('
').before(tab_list); // Transform each fieldset into a tab. $('> fieldset', this).each(function () { - var tab = new Drupal.verticalTab({ title: $('> legend', this).text(), fieldset: $(this) }); - list.append(tab.item); + var vertical_tab = new Drupal.verticalTab({ + title: $('> legend', this).text(), + fieldset: $(this) + }); + tab_list.append(vertical_tab.item); $(this) .removeClass('collapsible collapsed') .addClass('vertical-tabs-pane') - .data('verticalTab', tab); + .data('verticalTab', vertical_tab); if (this.id == focusID) { - focus = $(this); + tab_focus = $(this); } }); - $('> li:first', list).addClass('first'); - $('> li:last', list).addClass('last'); + $('> li:first', tab_list).addClass('first'); + $('> li:last', tab_list).addClass('last'); - if (!focus) { - focus = $('> .vertical-tabs-pane:first', this); + if (!tab_focus) { + tab_focus = $('> .vertical-tabs-pane:first', this); } - focus.data('verticalTab').focus(); + tab_focus.data('verticalTab').focus(); }); } }; @@ -63,6 +66,27 @@ return false; }); + // Keyboard events added: + // Pressing the Enter key will open the tab pane. + this.link.keydown(function(event) { + if (event.keyCode == 13) { + self.focus(); + // Set focus on the first input field of the visible fieldset/tab pane. + $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus(); + return false; + } + }); + + // Pressing the Enter key lets you leave the tab again. + this.fieldset.keydown(function(event) { + // Enter key should not trigger inside