Skip to content

Commit 591533f

Browse files
committed
Add vertical prop
This enables `<tab-container vertical>` for a much more ergonomic way to create & style tab containers. This also automatically handles the necessary aria markup for the tablist.
1 parent 8c65abb commit 591533f

1 file changed

Lines changed: 23 additions & 0 deletions

File tree

src/tab-container-element.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,19 @@ export class TabContainerElement extends HTMLElement {
9494
)
9595
}
9696

97+
get vertical(): boolean {
98+
return this.#tabList.getAttribute('aria-orientation') === 'vertical'
99+
}
100+
101+
set vertical(isVertical: boolean) {
102+
const tabList = this.#tabList
103+
if (tabList && isVertical) {
104+
tabList.setAttribute('aria-orientation', 'vertical')
105+
} else {
106+
tabList.setAttribute('aria-orientation', 'horizontal')
107+
}
108+
}
109+
97110
#setup = false
98111
#internals!: ElementInternals | null
99112
connectedCallback(): void {
@@ -117,6 +130,13 @@ export class TabContainerElement extends HTMLElement {
117130
this.#setup = true
118131
}
119132

133+
attributeChangedCallback(name: string) {
134+
if (!this.isConnected || !this.shadowRoot) return
135+
if (name === 'vertical') {
136+
this.vertical = this.hasAttribute('vertical')
137+
}
138+
}
139+
120140
handleEvent(event: Event) {
121141
if (event.type === 'click') return this.#handleClick(event as MouseEvent)
122142
if (event.type === 'keydown') return this.#handleKeydown(event as KeyboardEvent)
@@ -176,6 +196,9 @@ export class TabContainerElement extends HTMLElement {
176196
tabList.setAttribute('aria-label', this.getAttribute('aria-label')!)
177197
this.removeAttribute('aria-label')
178198
}
199+
if (this.vertical) {
200+
this.#tabList.setAttribute('aria-orientation', 'vertical')
201+
}
179202
}
180203

181204
const tabs = this.#tabs

0 commit comments

Comments
 (0)