diff --git a/includes/form.inc b/includes/form.inc
index bc6dc4865d9..42424cc56d6 100644
--- a/includes/form.inc
+++ b/includes/form.inc
@@ -2722,7 +2722,9 @@ function theme_vertical_tabs($variables) {
// Add required JavaScript and Stylesheet.
drupal_add_library('system', 'vertical-tabs');
- return '
' . $element['#children'] . '
';
+ $output = '' . t('Vertical Tabs') . '
';
+ $output .= '' . $element['#children'] . '
';
+ return $output;
}
/**
diff --git a/misc/vertical-tabs.css b/misc/vertical-tabs.css
index 99b672d4662..be18d08740d 100644
--- a/misc/vertical-tabs.css
+++ b/misc/vertical-tabs.css
@@ -40,23 +40,25 @@ div.vertical-tabs ul.vertical-tabs-list li a {
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 strong,
+div.vertical-tabs ul.vertical-tabs-list li a:active strong,
+div.vertical-tabs ul.vertical-tabs-list li a:hover strong {
+ text-decoration: underline;
+}
+div.vertical-tabs ul.vertical-tabs-list li a:focus,
+div.vertical-tabs ul.vertical-tabs-list li a:active {
position: relative;
z-index: 5;
}
div.vertical-tabs ul.vertical-tabs-list li a:hover {
- text-decoration: none;
+ outline: 1px dotted;
}
div.vertical-tabs ul.vertical-tabs-list li.selected {
- background: #fff;
+ background-color: #fff;
border-right-width: 0;
position: relative;
}
-div.vertical-tabs ul.vertical-tabs-list li.selected a:focus {
- outline: 0;
-}
-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 {
diff --git a/misc/vertical-tabs.js b/misc/vertical-tabs.js
index 127df542014..0dbcfc29326 100644
--- a/misc/vertical-tabs.js
+++ b/misc/vertical-tabs.js
@@ -17,39 +17,42 @@ Drupal.behaviors.verticalTabs = {
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;
+
// Check if there are some fieldsets that can be converted to vertical-tabs
var $fieldsets = $('> fieldset', this);
if ($fieldsets.length == 0) {
return;
}
-
+
// Create the tab column.
- var list = $('');
- $(this).wrap('').before(list);
+ var tab_list = $('');
+ $(this).wrap('').before(tab_list);
// Transform each fieldset into a tab.
$fieldsets.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);
}
- if (focus.length) {
- focus.data('verticalTab').focus();
+ if (tab_focus.length) {
+ tab_focus.data('verticalTab').focus();
}
});
}
@@ -72,6 +75,27 @@ 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) {
+ // Enter key should not trigger inside