Index: misc/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 --- misc/vertical-tabs.css 31 May 2009 00:51:41 -0000 1.6 +++ misc/vertical-tabs.css 27 Sep 2009 22:21:14 -0000 @@ -4,7 +4,7 @@ div.vertical-tabs { margin: 1em 0 1em 15em; border: 1px solid #ccc; } -div.vertical-tabs ul.vertical-tabs-list { +div.vertical-tabs dl.vertical-tabs-list { width: 15em; list-style: none; list-style-image: none; /* IE6 */ @@ -25,7 +25,7 @@ div.vertical-tabs .vertical-tabs-panes f } /* Layout of each tab */ -div.vertical-tabs ul.vertical-tabs-list li { +div.vertical-tabs dl.vertical-tabs-list dt { background: #eee; border: 1px solid #ccc; border-top: 0; @@ -33,36 +33,44 @@ div.vertical-tabs ul.vertical-tabs-list margin: 0; height: 1%; } -div.vertical-tabs ul.vertical-tabs-list li a { +div.vertical-tabs dl.vertical-tabs-list dt a { display: block; text-decoration: none; padding: 0.5em 0.6em; line-height: 1.3em; height: 1%; } -div.vertical-tabs ul.vertical-tabs-list li a:focus { +div.vertical-tabs dl.vertical-tabs-list dt a:focus { + background: Highlight; + outline: 3px dotted; position: relative; z-index: 5; } -div.vertical-tabs ul.vertical-tabs-list li a:hover { + +div.vertical-tabs dl.vertical-tabs-list dt a:hover { + background: Highlight; text-decoration: none; } -div.vertical-tabs ul.vertical-tabs-list li.selected { - background: #fff; + +div.vertical-tabs dl.vertical-tabs-list dt.selected { + background: White; border-right-width: 0; position: relative; } -div.vertical-tabs ul.vertical-tabs-list li.selected a:focus { - outline: 0; + +div.vertical-tabs dl.vertical-tabs-list dt.selected a:focus { + 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 dl.vertical-tabs-list dd.selected strong, +div.vertical-tabs dl.vertical-tabs-list dd.selected small { color: #000; } -div.vertical-tabs ul.vertical-tabs-list .summary { +div.vertical-tabs dl.vertical-tabs-list .summary { display: block; + font-size: smaller; + padding-bottom: 0; } -div.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary { +div.vertical-tabs dl.vertical-tabs dl.vertical-tabs-list .summary { line-height: normal; margin-bottom: 0; } Index: misc/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 --- misc/vertical-tabs.js 31 Aug 2009 05:51:08 -0000 1.7 +++ misc/vertical-tabs.js 27 Sep 2009 22:21:14 -0000 @@ -19,12 +19,15 @@ Drupal.behaviors.verticalTabs = { var focusID = $(':hidden.vertical-tabs-active-tab', this).val(); var focus; // Create the tab column. - var list = $(''); + var list = $('
'); $(this).wrap('
').before(list); // Transform each fieldset into a tab. $('> fieldset', this).each(function () { - var tab = new Drupal.verticalTab({ title: $('> legend', this).text(), fieldset: $(this) }); + var tab = new Drupal.verticalTab({ + title: $('> legend', this).text(), + fieldset: $(this) + }); list.append(tab.item); $(this) .removeClass('collapsible collapsed') @@ -35,8 +38,8 @@ Drupal.behaviors.verticalTabs = { } }); - $('> li:first', list).addClass('first'); - $('> li:last', list).addClass('last'); + $('> dd:first', list).addClass('first'); + $('> dd:last', list).addClass('last'); if (!focus) { focus = $('> .vertical-tabs-pane:first', this); @@ -63,6 +66,26 @@ Drupal.verticalTab = function (settings) 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) { + if (event.keyCode == 13) { + // Set focus on the selected tab button again + $(".vertical-tab-button.selected").focus(); + return false; + } + }); + this.fieldset .bind('summaryUpdated', function () { self.updateSummary(); @@ -108,10 +131,11 @@ Drupal.verticalTab.prototype = { */ Drupal.theme.prototype.verticalTab = function (settings) { var tab = {}; - tab.item = $('
  • ') - .append(tab.link = $('') + tab.item = $('
    ') + //.append(tab.link = $('') + .append(tab.link = $('') .append(tab.title = $('').text(settings.title)) - .append(tab.summary = $('') + .append(tab.summary = $('
    ') ) ); return tab;