Accessibility in TabPanel

The TabPanel implements WAI-ARIA accessibility guidelines. All tab elements have the proper role attributes as well as all applicable ARIA attributes.

The example also shows the effect of the autoSwitch property, which affects how the control handles the tab and cursor keys. For more information on accessibilty and ARIA, please see the W3C ARIA practices and SimplyAccessible articles.

HTML

 <div id="theTabPanel">
    <div>
      <a id="hdr-africa">
        Africa
      </a>
      <div id="pane-africa">
        <ul>
          <li>Algeria</li>
          <li>Angola</li>
          <li>Benin</li>
          <li>Botswana</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="hdr-america" class="wj-state-active">
        America
      </a>
      <div id="pane-america">
        <ul>
          <li>Canada</li>
          <li>Chile</li>
          <li>Mexico</li>
          <li>United States</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="hdr-asia">
        Asia
      </a>
      <div id="pane-asia">
        <ul>
          <li>China</li>
          <li>Korea</li>
          <li>India</li>
          <li>Japan</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="hdr-europe">
        Europe
      </a>
      <div id="pane-europe">
        <ul>
          <li>Austria</li>
          <li>England</li>
          <li>France</li>
          <li>Germany</li>
          <li>Netherlands</li>
          <li>Switzerland</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="hdr-oceania">
        Oceania
      </a>
      <div id="pane-oceania">
        <ul>
          <li>Australia</li>
          <li>Fiji</li>
          <li>New Zealand</li>
          <li>Samoa</li>
        </ul>
      </div>
    </div>
  </div>
  <div>
    <label for="autoSwitch">
      autoSwitch
    </label>
    <input id="autoSwitch" type="checkbox" checked="checked">
  </div>

Javascript

import * as wjNav from '@mescius/wijmo.nav';

function init() {
    var theTabPanel = new wjNav.TabPanel('#theTabPanel');
    // toggle autoSwitch property
    document.getElementById('autoSwitch').addEventListener('click', function (e) {
        theTabPanel.autoSwitch = e.target.checked;
    });
}