====== Tab Sets (aka Navs in Bootstrap 4) ======

Tabbed interfaces are generally considered problematic for accessibility purposes, because they make it difficult for visually impaired users to construct a mental model of the content on the page. There is an open debate about the order in which tab names should be read, and discoverability vs. usability. The [[https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/|WAI tabs pattern]] emphasizes the currently active tab, on the grounds that this most closely resembles the sighted user experience. However, this pattern makes it very difficult for screen reader users to find the additional tabs. The user must use the right and left arrow keys to navigate from the current tab name.

For apps, rather than text-based content, the [[https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html|WAI manual focus tab pattern]] [[https://getbootstrap.com/docs/5.2/components/navs-tabs/#regarding-accessibility|used in Bootstrap]] makes more sense. (This is also the recommended pattern when the tab panel contents are dynamically generated, which is the case throughout Evergreen.) The tab names are read in order, as a table of contents would be, and the user navigates tabs by using the tab key to move forward and shift-tab to move back. Focus moves into the content panel after the last tab name. Pressing enter will change the active tab.

Note that there must be a focusable element in the tab content panel for this to work; otherwise you must set ''tabindex="0"'' on the first element inside the content panel.

Use [[https://ng-bootstrap.github.io/#/components/nav/api|ngbNav with the keyboard directive]] to support keyboard navigation for tabbed interfaces. Do not add a dropdown list to a tab name; there is no way for screen reader users to trigger it. Note that the keyboard shortcuts change depending on the orientation of the tabs.

In its simplest form, a tab set should look like:

<code html>
  <ul ngbNav role="tablist" [keyboard]="true">
  <li ngbNavItem role="presentation">
    <a ngbNavLink role="tab">Tab Title</a>
    <ng-template ngbNavContent>
     <!-- tab panel contents here -->
    </ng-template>
  </li>
  </ul>
</code>

We need to change these ''<a>'' tags to ''<button>'' to be completely correct, but currently the ngbNavLink selector allows only ''<a>''.