TabPanel 접근성
TabPanel은 WAI-ARIA 접근성 가이드라인을 구현합니다. 모든 탭 요소는 적절한 역할(role) 속성과 모든 적용 가능한 ARIA 속성을 갖추고 있습니다.
이 예제는 또한 autoSwitch 속성의 효과를 보여주는데, 이 속성은 컨트롤이 탭 키와 커서 키를 처리하는 방식을 결정합니다. 접근성 및 ARIA에 대한 자세한 정보는 W3C ARIA 실천 가이드를 참고하여주시기 바랍니다.
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;
});
}