When not using the mouse it's not easy to goto the next tab, if you use the tab key at the last field on a tab, you move to the submit button instead of going to the first field on the next tab (if any)

Files: 
CommentFileSizeAuthor
#18 567390.patch2.66 KBattiks
Passed: 12724 passes, 0 fails, 0 exceptions
[ View ]
#16 567390_tabindex.patch2.83 KBattiks
Passed: 12805 passes, 0 fails, 0 exceptions
[ View ]
#4 567390.patch2.66 KBattiks
Passed: 12782 passes, 0 fails, 0 exceptions
[ View ]

Comments

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);

Issue tags:+D7UX usability

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);

Status:Active» Needs review
StatusFileSize
new2.66 KB
Passed: 12782 passes, 0 fails, 0 exceptions
[ View ]

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

Project:Vertical Tabs» Drupal core
Version:6.x-1.x-dev» 7.x-dev
Component:User interface» node system
Category:feature» bug
Issue tags:+accessibility, +vertical tabs

moving to right queue

@attiks Can you please explain these statements with more detail?

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

Status:Needs review» Active

Status:Active» Needs review

#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.

@attiks

Thanks for working on this patch.

I really need a more detailed explanation of the problem that you are attempting to solve, and what behavior you are trying to add / modify before I can offer a review.

@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

@attiks

I did download your code and can't seem to get it to work on FF on the Mac. Could be I just don't have firefox set up correctly.

Hmm.. Actually, I was able to get it to work better, but on the 'Menu settings' tab. If I'd already clicked on the 'Revision information' tab I could tab through to the other vertical tabs. However when first loading the page I would tab to the 'Menu link title' field and then it would go to the address bar outside of the page.

Vertical tabs certainly need a better review for accessibility as it will be a big feature of D7. I can tab between forms,

Are there other functions that you see adding to _Drupal_verticalTabs_addKeyboardSupport? Can it be applied to other areas within the Drupal interface?

Ok, I tested this after turning on "Full Keyboard Access" and it worked - http://macapper.com/2008/10/23/rdy-macapper-tip-enable-full-keyboard-acc...

+1

#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

You're right about the 'problem' I was having. It was working.

I think if there was a clearer visual highlighting for the element in focus it would be way easier to navigate with a keyboard. I'd missed that it was just moving down the list of input fields. An older bug on this issue is here:
http://drupal.org/node/418306

Tab order and setting the default focus element (like in the focus module) would be nice for D7, but probably aren't something we'll see:
http://drupal.org/project/focus

I put a friend of mine in front of a D7 install months ago and tried to get him to register - http://www.youtube.com/watch?v=NyIHtNHYroM&feature

Tabbing was definitely a struggle with all of the links.

Btw, the The post Drupalcon code sprint is touching vertical tabs accessibility - http://drupal.org/code-sprint-paris
#467296: Accessibility improvements for vertical tabs

StatusFileSize
new2.83 KB
Passed: 12805 passes, 0 fails, 0 exceptions
[ View ]

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.

@attiks

I'm not sure that I like this approach, as a keyboard navigator I would not like the idea of tabbing through all of the contents of every vertical tab to get to the remaining content on the page. As one of the reasons behind tabs is that most users wont use most of the options within each tab I don't really see to much of a problem with having to tab back through the contents of the currently active tab to get back to the list of tabs.

StatusFileSize
new2.66 KB
Passed: 12724 passes, 0 fails, 0 exceptions
[ View ]

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?

@attiks

Can you please explain what behavior is being modified in the current patch?

Status:Needs review» Needs work

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.

Tested this in a more comprehensive environment.

Both the book module & file upload module cause some problems with the tabs.

With the book module I just never was able to tab beyond it.

With the file upload module I somehow was directed up to the menu bar.

Can you look at your patch with these elements enabled?

I haven't looked at these patches yet but posted a similar one over at #467296: Accessibility improvements for vertical tabs . Sorry for the duplication. We should join forces ;-)

Status:Needs work» Closed (duplicate)