From 5334a82d746dee73fe22d9a6688e2af0b7162220 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Fri, 16 Feb 2024 11:43:56 +0000
Subject: [PATCH] simplify handlekeydown

---
 src/tab-container-element.ts | 34 ++++++++++------------------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
index b518fb7..a92dfda 100644
--- 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)