1 import {Component} from './component';
5 * Uses accessible attributes to drive its functionality.
6 * On tab wrapping element:
8 * On tabs (Should be a button):
11 * - aria-selected=true/false
12 * - aria-controls=<id-of-panel-section>
17 * - aria-labelledby=<id-of-tab-for-panel>
18 * - hidden (If not shown by default).
20 export class Tabs extends Component {
23 this.container = this.$el;
24 this.tabs = Array.from(this.container.querySelectorAll('[role="tab"]'));
25 this.panels = Array.from(this.container.querySelectorAll('[role="tabpanel"]'));
27 this.container.addEventListener('click', event => {
28 const button = event.target.closest('[role="tab"]');
30 this.show(button.getAttribute('aria-controls'));
36 for (const panel of this.panels) {
37 panel.toggleAttribute('hidden', panel.id !== sectionId);
40 for (const tab of this.tabs) {
41 const tabSection = tab.getAttribute('aria-controls');
42 const selected = tabSection === sectionId;
43 tab.setAttribute('aria-selected', selected ? 'true' : 'false');
46 this.$emit('change', {showing: sectionId});