Simple tabs

HTML CSS JavaScript

<the-tabs>
	<div role='tablist'>
		<button role='tab' aria-selected='true'>…</button>
		<button role='tab'>…</button>
		<button role='tab'>…</button>
	</div>

	<div role='tabpanel'>…</div>
	<div role='tabpanel' hidden>…</div>
	<div role='tabpanel' hidden>…</div>
</the-tabs>

[role='tablist'] {
	…
}

[role='tab'] {
	…
	
	&[aria-selected='true'] {
		border-bottom: 2px solid;
		…
	}
}

[role='tabpanel'] {
	…
}

class TheTabs extends HTMLElement {
	get tabs() {
		return [...this.querySelectorAll('[role=tab]')];
	}

	get panels() {
		return [...this.querySelectorAll('[role=tabpanel]')];
	}

	get selected() {
		return this.querySelector('[role=tab][aria-selected=true]');
	}

	set selected(element) {
		this.selected?.setAttribute('aria-selected', 'false');
		element?.setAttribute('aria-selected', 'true');
		element?.focus();
		this.updateSelection();
	}

	connectedCallback() {
		this.generateIds();
		this.updateSelection();
		this.setupEvents();
	}

	generateIds() {
		const prefix = Math.floor(Date.now()).toString(36);

		this.tabs.forEach((tab, index) => {
			const panel = this.panels[index];

			tab.id ||= `${prefix}-tab-${index}`;
			panel.id ||= `${prefix}-panel-${index}`;

			tab.setAttribute('aria-controls', panel.id);
			panel.setAttribute('aria-labelledby', tab.id);
		});
	}

	updateSelection() {
		this.tabs.forEach((tab, index) => {
			const panel = this.panels[index];
			const isSelected = tab.getAttribute('aria-selected') === 'true';

			tab.setAttribute('aria-selected', isSelected ? 'true' : 'false');
			tab.setAttribute('tabindex', isSelected ? '0' : '-1');
			panel.setAttribute('tabindex', isSelected ? '0' : '-1');
			panel.hidden = !isSelected;
		});
	}

	setupEvents() {
		this.tabs.forEach((tab) => {
			tab.addEventListener('click', () => this.selected = tab);

			tab.addEventListener('keydown', (e) => {
				if (e.key === 'ArrowLeft') {
					this.selected = tab.previousElementSibling ?? this.tabs.at(-1);
				} else if (e.key === 'ArrowRight') {
					this.selected = tab.nextElementSibling ?? this.tabs.at(0);
				}
			});
		});
	}
}

customElements.define('the-tabs', TheTabs);