Skip to content

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

Open

Description

@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!

Activity

  1. mpnkhan commented on Jul 11, 2018

    @mpnkhan
    Contributor

    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.

  2. daGUY commented on Jul 11, 2018

    @daGUY
    Author

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions