Collapse is inaccessible by keyboard if all panels are closed by default

[daGUY]

There's a flaw in the logic of the collapse extension: it assumes that one of the collapsible panels is open by default (the .in class), and sets the tabindex of that panel's header to 0 so that it can be reached via keyboard. The tabindex for each of the remaining panel headers is then set to -1:

if(collpanel.hasClass('in')){
    colltab.attr({ 'aria-controls': collpanel.attr('id'), 'aria-selected':'true', 'aria-expanded':'true', 'tabindex':'0' })
    collpanel.attr({ 'role':'tabpanel', 'tabindex':'0', 'aria-labelledby':collid, 'aria-hidden':'false' })
}else{
    colltab.attr({'aria-controls' : collpanel.attr('id'), 'tabindex':'-1' })
    collpanel.attr({ 'role':'tabpanel', 'tabindex':'-1', 'aria-labelledby':collid, 'aria-hidden':'true' })
}

This doesn't work if all of the panels are collapsed by default, because then the tabindex of all the panel headers is set to -1, which makes the entire panel group inaccessible via keyboard.

To fix this, I simply set the tabindex on the headers of the collapsed panels to 0 instead of -1:

colltab.attr({'aria-controls' : collpanel.attr('id'), 'tabindex':'0' })

There don't appear to be any side effects of doing this, other than that I can now hit Tab to move between different panel headers in addition to Left/Right or Up/Down. That's fine with me, and certainly better than the entire panel group being inaccessible!

[mpnkhan]

Even if all panels are collapsed, user can still tab to first tab header and navigate with arrow keys. If you wan't a tab navigation along with arrow key navigation, do that. Otherwise its enough to just have tabIndex=0 for first header and set tabIndex=-1 for the panel content.

[daGUY]

Even if all panels are collapsed, user can still tab to first tab header and navigate with arrow keys.

No, they can't - that's the bug. They should be able to tab to the first header, whether or not the panel is collapsed. But it doesn't work because when all of the panels are collapsed, none of them have the .in class, so the tabindex for each one gets set to -1.