title: Angular 2+ navigation with mat-tab-nav-bar - accessibility
body: <p>Angular material gives us in-app <a href="https://material.angular.io/components/tabs/overview#tabs-and-navigation" rel="nofollow noreferrer">navigation with tabs</a>.</p>
  <p>By Angular:</p>
  <blockquote>
  <p><code>&lt;nav mat-tab-nav-bar&gt;</code> provides a <strong>tab-like UI</strong> for navigating between routes.</p>
  </blockquote>
  <p>I want to make it more accessibile.</p>
  <p>What we have now:</p>
  <ol>
  <li><p>Navigation with arrows (<kbd>left</kbd><kbd>right</kbd><kbd>up</kbd><kbd>down</kbd>) throw the list items.</p>
  </li>
  <li><p><kbd>Enter</kbd> activate the selected tab.</p>
  </li>
  <li><p><kbd>Tab</kbd> focus on the elements in DOM as usual (not update the selection as the arrow keys, details below).</p>
  </li>
  </ol>
  <p>Accessibility requirements:</p>
  <ol>
  <li><kbd>Tab</kbd> will focus on the active tab (not necessary the focused tab).</li>
  <li><kbd>Shift+Tab</kbd> on the nav list will jump to previous element in the DOM, befor the <code>nav</code> item.
  On the content page of the router <kbd>Shift+Tab</kbd> will jump from the first focusable element to the previous active element in the <code>nav</code>.</li>
  <li><kbd>Space</kbd> should activate the selected tab like mouse click and <kbd>Enter</kbd> press.</li>
  <li>The elements in the <code>nav</code> (<code>a</code> elements) will be with the right <code>aria</code> roles.</li>
  </ol>
  <p>I don't want to change the structure, just add it the accessibility that expected from tabs.</p>
  <p>Any help please?
  How can I achieve the focus on the content from the <code>nav</code> in the correct way with the <kbd>Tab</kbd> and <kbd>Shift+Tab</kbd> keys?</p>
  <p>Looking for correct structure.</p>
  <hr />
  <h3>More Details:</h3>
  <p>The <code>mat-tab-nav-bar</code> and <code>mat-tab-link</code> directive of angular for navigation are provide only a 'like' tabs UI.
  I want to enable in-app routing navigation by <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> directive element with keyboard accessibility.</p>
  <p>From accessibility aspect I would expect navigate through the links with <code>arrow keys</code>, <code>Enter</code> activate the selected tab and <code>Tab</code> key will move the focus to the content of the routed page.</p>
  <p>Because I want to update the URL when the user chage tabs I used the <code>nav</code> element with <a href="https://material.angular.io/components/tabs/overview#tabs-and-navigation" rel="nofollow noreferrer">angular</a> <code>mat-tab-nav-bar</code> directive, like in the example below:</p>
  <pre><code>&lt;nav mat-tab-nav-bar&gt;
    &lt;a mat-tab-link
    *ngFor=&quot;let vehicle of vehicles; let i = index&quot; 
      routerLink=&quot;{{vehicle}}&quot;
              routerLinkActive=&quot;active&quot;
      (click)=&quot;activeLink = vehicle&quot;
      [active]=&quot;activeLink == vehicle&quot;&gt;
      {{vehicle}}
    &lt;/a&gt;
  &lt;/nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>In a 'real' <code>nav</code> and <code>a</code> element you can navigate with keyboard only by <code>Tab</code>, but not with arrow keys.
  But with the <code>mat-tab-nav-bar</code> directive the routing throw the tabs work indeed by arrows, but the <code>Tab</code> is not disabled for the <code>a</code> element.</p>
  <p>I want to enable the <code>tab</code> key move to the content of the selected tab.
  I thought about angular FocusMonitor, or KeyManager to solve this situation, but couldn't achieve the desired result.
  I can also auto capture the focus to the selected tab content, but again it's not exactly the behavior of tabs.</p>
  <p>For example, in this <a href="https://stackblitz.com/edit/angular-rul4hb" rel="nofollow noreferrer">demo</a> I want to navigate the tabs &quot;Cars&quot;, &quot;Airplanes&quot; and &quot;Bikes&quot; with the arrow keys. When tab selected (with <code>Enter</code> or <code>mouse</code>) the <code>Tab</code> key will navigate to the input filed in the content.
  Currently what I achieved is just focus on the input when one tab selected (as shown in the &quot;Bikes&quot; tab). But I want to navigate like real tabs.</p>
  <p>BTW,
  If you navigate throw the tabs with <code>Tab</code> on the <code>mat-tab-nav-bar</code> directive you will see the focus move from tab to tab, and press on enter will fire the click event on the <code>a</code> element. But if you press on the arrow keys to navigate throw the tabs, the focus will jump to the last active tab.
  simple reproduce: navigate with <code>Tab</code> key twice and press on the <code>right-arrow</code> key. you'll see the focus 'jumped' one step backward.</p>
  <p>Here you can see the difference (examples from the official <a href="https://material.angular.io/components/tabs/examples" rel="nofollow noreferrer">site</a>):</p>
  <p><a href="https://stackblitz.com/angular/nvpmmxdoxqly?file=src%2Fapp%2Ftab-group-dynamic-example.ts" rel="nofollow noreferrer">'Real' tabs</a>: press on tab will enter to the content of the tab.</p>
  <p><a href="https://stackblitz.com/angular/lvxvqqkopkg?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts" rel="nofollow noreferrer">'Like' tabs</a>: press on tab will just move on throw the elements in the DOM.</p>
  <p>Thanks!</p>