Skip to content

Commit

Permalink
Merge pull request #85 from github/add-activetab-selectedtabindex-props
Browse files Browse the repository at this point in the history 
add activeTab, selectedTabIndex props
  • Loading branch information
@owenniblock
owenniblock authored Mar 7, 2024
2 parents a3949df + 60631b2 commit 984ef06
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 2 deletions.
16 changes: 14 additions & 2 deletions src/tab-container-element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,10 @@ export class TabContainerElement extends HTMLElement {
)
}

get activeTab() {
return this.#tabs[this.selectedTabIndex]
}

get activePanel() {
return this.#panelSlot.assignedNodes()[0] as HTMLElement
}
Expand Down Expand Up @@ -189,7 +193,7 @@ export class TabContainerElement extends HTMLElement {
const tabs = this.#tabs
if (!tabs.includes(tab as HTMLElement)) return

const currentIndex = tabs.indexOf(tabs.find(e => e.matches('[aria-selected="true"]'))!)
const currentIndex = this.selectedTabIndex
const vertical = tab.closest('[role="tablist"]')?.getAttribute('aria-orientation') === 'vertical'
const prevTab = event.code === 'ArrowLeft' || (vertical && event.code === 'ArrowUp')
const nextTab = event.code === 'ArrowRight' || (vertical && event.code === 'ArrowDown')
Expand Down Expand Up @@ -226,6 +230,14 @@ export class TabContainerElement extends HTMLElement {
}
}

get selectedTabIndex(): number {
return this.#tabs.findIndex(el => el.matches('[aria-selected=true]'))
}

set selectedTabIndex(i: number) {
this.selectTab(i)
}

selectTab(index: number): void {
if (!this.#setupComplete) {
const tabListSlot = this.#tabListSlot
Expand Down Expand Up @@ -283,7 +295,7 @@ export class TabContainerElement extends HTMLElement {
for (const el of afterSlotted) el.setAttribute('slot', 'after-panels')
}
const defaultTab = Number(this.getAttribute('default-tab') || -1)
const defaultIndex = defaultTab >= 0 ? defaultTab : this.#tabs.findIndex(el => el.matches('[aria-selected=true]'))
const defaultIndex = defaultTab >= 0 ? defaultTab : this.selectedTabIndex
index = index >= 0 ? index : Math.max(0, defaultIndex)
}

Expand Down
22 changes: 22 additions & 0 deletions test/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,8 @@ describe('tab-container', function () {
'change events point to second panel',
)
assert.equal(document.activeElement, tabs[1])
assert.equal(tabContainer.activeTab, tabs[1])
assert.equal(tabContainer.selectedTabIndex, 1)
})

it('keyboard shortcuts work and `tab-container-changed` events are dispatched', function () {
Expand All @@ -208,6 +210,8 @@ describe('tab-container', function () {
assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
assert.equal(document.activeElement, tabs[0])
assert.equal(tabContainer.activeTab, tabs[0])
assert.equal(tabContainer.selectedTabIndex, 0)
assert.equal(events.length, 2, 'tab-container-change(d) called')
assert.deepStrictEqual(
events.map(e => e.type),
Expand Down Expand Up @@ -301,6 +305,8 @@ describe('tab-container', function () {
'change events point to second panel',
)
assert.equal(document.activeElement, tabs[1])
assert.equal(tabContainer.activeTab, tabs[1])
assert.equal(tabContainer.selectedTabIndex, 1)
})

it('result in noop, when selectTab receives out of bounds index', function () {
Expand Down Expand Up @@ -445,6 +451,8 @@ describe('tab-container', function () {
assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
assert.equal(document.activeElement, tabs[2])
assert.equal(tabContainer.activeTab, tabs[2])
assert.equal(tabContainer.selectedTabIndex, 2)
assert.equal(events.length, 2, 'tab-container-change(d) called')
assert.deepStrictEqual(
events.map(e => e.type),
Expand All @@ -467,6 +475,8 @@ describe('tab-container', function () {
assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
assert.equal(document.activeElement, tabs[0])
assert.equal(tabContainer.activeTab, tabs[0])
assert.equal(tabContainer.selectedTabIndex, 0)
assert.equal(events.length, 2, 'tab-container-change(d) called')
assert.deepStrictEqual(
events.map(e => e.type),
Expand All @@ -489,6 +499,8 @@ describe('tab-container', function () {
assert.deepStrictEqual(tabs.map(isSelected), [false, true, false], 'Second tab is selected')
assert.deepStrictEqual(panels.map(isHidden), [true, false, true], 'Second panel is visible')
assert.equal(document.activeElement, tabs[1])
assert.equal(tabContainer.activeTab, tabs[1])
assert.equal(tabContainer.selectedTabIndex, 1)
assert.equal(events.length, 2, 'tab-container-change(d) called')
assert.deepStrictEqual(
events.map(e => e.type),
Expand All @@ -511,6 +523,8 @@ describe('tab-container', function () {
assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
assert.equal(document.activeElement, tabs[2])
assert.equal(tabContainer.activeTab, tabs[2])
assert.equal(tabContainer.selectedTabIndex, 2)
assert.equal(events.length, 2, 'tab-container-change(d) called')
assert.deepStrictEqual(
events.map(e => e.type),
Expand All @@ -534,6 +548,8 @@ describe('tab-container', function () {
assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
assert.equal(document.activeElement, tabs[2])
assert.equal(tabContainer.activeTab, tabs[2])
assert.equal(tabContainer.selectedTabIndex, 2)
assert.equal(events.length, 2, 'tab-container-change(d) called')
assert.deepStrictEqual(
events.map(e => e.type),
Expand All @@ -556,6 +572,8 @@ describe('tab-container', function () {
assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
assert.equal(document.activeElement, tabs[0])
assert.equal(tabContainer.activeTab, tabs[0])
assert.equal(tabContainer.selectedTabIndex, 0)
assert.equal(events.length, 2, 'tab-container-change(d) called')
assert.deepStrictEqual(
events.map(e => e.type),
Expand All @@ -578,6 +596,8 @@ describe('tab-container', function () {
assert.deepStrictEqual(tabs.map(isSelected), [false, true, false], 'Second tab is selected')
assert.deepStrictEqual(panels.map(isHidden), [true, false, true], 'Second panel is visible')
assert.equal(document.activeElement, tabs[1])
assert.equal(tabContainer.activeTab, tabs[1])
assert.equal(tabContainer.selectedTabIndex, 1)
assert.equal(events.length, 2, 'tab-container-change(d) called')
assert.deepStrictEqual(
events.map(e => e.type),
Expand All @@ -600,6 +620,8 @@ describe('tab-container', function () {
assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
assert.equal(document.activeElement, tabs[2])
assert.equal(tabContainer.activeTab, tabs[2])
assert.equal(tabContainer.selectedTabIndex, 2)
assert.equal(events.length, 2, 'tab-container-change(d) called')
assert.deepStrictEqual(
events.map(e => e.type),
Expand Down

0 comments on commit 984ef06

Please sign in to comment.