@primer/view-components
Version:
ViewComponents for the Primer Design System
26 lines (25 loc) • 1.15 kB
JavaScript
/* eslint-disable custom-elements/no-constructor */
export default class SegmentedControlElement extends HTMLElement {
constructor() {
super();
this.addEventListener('click', (event) => {
const controls = Array.from(this.querySelectorAll('ul li')).filter(tab => tab instanceof HTMLElement && tab.closest(this.tagName) === this);
if (!(event.target instanceof Element))
return;
if (event.target.closest(this.tagName) !== this)
return;
const selectedControl = event.target.closest('li');
if (!(selectedControl instanceof HTMLElement) || !selectedControl.closest('ul'))
return;
for (const control of controls) {
control.setAttribute('aria-current', 'false');
}
selectedControl.setAttribute('aria-current', 'true');
selectedControl.focus();
});
}
}
if (!window.customElements.get('segmented-control')) {
window.SegmentedControlElement = SegmentedControlElement;
window.customElements.define('segmented-control', SegmentedControlElement);
}