diff --git a/packages/web-components/fast-foundation/src/tabs/tabs.ts b/packages/web-components/fast-foundation/src/tabs/tabs.ts index 93484bfaf7c..bfa090c6a3a 100644 --- a/packages/web-components/fast-foundation/src/tabs/tabs.ts +++ b/packages/web-components/fast-foundation/src/tabs/tabs.ts @@ -436,22 +436,22 @@ export class FASTTabs extends FASTElement { switch (event.key) { case keyArrowLeft: event.preventDefault(); - this.adjustBackward(event); + this.adjust(-1); break; case keyArrowRight: event.preventDefault(); - this.adjustForward(event); + this.adjust(+1); break; } } else { switch (event.key) { case keyArrowUp: event.preventDefault(); - this.adjustBackward(event); + this.adjust(-1); break; case keyArrowDown: event.preventDefault(); - this.adjustForward(event); + this.adjust(+1); break; } } @@ -467,6 +467,22 @@ export class FASTTabs extends FASTElement { } }; + private getFocusableTabs(): HTMLElement[] { + if (!this.tabOrder) { + return []; + } + const focusableTabs: HTMLElement[] = []; + this.tabOrder.forEach(tabId => { + const tabElement: HTMLElement | undefined = this.tabs.find( + tab => tab.id === tabId + ); + if (tabElement && this.isFocusableElement(tabElement)) { + focusableTabs.push(tabElement); + } + }); + return focusableTabs; + } + /** * The adjust method for FASTTabs * @public @@ -477,94 +493,31 @@ export class FASTTabs extends FASTElement { if (!this.tabOrder || !this.activeid) { return; } - const focusableTabs: HTMLElement[] = []; - let tabElement: HTMLElement | undefined; - let currentActiveTabIndex: number = 0; - this.tabOrder.forEach(tabId => { - tabElement = this.tabs.find(tab => { - return this.isFocusableElement(tab); - }); - if (tabElement) { - focusableTabs.push(tabElement); - if (tabElement.id === this.activeid) { - currentActiveTabIndex = focusableTabs.length - 1; - } - } - }); + const focusableTabs: HTMLElement[] = this.getFocusableTabs(); + const currentActiveTabIndex: number = focusableTabs.findIndex( + element => element.id === this.activeid + ); + if (currentActiveTabIndex === -1) { + return; + } - const nextTabIndex = limit( + const nextIndex: number = limit( 0, focusableTabs.length - 1, currentActiveTabIndex + adjustment ); - // the index of the next focusable tab within the context of all available tabs - const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]); - if (nextIndex > -1) { - this.moveToTabByIndex(nextIndex); + this.activeid = focusableTabs[nextIndex].id; + this.focusTab(); } } - private adjustForward(e: KeyboardEvent): void { - let index: number = 0; - - index = this.activetab ? this.tabs.indexOf(this.activetab) + 1 : 1; - if (index === this.tabs.length) { - index = 0; - } - - while (index < this.tabs.length && this.tabs.length > 1) { - if (this.isFocusableElement(this.tabs[index])) { - this.moveToTabByIndex(index); - break; - } else if (this.activetab && index === this.tabs.indexOf(this.activetab)) { - break; - } else if (index + 1 >= this.tabs.length) { - index = 0; - } else { - index += 1; - } - } - } - - private adjustBackward(e: KeyboardEvent): void { - let index: number = 0; - - index = this.activetab ? this.tabs.indexOf(this.activetab) - 1 : 0; - index = index < 0 ? this.tabs.length - 1 : index; - - while (index >= 0 && this.tabs.length > 1) { - if (this.isFocusableElement(this.tabs[index])) { - this.moveToTabByIndex(index); - break; - } else if (index - 1 < 0) { - index = this.tabs.length - 1; - } else { - index -= 1; - } - } - } - - private moveToTabByIndex(index: number) { - const tab: HTMLElement = this.tabs[index]; - this.activeid = tab.id; - this.focusTab(); - } - private focusTab(): void { if (this.activetab) { this.activetab.focus(); } } - - private getRootActiveElement(): Element | null { - const rootNode = this.getRootNode(); - if (rootNode instanceof ShadowRoot) { - return rootNode.activeElement; - } - return document.activeElement; - } } /**