Bootstrap tabs WAI-ARIA attributes set for better accessibility

[bassettsj]

Again from the paypal/bootstrap-accessibility-plugin, these changes should be added to the documentation and the JS plugin.

Tab Panel

1. Add ARIA roles like tablist, presentation, and tab for tabs UL, LI.
2. Add tabIndex, aria-expanded, aria-selected, aria-controls for tab.
3. Add ARIA roles of tabpanel, tabIndex, aria-hidden, and aria-labelledBy for tabPanel.
4. Add keydown event listener for the tab to work with keyboard.
5. Dynamically flip tabIndex, aria-selected, and aria-expanded for tab when it is activated and add aria-hidden to hide the previously visible tab.

[asaf]

According to the WAI ARIA spec, it is also required to completely remove the wrapper tag for the tab panels. (the div with the tab-content class

[cvrebert]

• Need to take into account paypal/bootstrap-accessibility-plugin@f203dea

[apexskier]

Would it be acceptable to add the aria-controls attributes based on the href target of the anchors they are being applied to?

[goetsu]

the role="tabpanel" doesn't need to be applied to the parent div it's only needed for the content div :

<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">...</ul>
<div class="tab-content">
<div id="overview" class="tab-pane overview" role="tabpanel">...</div>
...
</div>
</div>

must be :

<div>
<ul class="nav nav-tabs" role="tablist">...</ul>
<div class="tab-content">
<div id="overview" class="tab-pane overview">...</div>
...
</div>
</div>

[patrickhlauke]

@goetsu i believe that is incorrect. please refer to the examples for http://www.w3.org/TR/wai-aria-practices/#tabpanel - e.g. http://www.oaa-accessibility.org/examplep/tabpanel1/

[edit: also, please don't start fragmenting the discussion from https://github.com/w3c/wai-wcag-quickref/issues/2#issuecomment-86899548 to here as well]

[goetsu]

that's what i do and there is no role tabpanel on the parent div

, as this is a bootstrap issue I look more logical to duplicate it here but I can keep with the initial comment on wai wcag quickref if you prefere

[patrickhlauke]

and there isn't a role="tabpanel" on the parent div in http://getbootstrap.com/javascript/#markup either, so not sure what you're driving at here.

[goetsu]

<div role="tabpanel">

  <!-- Nav tabs -->

[patrickhlauke]

Ah, now I see what you mean. Your second code example removes role="tabpanel" from the actual tab panel itself, so that's quite confusing as that's what I was focusing on when replying - and that part is clearly wrong in your proposed change.

Can I suggest that you don't simply append comments to issues like this in future, and please file an appropriate separate issue, being quite specific about what you actually mean?

[goetsu]

ok sorry for that and I agree that the actual tab panel itself need role="tabpanel"

[mdo]

What's the status of this one? Does a lot of stuff still need addressing? What can be done in v3 vs v4?

/cc @patrickhlauke

[patrickhlauke]

Need some time to review what our current state of tabs is, as I've admittedly lost track. I'm guessing if we're still missing something related to attributes, that'll be fixed with my plan to automagically inject them.

[peterh-capella]

I've been doing some work recently with adding additional accessibility and flexibility to the already good work done with tabs. One thing relevant here is changing the attribute on the tab from aria-expanded to aria-selected to conform to standards. ("In either case, authors SHOULD ensure that a selected tab has its aria-selected attribute set to true....") I also abstracted the markup a bit to allow tabs that are not structured as a list. (Recently found that some screen-reader users prefer this, particularly for site navigation. See this CSS-tricks post.) Other work I'm doing looks like it addresses some of the issues in the original post.

So this is basically following Step 1 of the Pull Request contribution guidelines: asking first if my work and contribution would be useful.

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team