A11y [Tabset]: incorrect ARIA attributes and roles

[asapach]

Bug description:

ngb-tab uses semantically incorrect aria-expanded attribute for tabs: https://ng-bootstrap.github.io/#/components/tabset/examples

<ngb-tabset>
  <ul role="tablist" class="nav nav-tabs justify-content-start">
    <li class="nav-item">
      <a class="nav-link active" href="" role="tab"... aria-expanded="true" aria-disabled="false">
        Simple
      </a>
    </li>
    ...
</ul>

Screen readers will announce tabs as either "collapsed" or "expanded" which make no sense, because aria-expanded should be used for collapsible content like accordions.

ARIA guidelines recommend using aria-selected attribute instead: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

The Bootstrap JavaScript is correctly using aria-selected in this case, which is a regression for ng-bootstrap.

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#home" role="tab" ... aria-selected="true">
       Home
    </a>
  </li>
    ...
</ul>

This was raised during the initial PR review, but consequently ignored.

Also, since <ul> is used as role=tablist, the list items need to be excluded from the accessibility tree so that screen readers would ignore their semantic role.
Currently the tabs are announced as "tab 1 of 1", but if you add role=none to <li> it will be announced as "1 of 3":

<ngb-tabset>
  <ul role="tablist" class="nav nav-tabs justify-content-start">
    <li class="nav-item" role="none">
      <a class="nav-link active" href="" role="tab"... aria-selected="true" aria-disabled="false">
        Simple
      </a>
    </li>
    ...
</ul>

Link to minimally-working StackBlitz that reproduces the issue:

https://ng-bootstrap.github.io/stackblitzes/tabset/basic/stackblitz.html

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.x or 8.x

ng-bootstrap: 4.x or 5.x

Bootstrap: 4.x

[benouat]

The Bootstrap JavaScript is correctly using aria-selected in this case, which is a regression for ng-bootstrap.

I agree, and we should fix. #3292 is there for that.

Currently the tabs are announced as "tab 1 of 1", but if you add role=none to <li> it will be announced as "1 of 3":

On that one, I disagree, I think we do want the tabs to be announced as tabs ! 😄

[asapach]

On that one, I disagree, I think we do want the tabs to be announced as tabs ! 😄

Sorry, I've omitted it the second time. If you're curios, NVDA on Firefox currently announces it as:

Simple tab selected expanded 1 of 1

And it should be:

Simple tab selected 1 of 3

[asapach]

It looks like the aria-expanded issue has been fixed in v5.1.0 via #3292. This leaves the missing role=none on list items. I can close this issue and create a new one if that would be easier.

[benouat]

@asapach yes please do so 👍

[asapach]

Closing in favor of #3302