Use vertical tabs with keyboard only

Proof of concept and what's missing
1/ shift tab isn't working (you don't go to the previous tab)
2/ shift tab on the last field moves you to the next tab
3/ selector isn't working for radios (for example on comment settings)
4/ last tab isn't detected
5/ maybe more ;p

(function ($) { 
$('div.vertical-tabs-panes > fieldset').each(
  function() {
    $(':input:last', this).blur(
    function() {
      var t = $(this);
      var fs = t.closest('fieldset');
      console.log (fs);
      var n = fs.next();
      var c1 = $(':input:first', n);
      n.data('verticalTab').focus();
      console.log (n);
      console.log (c1);
      c1.focus();
    });
  });
})(jQuery); 

Updated
Fixed
1/ shift tab is working
2/ last tab is detected

Not fixed
1/ selector isn't working for radios (for example on comment settings)

(function ($) { 
$('div.vertical-tabs-panes > fieldset').not(':last').each(
  function() {
    $(':input:last', this).keydown(
    function(e) {
      if (!e.shiftKey && e.keyCode == 9) {
        var t = $(this);
        var fs = t.closest('fieldset');
        console.log (fs);
        var n = fs.next();
        var c1 = $(':input:first', n);
        n.data('verticalTab').focus();
        console.log (n);
        console.log (c1);
        c1.focus();
      }
    });
  });

$('div.vertical-tabs-panes > fieldset').not(':first').each(
  function() {
    $(':input:first', this).keydown(
    function(e) {
      if (e.shiftKey && e.keyCode == 9) {
        var t = $(this);
        var fs = t.closest('fieldset');
        console.log (fs);
        var n = fs.prev();
        var c1 = $(':input:last', n);
        n.data('verticalTab').focus();
        console.log (n);
        console.log (c1);
        c1.focus();
      }
    });
  });

})(jQuery); 

it seems to be fully working, time for a patch

(function ($) { 

// bind to all radio elements --> use name $('[name='])
// what with empty tabs? or tabs with all inputs disabled? it breaks

$('div.vertical-tabs-panes > fieldset').not(':last').each(
  function() {
    // All but radio
    $(':input:enabled:last', this).not('[type=radio]').bind ('keydown', 
    function(e) {
      if (!e.shiftKey && e.keyCode == 9) {
        var t = $(this);
        var fs = t.closest('fieldset');
        var n = fs.next();
        var c1 = $(':input:enabled:first', n);
        n.data('verticalTab').focus();
        c1.focus();
        return false;
      }
    });
    // Radios
    var radioname = $(':input:enabled:last[type=radio]', this).attr('name');
    $('[name='+radioname+']').bind ('keydown', 
    function(e) {
      if (!e.shiftKey && e.keyCode == 9) {
        var t = $(this);
        var fs = t.closest('fieldset');
        var n = fs.next();
        var c1 = $(':input:enabled:first', n);
        n.data('verticalTab').focus();
        c1.focus();
        return false;
      }
    });

  });

$('div.vertical-tabs-panes > fieldset').not(':first').each(
  function() {
    // All but radio
    $(':input:enabled:first', this).not('[type=radio]').bind ('keydown', 
    function(e) {
      if (e.shiftKey && e.keyCode == 9) {
        var t = $(this);
        var fs = t.closest('fieldset');
        var n = fs.prev();
        var c1 = $(':input:enabled:last', n);
        n.data('verticalTab').focus();
        c1.focus();
        return false;
      }
    });
    // Radios
    var radioname = $(':input:enabled:first[type=radio]', this).attr('name');
    $('[name='+radioname+']').bind ('keydown', 
    function(e) {
      if (e.shiftKey && e.keyCode == 9) {
        var t = $(this);
        var fs = t.closest('fieldset');
        var n = fs.prev();
        var c1 = $(':input:enabled:last', n);
        n.data('verticalTab').focus();
        c1.focus();
        return false;
      }
    });
  });

})(jQuery); 

Patch against d7 head included, not really sure if i used the best way to initiate it.

moving to right queue

#6, those were issue in the first version, the patch doesn't have this problems anymore.

The only problem left (but not tested) as far as i know is that you have a tab without any (enabled) input elements the tabbing will break because there are no elements to bind the 'keyup' event to. But as far as I know there are no tabs without any input element.

@Everett

If you create a new node on D7 and you only use the keyboard to navigate between the different input fields, there's no easy way to go from the first tab to the second tab. This patch adds the functionality that:

- if you press the tab key on the last input field on a tab, you'll go to the first field of the next tab.
- if you're on the last tab, you'll go to the submit button
- if you press shift tab on the first input field of a tab (except the first one) you'll goto the previous tab

I hope it's clear, if not ask away

#12
The 'problem' you're facing is because the tabs selectors on the left side are defined before the actual tabs, so you'll have to tab through them before you reach the first input field.

I guess we can solve this by defining the tabindex on the a links vertical tabs create.

This functionality should work for all vertical tabs, no matter where they are.

#13
Thanks

Update: Edited typo

New patch attached which sets the tabindex on the li > a elements of the selectors on the left side, so you go straight to the first input element on the tab instead of having to tab through all the selectors first.

Good point, let's commit the first patch and leave the tabindex part for another day, I'll create a new issue for it: #569080: To change the tabindex on vertical tabs or not?

I mis read your comment in #17, actually you're saying to leave everything like it is now. So i guess we need more input on this to make sure people want to change this or not.