Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #16249
Closed
Open
Issue created Apr 07, 2015 by Administrator@rootContributor

Nested nav-tabs and aria-expanded

Created by: jannestad

If you nest one nav-tabs inside of another (inside tab-pane), it seems that aria-expanded="true" is set on all the li elements of the child nav-tabs when you switch tabs. This affects version 3.3.4.

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#categories" data-toggle="tab">Hovedmeny</a>
  </li>
  <li>
    <a href="#alphabet" data-toggle="tab">A til Å</a>
  </li>
</ul>

<div id="megamenu" class="tab-content">
   <div class="tab-pane active fade in" id="categories">
     ....
   </div>

   <div class="tab-pane fade" id="alphabet">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#a" data-toggle="tab">A</a>
      </li>
      <li>
        <a href="#b" data-toggle="tab">B</a>
      </li>
      <li>
        <a href="#c" data-toggle="tab">C</a>
      </li>
      <!-- etc. -->
   </ul>
   <!-- tab-content -->
 </div>

In the above, switching to the tab #alphabet will set aria-expanded="true" not only on on the a element that reference to #alphabet, but also on all the a elements for the tabs (#a, #b etc.) nested inside of the active tab-pane.

The proper behaviour would be for the status of the parent nav-tabs to not affect the child nav-tabs.

Assignee
Assign to
Time tracking