search

ng-bootstrap / ng-bootstrap

Angular powered Bootstrap
https://ng-bootstrap.github.io
MIT License
8.22k stars 1.55k forks source link

Tabs accessibility: missing aria roles & attributes #1118

Closed ygatesoupe closed 7 years ago

ygatesoupe commented 7 years ago

Tab heading <a class="nav-link"> is missing role="tab", aria-expanded and aria-controls

Tab content misses the aria-expanded attribute but yet has role="tabpanel" and aria-labelledby (which is great).

<ngb-tabset>
    <ul role="tablist" class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="" id="ngb-tab-0">
          Simple
        </a>
      </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" role="tabpanel" aria-labelledby="ngb-tab-0">
            <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
      master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
      dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
      iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </div>
    </div>
  </ngb-tabset>

Bootstrap implementation

pkozlowski-opensource commented 7 years ago

Thnx for brining this up. Would you mind sending us a PR with updates to the tabset component? Thnx!