simplify handlekeydown

github · Feb 16, 2024 · 5334a82 · 5334a82
1 parent 746fef8
commit 5334a82
Showing 1 changed file with 10 additions and 24 deletions.
diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
@@ -1,8 +1,5 @@
 const HTMLElement = globalThis.HTMLElement || (null as unknown as (typeof window)['HTMLElement'])
 
-type IncrementKeyCode = 'ArrowRight' | 'ArrowDown'
-type DecrementKeyCode = 'ArrowUp' | 'ArrowLeft'
-
 function getTabs(el: TabContainerElement): HTMLElement[] {
   return Array.from(el.querySelectorAll<HTMLElement>('[role="tablist"] [role="tab"]')).filter(
     tab => tab instanceof HTMLElement && tab.closest(el.tagName) === el,
@@ -33,17 +30,6 @@ export class TabContainerChangeEvent extends Event {
   }
 }
 
-function getNavigationKeyCodes(vertical: boolean): [IncrementKeyCode[], DecrementKeyCode[]] {
-  if (vertical) {
-    return [
-      ['ArrowDown', 'ArrowRight'],
-      ['ArrowUp', 'ArrowLeft'],
-    ]
-  } else {
-    return [['ArrowRight'], ['ArrowLeft']]
-  }
-}
-
 export class TabContainerElement extends HTMLElement {
   static define(tag = 'tab-container', registry = customElements) {
     registry.define(tag, this)
@@ -109,21 +95,21 @@ export class TabContainerElement extends HTMLElement {
   }
 
   #handleKeydown(event: KeyboardEvent) {
-    const target = event.target
-    if (!(target instanceof HTMLElement)) return
-    if (target.closest(this.tagName) !== this) return
-    if (target.getAttribute('role') !== 'tab' && !target.closest('[role="tablist"]')) return
+    const tab = (event.target as HTMLElement)?.closest?.('[role="tab"]')
+    if (!tab) return
     const tabs = getTabs(this)
-    const currentIndex = tabs.indexOf(tabs.find(tab => tab.matches('[aria-selected="true"]'))!)
-    const [incrementKeys, decrementKeys] = getNavigationKeyCodes(
-      target.closest('[role="tablist"]')?.getAttribute('aria-orientation') === 'vertical',
-    )
+    if (!tabs.includes(tab as HTMLElement)) return
+
+    const currentIndex = tabs.indexOf(tabs.find(e => e.matches('[aria-selected="true"]'))!)
+    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')
 
-    if (incrementKeys.some(code => event.code === code)) {
+    if (nextTab) {
       let index = currentIndex + 1
       if (index >= tabs.length) index = 0
       this.selectTab(index)
-    } else if (decrementKeys.some(code => event.code === code)) {
+    } else if (prevTab) {
       let index = currentIndex - 1
       if (index < 0) index = tabs.length - 1
       this.selectTab(index)