From 1a737d02c60bc150bfb25c6f4c1e439f62e4603a Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Wed, 6 Mar 2024 18:40:32 +0400
Subject: [PATCH 01/15] renamed menuKeyUX to focusGroupKeyUX with all files and
 tests

---
 README.md                                  | 18 +++++++++---------
 menu.js => focus-group.js                  |  2 +-
 index.d.ts                                 | 12 ++++++------
 index.js                                   |  2 +-
 package.json                               |  2 +-
 test/demo/index.tsx                        |  4 ++--
 test/{menu.test.ts => focus-group.test.ts} | 16 ++++++++--------
 7 files changed, 28 insertions(+), 28 deletions(-)
 rename menu.js => focus-group.js (98%)
 rename test/{menu.test.ts => focus-group.test.ts} (94%)

diff --git a/README.md b/README.md
index a4f0a49..5697b86 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@ import {
   hiddenKeyUX,
   hotkeyKeyUX,
   jumpKeyUX,
-  menuKeyUX,
+  focusGroupKeyUX,
   pressKeyUX,
   startKeyUX
 } from 'keyux'
@@ -55,7 +55,7 @@ const overrides = {}
 
 startKeyUX(window, [
   hotkeyKeyUX(overrides),
-  menuKeyUX(),
+  focusGroupKeyUX(),
   pressKeyUX('is-pressed'),
   jumpKeyUX(),
   hiddenKeyUX()
@@ -217,13 +217,13 @@ with arrow navigation.
 Users will use <kbd>Tab</kbd> to get inside the menu, and will use either arrows or <kbd>Home</kbd>,
 <kbd>End</kbd> or an item name to navigate inside.
 
-To enable this feature, call `menuKeyUX`.
+To enable this feature, call `focusGroupKeyUX`.
 
 ```js
-import { menuKeyUX } from 'keyux'
+import { focusGroupKeyUX } from 'keyux'
 
 startKeyUX(window, [
-  menuKeyUX()
+  focusGroupKeyUX()
 ])
 ```
 
@@ -260,10 +260,10 @@ You can add `aria-controls` to `<input>` to make the focus jump on <kbd>Enter</k
 To enable this feature, call `jumpKeyUX`.
 
 ```js
-import { menuKeyUX, jumpKeyUX } from 'keyux'
+import { focusGroupKeyUX, jumpKeyUX } from 'keyux'
 
 startKeyUX(window, [
-  menuKeyUX(),
+  focusGroupKeyUX(),
   jumpKeyUX()
 ])
 ```
@@ -294,10 +294,10 @@ have to set `tabindex="-1"` manually.
 To enable this feature, call `hiddenKeyUX`.
 
 ```js
-import { menuKeyUX, jumpKeyUX, hiddenKeyUX } from 'keyux'
+import { focusGroupKeyUX, jumpKeyUX, hiddenKeyUX } from 'keyux'
 
 startKeyUX(window, [
-  menuKeyUX(),
+  focusGroupKeyUX(),
   jumpKeyUX(),
   hiddenKeyUX()
 ])
diff --git a/menu.js b/focus-group.js
similarity index 98%
rename from menu.js
rename to focus-group.js
index bacba6b..cb2722b 100644
--- a/menu.js
+++ b/focus-group.js
@@ -1,4 +1,4 @@
-export function menuKeyUX(options) {
+export function focusGroupKeyUX(options) {
   return window => {
     let inMenu = false
     let typingDelayMs = options?.searchDelayMs || 300
diff --git a/index.d.ts b/index.d.ts
index d3604b3..d4f3e67 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -28,7 +28,7 @@ export interface KeyUXModule {
   (window: MinimalWindow): () => void
 }
 
-export interface MenuKeyUXOptions {
+export interface focusGroupKeyUXOptions {
   /**
    * Maximum allowed pause between key presses when searching
    * for a list item by name. Default is 300.
@@ -55,14 +55,14 @@ export function hotkeyKeyUX(overrides?: HotkeyOverride): KeyUXModule
  * Add arrow-navigation on `role="menu"`.
  *
  * ```js
- * import { startKeyUX, menuKeyUX } from 'keyux'
+ * import { startKeyUX, focusGroupKeyUX } from 'keyux'
  *
  * startKeyUX(window, [
- *   menuKeyUX()
+ *   focusGroupKeyUX()
  * ])
  * ```
  */
-export function menuKeyUX(options?: MenuKeyUXOptions): KeyUXModule
+export function focusGroupKeyUX(options?: focusGroupKeyUXOptions): KeyUXModule
 
 /**
  * Add pressed style on button activation from keyboard.
@@ -111,7 +111,7 @@ export function hiddenKeyUX(): KeyUXModule
  * import {
  *   startKeyUX,
  *   hotkeyKeyUX,
- *   menuKeyUX,
+ *   focusGroupKeyUX,
  *   pressKeyUX,
  *   jumpKeyUX,
  *   hiddenKeyUX
@@ -119,7 +119,7 @@ export function hiddenKeyUX(): KeyUXModule
  *
  * startKeyUX(window, [
  *   hotkeyKeyUX(),
- *   menuKeyUX(),
+ *   focusGroupKeyUX(),
  *   pressKeyUX('is-pressed'),
  *   jumpKeyUX(),
  *   hiddenKeyUX()
diff --git a/index.js b/index.js
index 875b9a3..f97b57f 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,7 @@
+export * from './focus-group.js'
 export * from './hotkey.js'
 export * from './hidden.js'
 export * from './press.js'
-export * from './menu.js'
 export * from './jump.js'
 
 export function startKeyUX(window, plugins) {
diff --git a/package.json b/package.json
index e721ae3..a8eecb4 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     {
       "name": "All modules",
       "import": {
-        "./index.js": "{ startKeyUX, hotkeyKeyUX, pressKeyUX, menuKeyUX, jumpKeyUX, hiddenKeyUX, likelyWithKeyboard, getHotKeyHint }"
+        "./index.js": "{ startKeyUX, hotkeyKeyUX, pressKeyUX, focusGroupKeyUX, jumpKeyUX, hiddenKeyUX, likelyWithKeyboard, getHotKeyHint }"
       },
       "limit": "1737 B"
     }
diff --git a/test/demo/index.tsx b/test/demo/index.tsx
index 3defb7b..dd6177a 100644
--- a/test/demo/index.tsx
+++ b/test/demo/index.tsx
@@ -3,12 +3,12 @@ import { createRoot } from 'react-dom/client'
 
 import type { HotkeyOverride } from '../../index.js'
 import {
+  focusGroupKeyUX,
   getHotKeyHint,
   hiddenKeyUX,
   hotkeyKeyUX,
   jumpKeyUX,
   likelyWithKeyboard,
-  menuKeyUX,
   pressKeyUX,
   startKeyUX
 } from '../../index.js'
@@ -17,7 +17,7 @@ let overrides: HotkeyOverride = {}
 
 startKeyUX(window, [
   hotkeyKeyUX(overrides),
-  menuKeyUX(),
+  focusGroupKeyUX(),
   pressKeyUX('is-pressed'),
   jumpKeyUX(),
   hiddenKeyUX()
diff --git a/test/menu.test.ts b/test/focus-group.test.ts
similarity index 94%
rename from test/menu.test.ts
rename to test/focus-group.test.ts
index 8a3e52f..d6c1fdd 100644
--- a/test/menu.test.ts
+++ b/test/focus-group.test.ts
@@ -3,7 +3,7 @@ import { equal } from 'node:assert'
 import { test } from 'node:test'
 import { setTimeout } from 'node:timers/promises'
 
-import { hotkeyKeyUX, menuKeyUX, startKeyUX } from '../index.js'
+import { focusGroupKeyUX, hotkeyKeyUX, startKeyUX } from '../index.js'
 
 function press(window: DOMWindow, key: string): void {
   let down = new window.KeyboardEvent('keydown', { bubbles: true, key })
@@ -14,7 +14,7 @@ function press(window: DOMWindow, key: string): void {
 
 test('adds menu navigation', () => {
   let window = new JSDOM().window
-  startKeyUX(window, [menuKeyUX()])
+  startKeyUX(window, [focusGroupKeyUX()])
 
   window.document.body.innerHTML =
     '<nav role="menu">' +
@@ -64,7 +64,7 @@ test('adds menu navigation', () => {
 
 test('stops tacking on loosing focus', () => {
   let window = new JSDOM().window
-  startKeyUX(window, [menuKeyUX()])
+  startKeyUX(window, [focusGroupKeyUX()])
 
   window.document.body.innerHTML =
     '<nav role="menu">' +
@@ -96,7 +96,7 @@ test('stops tacking on loosing focus', () => {
 
 test('supports horizontal menus', () => {
   let window = new JSDOM().window
-  startKeyUX(window, [menuKeyUX()])
+  startKeyUX(window, [focusGroupKeyUX()])
 
   window.document.body.innerHTML =
     '<nav role="menu" aria-orientation="horizontal">' +
@@ -118,7 +118,7 @@ test('moves focus by typing item name', async () => {
   let window = new JSDOM().window
   startKeyUX(window, [
     hotkeyKeyUX(),
-    menuKeyUX({
+    focusGroupKeyUX({
       searchDelayMs: 100
     })
   ])
@@ -168,7 +168,7 @@ test('moves focus by typing item name', async () => {
 
 test('supports RTL locales', () => {
   let window = new JSDOM().window
-  startKeyUX(window, [menuKeyUX()])
+  startKeyUX(window, [focusGroupKeyUX()])
 
   window.document.dir = 'rtl'
   window.document.body.innerHTML =
@@ -189,7 +189,7 @@ test('supports RTL locales', () => {
 
 test('stops event tracking', () => {
   let window = new JSDOM().window
-  let stop = startKeyUX(window, [menuKeyUX()])
+  let stop = startKeyUX(window, [focusGroupKeyUX()])
 
   window.document.body.innerHTML =
     '<nav role="menu">' +
@@ -210,7 +210,7 @@ test('stops event tracking', () => {
 
 test('ignores broken DOM', () => {
   let window = new JSDOM().window
-  startKeyUX(window, [menuKeyUX()])
+  startKeyUX(window, [focusGroupKeyUX()])
 
   window.document.body.innerHTML =
     '<a href="#" role="menuitem">Home</a>' +

From f39ee4d7259fa08a52b31a9303de50495917dbc9 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Wed, 6 Mar 2024 22:09:28 +0400
Subject: [PATCH 02/15] started with many roles support

---
 focus-group.js           | 48 +++++++++++++++++++++++++++------------
 test/focus-group.test.ts | 49 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 15 deletions(-)

diff --git a/focus-group.js b/focus-group.js
index cb2722b..0282201 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -1,6 +1,6 @@
 export function focusGroupKeyUX(options) {
   return window => {
-    let inMenu = false
+    let inGroup = false
     let typingDelayMs = options?.searchDelayMs || 300
     let lastTyped = 0
     let searchPrefix = ''
@@ -12,20 +12,19 @@ export function focusGroupKeyUX(options) {
     }
 
     function keyDown(event) {
-      if (event.target.role !== 'menuitem') {
+      let group = findGroupNodeByEventTarget(event.target);
+
+      if (!group) {
         stop()
         return
       }
 
-      let menu = event.target.closest('[role="menu"]')
-      if (!menu) return
-
-      let items = menu.querySelectorAll('[role="menuitem"]')
+      let items = group.querySelectorAll(`[role=${event.target.role}]`)
       let index = Array.from(items).indexOf(event.target)
 
       let nextKey = 'ArrowDown'
       let prevKey = 'ArrowUp'
-      if (menu.getAttribute('aria-orientation') === 'horizontal') {
+      if (group.getAttribute('aria-orientation') === 'horizontal') {
         if (window.document.dir === 'rtl') {
           nextKey = 'ArrowLeft'
           prevKey = 'ArrowRight'
@@ -70,26 +69,25 @@ export function focusGroupKeyUX(options) {
     }
 
     function stop() {
-      inMenu = false
+      inGroup = false
       window.removeEventListener('keydown', keyDown)
     }
 
     function focusIn(event) {
-      if (event.target.role === 'menuitem') {
-        let menu = event.target.closest('[role="menu"]')
-        if (!menu) return
+      let group = findGroupNodeByEventTarget(event.target);
+      if (group) {
 
-        if (!inMenu) {
-          inMenu = true
+        if (!inGroup) {
+          inGroup = true
           window.addEventListener('keydown', keyDown)
         }
-        let items = menu.querySelectorAll('[role="menuitem"]')
+        let items = group.querySelectorAll(`[role=${event.target.role}]`)
         for (let item of items) {
           if (item !== event.target) {
             item.setAttribute('tabindex', -1)
           }
         }
-      } else if (inMenu) {
+      } else if (inGroup) {
         stop()
       }
     }
@@ -109,3 +107,23 @@ export function focusGroupKeyUX(options) {
     }
   }
 }
+
+export function findGroupNodeByEventTarget(eventTarget) {
+  let supportedRoles = {
+    'menuitem': ["menu", "menubar"],
+    'option': ["listbox"],
+    'tab': ["tablist"]
+  }
+  let itemRole = eventTarget.role
+  let groupRoles = supportedRoles[itemRole]
+  if (!groupRoles) return null
+
+  let result
+  groupRoles.forEach((role) => {
+    let node = eventTarget.closest(`[role=${role}]`)
+    if (node) {
+      result = node
+    }
+  })
+  return result
+}
\ No newline at end of file
diff --git a/test/focus-group.test.ts b/test/focus-group.test.ts
index d6c1fdd..765107b 100644
--- a/test/focus-group.test.ts
+++ b/test/focus-group.test.ts
@@ -3,6 +3,7 @@ import { equal } from 'node:assert'
 import { test } from 'node:test'
 import { setTimeout } from 'node:timers/promises'
 
+import { findGroupNodeByEventTarget } from '../focus-group.js'
 import { focusGroupKeyUX, hotkeyKeyUX, startKeyUX } from '../index.js'
 
 function press(window: DOMWindow, key: string): void {
@@ -235,3 +236,51 @@ test('ignores broken DOM', () => {
   press(window, 'ArrowDown')
   equal(window.document.activeElement, another[0])
 })
+
+test('check findGroupNodeByEventTarget method', () => {
+  let window = new JSDOM().window
+
+  window.document.body.innerHTML =
+    '<nav role="menu">' +
+    '<a href="#" role="menuitem">Home</a>' +
+    '<a href="#" role="menuitem">About</a>' +
+    '<a href="#" role="menuitem">Contact</a>' +
+    '</nav>'
+
+  let eventTarget = window.document.querySelector('a');
+  equal(findGroupNodeByEventTarget(eventTarget), window.document.querySelector("nav"))
+})
+
+test('adds menubar widget', () => {
+  let window = new JSDOM().window
+  startKeyUX(window, [focusGroupKeyUX()])
+
+  window.document.body.innerHTML =
+    '<nav role="menubar">' +
+    '<a href="#" role="menuitem">Home</a>' +
+    '<a href="#" role="menuitem">About</a>' +
+    '<a href="#" role="menuitem">Contact</a>' +
+    '</nav>'
+  let items = window.document.querySelectorAll('a')
+  items[0].focus()
+
+  equal(window.document.activeElement, items[0])
+
+  press(window, 'ArrowDown')
+  equal(window.document.activeElement, items[1])
+
+  press(window, 'ArrowUp')
+  equal(window.document.activeElement, items[0])
+
+  press(window, 'End')
+  equal(window.document.activeElement, items[2])
+
+  press(window, 'Home')
+  equal(window.document.activeElement, items[0])
+
+  press(window, 'ArrowUp')
+  equal(window.document.activeElement, items[2])
+
+  press(window, 'ArrowDown')
+  equal(window.document.activeElement, items[0])
+})
\ No newline at end of file

From 76c98d96086fd2b5be2673a43659f414b38a6139 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Wed, 6 Mar 2024 22:49:23 +0400
Subject: [PATCH 03/15] added horizontal default orientation support

---
 focus-group.js           | 15 ++++++++++++++-
 test/focus-group.test.ts | 35 ++++++++++++++++++++++++++++++-----
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/focus-group.js b/focus-group.js
index 0282201..fc52064 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -24,7 +24,7 @@ export function focusGroupKeyUX(options) {
 
       let nextKey = 'ArrowDown'
       let prevKey = 'ArrowUp'
-      if (group.getAttribute('aria-orientation') === 'horizontal') {
+      if (isHorizontalOrientation(group)) {
         if (window.document.dir === 'rtl') {
           nextKey = 'ArrowLeft'
           prevKey = 'ArrowRight'
@@ -126,4 +126,17 @@ export function findGroupNodeByEventTarget(eventTarget) {
     }
   })
   return result
+}
+
+export function isHorizontalOrientation(group) {
+  let ariaOrientation = group.getAttribute('aria-orientation');
+  if (ariaOrientation === "vertical") return false;
+  if (ariaOrientation === "horizontal") return true;
+
+  if (!ariaOrientation) {
+    let role = group.role;
+    return role === "menubar" || role === "tablist"
+  } 
+
+  return false;
 }
\ No newline at end of file
diff --git a/test/focus-group.test.ts b/test/focus-group.test.ts
index 765107b..383d56f 100644
--- a/test/focus-group.test.ts
+++ b/test/focus-group.test.ts
@@ -3,7 +3,7 @@ import { equal } from 'node:assert'
 import { test } from 'node:test'
 import { setTimeout } from 'node:timers/promises'
 
-import { findGroupNodeByEventTarget } from '../focus-group.js'
+import { isHorizontalOrientation, findGroupNodeByEventTarget } from '../focus-group.js'
 import { focusGroupKeyUX, hotkeyKeyUX, startKeyUX } from '../index.js'
 
 function press(window: DOMWindow, key: string): void {
@@ -251,6 +251,31 @@ test('check findGroupNodeByEventTarget method', () => {
   equal(findGroupNodeByEventTarget(eventTarget), window.document.querySelector("nav"))
 })
 
+test('check isHorizontalOrientation method', () => {
+  let window = new JSDOM().window
+  let group
+
+  window.document.body.innerHTML = '<nav role="menu"></nav>'
+  group = window.document.querySelector("nav")
+  equal(isHorizontalOrientation(group), false)
+
+  window.document.body.innerHTML = '<nav role="menu" aria-orientation="horizontal"></nav>'
+  group = window.document.querySelector("nav")
+  equal(isHorizontalOrientation(group), true)
+
+  window.document.body.innerHTML = '<nav role="menubar"></nav>'
+  group = window.document.querySelector("nav")
+  equal(isHorizontalOrientation(group), true)
+
+  window.document.body.innerHTML = '<nav role="menubar" aria-orientation="horizontal"></nav>'
+  group = window.document.querySelector("nav")
+  equal(isHorizontalOrientation(group), true)
+
+  window.document.body.innerHTML = '<nav role="menubar" aria-orientation="vertical"></nav>'
+  group = window.document.querySelector("nav")
+  equal(isHorizontalOrientation(group), false)
+})
+
 test('adds menubar widget', () => {
   let window = new JSDOM().window
   startKeyUX(window, [focusGroupKeyUX()])
@@ -266,10 +291,10 @@ test('adds menubar widget', () => {
 
   equal(window.document.activeElement, items[0])
 
-  press(window, 'ArrowDown')
+  press(window, 'ArrowRight')
   equal(window.document.activeElement, items[1])
 
-  press(window, 'ArrowUp')
+  press(window, 'ArrowLeft')
   equal(window.document.activeElement, items[0])
 
   press(window, 'End')
@@ -278,9 +303,9 @@ test('adds menubar widget', () => {
   press(window, 'Home')
   equal(window.document.activeElement, items[0])
 
-  press(window, 'ArrowUp')
+  press(window, 'ArrowLeft')
   equal(window.document.activeElement, items[2])
 
-  press(window, 'ArrowDown')
+  press(window, 'ArrowRight')
   equal(window.document.activeElement, items[0])
 })
\ No newline at end of file

From 54a683a9469a8564508524e7f387907715b10df8 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Wed, 6 Mar 2024 23:02:57 +0400
Subject: [PATCH 04/15] added listbox test

---
 focus-group.js           |  3 +--
 test/focus-group.test.ts | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/focus-group.js b/focus-group.js
index fc52064..722cf11 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -136,7 +136,6 @@ export function isHorizontalOrientation(group) {
   if (!ariaOrientation) {
     let role = group.role;
     return role === "menubar" || role === "tablist"
-  } 
-
+  }
   return false;
 }
\ No newline at end of file
diff --git a/test/focus-group.test.ts b/test/focus-group.test.ts
index 383d56f..f102556 100644
--- a/test/focus-group.test.ts
+++ b/test/focus-group.test.ts
@@ -308,4 +308,38 @@ test('adds menubar widget', () => {
 
   press(window, 'ArrowRight')
   equal(window.document.activeElement, items[0])
+})
+
+test('adds listbox widget', () => {
+  let window = new JSDOM().window
+  startKeyUX(window, [focusGroupKeyUX()])
+
+  window.document.body.innerHTML =
+    '<ul role="listbox">' +
+    '<li tabindex="0" role="option">Pizza</li>' +
+    '<li tabindex="0" role="option">Sushi</li>' +
+    '<li tabindex="0" role="option">Ramen</li>' +
+    '</nav>'
+  let items = window.document.querySelectorAll('li')
+  items[0].focus()
+
+  equal(window.document.activeElement, items[0])
+
+  press(window, 'ArrowDown')
+  equal(window.document.activeElement, items[1])
+
+  press(window, 'ArrowUp')
+  equal(window.document.activeElement, items[0])
+
+  press(window, 'End')
+  equal(window.document.activeElement, items[2])
+
+  press(window, 'Home')
+  equal(window.document.activeElement, items[0])
+
+  press(window, 'ArrowUp')
+  equal(window.document.activeElement, items[2])
+
+  press(window, 'ArrowDown')
+  equal(window.document.activeElement, items[0])
 })
\ No newline at end of file

From bd0f324c51d1b5a8ea5f661b5f37cc2190c0dd06 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Wed, 6 Mar 2024 23:20:47 +0400
Subject: [PATCH 05/15] added tablist test and disable search

---
 focus-group.js           |  2 +-
 test/focus-group.test.ts | 57 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/focus-group.js b/focus-group.js
index 722cf11..7c268e4 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -46,7 +46,7 @@ export function focusGroupKeyUX(options) {
       } else if (event.key === 'End') {
         event.preventDefault()
         focus(event.target, items[items.length - 1])
-      } else if (event.key.length === 1) {
+      } else if (event.key.length === 1 && group.role !== "tablist") {
         let now = Date.now()
         if (now - lastTyped <= typingDelayMs) {
           searchPrefix += event.key.toLowerCase()
diff --git a/test/focus-group.test.ts b/test/focus-group.test.ts
index f102556..37d0002 100644
--- a/test/focus-group.test.ts
+++ b/test/focus-group.test.ts
@@ -342,4 +342,61 @@ test('adds listbox widget', () => {
 
   press(window, 'ArrowDown')
   equal(window.document.activeElement, items[0])
+})
+
+test('adds tablist widget', () => {
+  let window = new JSDOM().window
+  startKeyUX(window, [focusGroupKeyUX()])
+  window.document.body.innerHTML =
+    '<div role="tablist">' +
+    '<button role="tab">Home</button>' +
+    '<button role="tab">About</button>' +
+    '<button role="tab">Contact</button>' +
+    '</div>'
+  let items = window.document.querySelectorAll('button')
+  items[0].focus()
+
+  equal(window.document.activeElement, items[0])
+
+  press(window, 'ArrowRight')
+  equal(window.document.activeElement, items[1])
+
+  press(window, 'ArrowLeft')
+  equal(window.document.activeElement, items[0])
+
+  press(window, 'End')
+  equal(window.document.activeElement, items[2])
+
+  press(window, 'Home')
+  equal(window.document.activeElement, items[0])
+
+  press(window, 'ArrowLeft')
+  equal(window.document.activeElement, items[2])
+
+  press(window, 'ArrowRight')
+  equal(window.document.activeElement, items[0])
+})
+
+test('node with role "tablist" should not support moving focus by search', async () => {
+  let window = new JSDOM().window
+  startKeyUX(window, [
+    hotkeyKeyUX(),
+    focusGroupKeyUX({
+      searchDelayMs: 100
+    })
+  ])
+
+  window.document.body.innerHTML =
+    '<div role="tablist">' +
+    '<button role="tab">Home</button>' +
+    '<button role="tab">About</button>' +
+    '<button role="tab">Contact</button>' +
+    '</div>'
+
+  let items = window.document.querySelectorAll('button')
+  items[0].focus()
+
+  press(window, 'A')
+  await setTimeout(150)
+  equal(window.document.activeElement, items[0])
 })
\ No newline at end of file

From ec77a82ab2867c21d39f1e6637bfca49244fe339 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Wed, 6 Mar 2024 23:26:59 +0400
Subject: [PATCH 06/15] fixed size-limit and test-coverage

---
 focus-group.js           | 11 ++++++-----
 package.json             |  2 +-
 test/focus-group.test.ts |  6 +++++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/focus-group.js b/focus-group.js
index 7c268e4..472e9f2 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -129,13 +129,14 @@ export function findGroupNodeByEventTarget(eventTarget) {
 }
 
 export function isHorizontalOrientation(group) {
-  let ariaOrientation = group.getAttribute('aria-orientation');
-  if (ariaOrientation === "vertical") return false;
-  if (ariaOrientation === "horizontal") return true;
+  let ariaOrientation = group.getAttribute('aria-orientation')
+  if (ariaOrientation === "vertical") return false
+  if (ariaOrientation === "horizontal") return true
 
   if (!ariaOrientation) {
-    let role = group.role;
+    let role = group.role
     return role === "menubar" || role === "tablist"
   }
-  return false;
+
+  return false
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index a8eecb4..ca54091 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
       "import": {
         "./index.js": "{ startKeyUX, hotkeyKeyUX, pressKeyUX, focusGroupKeyUX, jumpKeyUX, hiddenKeyUX, likelyWithKeyboard, getHotKeyHint }"
       },
-      "limit": "1737 B"
+      "limit": "1858 B"
     }
   ],
   "clean-publish": {
diff --git a/test/focus-group.test.ts b/test/focus-group.test.ts
index 37d0002..6d067cb 100644
--- a/test/focus-group.test.ts
+++ b/test/focus-group.test.ts
@@ -3,7 +3,7 @@ import { equal } from 'node:assert'
 import { test } from 'node:test'
 import { setTimeout } from 'node:timers/promises'
 
-import { isHorizontalOrientation, findGroupNodeByEventTarget } from '../focus-group.js'
+import { findGroupNodeByEventTarget, isHorizontalOrientation } from '../focus-group.js'
 import { focusGroupKeyUX, hotkeyKeyUX, startKeyUX } from '../index.js'
 
 function press(window: DOMWindow, key: string): void {
@@ -274,6 +274,10 @@ test('check isHorizontalOrientation method', () => {
   window.document.body.innerHTML = '<nav role="menubar" aria-orientation="vertical"></nav>'
   group = window.document.querySelector("nav")
   equal(isHorizontalOrientation(group), false)
+
+  window.document.body.innerHTML = '<nav role="menubar" aria-orientation="DiAgOnAl-123"></nav>'
+  group = window.document.querySelector("nav")
+  equal(isHorizontalOrientation(group), false)
 })
 
 test('adds menubar widget', () => {

From 8b599f49d2498d18b1e8cfc08cf9d401db85381d Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Thu, 7 Mar 2024 15:12:23 +0400
Subject: [PATCH 07/15] work for the review-1

---
 focus-group.js | 63 ++++++++++++++++++++++++--------------------------
 index.d.ts     |  4 ++--
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/focus-group.js b/focus-group.js
index 472e9f2..ee89633 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -1,3 +1,33 @@
+const supportedRoles = {
+  'menuitem': ["menu", "menubar"],
+  'option': ["listbox"],
+  'tab': ["tablist"]
+}
+
+export function findGroupNodeByEventTarget(eventTarget) {
+  let itemRole = eventTarget.role
+  let groupRoles = supportedRoles[itemRole]
+  if (!groupRoles) return null
+
+  for (let role of groupRoles) {
+    let node = eventTarget.closest(`[role=${role}]`)
+    if (node) return node
+  }
+}
+
+export function isHorizontalOrientation(group) {
+  let ariaOrientation = group.getAttribute('aria-orientation')
+  if (ariaOrientation === "vertical") return false
+  if (ariaOrientation === "horizontal") return true
+
+  if (!ariaOrientation) {
+    let role = group.role
+    return role === "menubar" || role === "tablist"
+  }
+
+  return false
+}
+
 export function focusGroupKeyUX(options) {
   return window => {
     let inGroup = false
@@ -107,36 +137,3 @@ export function focusGroupKeyUX(options) {
     }
   }
 }
-
-export function findGroupNodeByEventTarget(eventTarget) {
-  let supportedRoles = {
-    'menuitem': ["menu", "menubar"],
-    'option': ["listbox"],
-    'tab': ["tablist"]
-  }
-  let itemRole = eventTarget.role
-  let groupRoles = supportedRoles[itemRole]
-  if (!groupRoles) return null
-
-  let result
-  groupRoles.forEach((role) => {
-    let node = eventTarget.closest(`[role=${role}]`)
-    if (node) {
-      result = node
-    }
-  })
-  return result
-}
-
-export function isHorizontalOrientation(group) {
-  let ariaOrientation = group.getAttribute('aria-orientation')
-  if (ariaOrientation === "vertical") return false
-  if (ariaOrientation === "horizontal") return true
-
-  if (!ariaOrientation) {
-    let role = group.role
-    return role === "menubar" || role === "tablist"
-  }
-
-  return false
-}
\ No newline at end of file
diff --git a/index.d.ts b/index.d.ts
index d4f3e67..049c131 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -28,7 +28,7 @@ export interface KeyUXModule {
   (window: MinimalWindow): () => void
 }
 
-export interface focusGroupKeyUXOptions {
+export interface FocusGroupKeyUXOptions {
   /**
    * Maximum allowed pause between key presses when searching
    * for a list item by name. Default is 300.
@@ -62,7 +62,7 @@ export function hotkeyKeyUX(overrides?: HotkeyOverride): KeyUXModule
  * ])
  * ```
  */
-export function focusGroupKeyUX(options?: focusGroupKeyUXOptions): KeyUXModule
+export function focusGroupKeyUX(options?: FocusGroupKeyUXOptions): KeyUXModule
 
 /**
  * Add pressed style on button activation from keyboard.

From 269d1d56c507b5c374967d16bb414834ac00a092 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Thu, 7 Mar 2024 20:26:54 +0400
Subject: [PATCH 08/15] work for the review-2 (removed unneded exports)

---
 focus-group.js           | 61 ++++++++++++++--------------
 package.json             |  2 +-
 test/focus-group.test.ts | 88 +++++++++++++++++++---------------------
 3 files changed, 73 insertions(+), 78 deletions(-)

diff --git a/focus-group.js b/focus-group.js
index ee89633..50ec57c 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -1,35 +1,11 @@
-const supportedRoles = {
-  'menuitem': ["menu", "menubar"],
-  'option': ["listbox"],
-  'tab': ["tablist"]
-}
-
-export function findGroupNodeByEventTarget(eventTarget) {
-  let itemRole = eventTarget.role
-  let groupRoles = supportedRoles[itemRole]
-  if (!groupRoles) return null
-
-  for (let role of groupRoles) {
-    let node = eventTarget.closest(`[role=${role}]`)
-    if (node) return node
-  }
-}
-
-export function isHorizontalOrientation(group) {
-  let ariaOrientation = group.getAttribute('aria-orientation')
-  if (ariaOrientation === "vertical") return false
-  if (ariaOrientation === "horizontal") return true
-
-  if (!ariaOrientation) {
-    let role = group.role
-    return role === "menubar" || role === "tablist"
-  }
-
-  return false
-}
-
 export function focusGroupKeyUX(options) {
   return window => {
+    const supportedRoles = {
+      'menuitem': ["menu", "menubar"],
+      'option': ["listbox"],
+      'tab': ["tablist"]
+    }
+
     let inGroup = false
     let typingDelayMs = options?.searchDelayMs || 300
     let lastTyped = 0
@@ -41,6 +17,31 @@ export function focusGroupKeyUX(options) {
       current.tabIndex = -1
     }
 
+    function findGroupNodeByEventTarget(eventTarget) {
+      let itemRole = eventTarget.role
+      let groupRoles = supportedRoles[itemRole]
+      if (!groupRoles) return null
+
+      for (let role of groupRoles) {
+        let node = eventTarget.closest(`[role=${role}]`)
+        if (node) return node
+      }
+    }
+
+    function isHorizontalOrientation(group) {
+      let ariaOrientation = group.getAttribute('aria-orientation')
+      if (ariaOrientation === "vertical") return false
+      if (ariaOrientation === "horizontal") return true
+
+      if (!ariaOrientation) {
+        let role = group.role
+        return role === "menubar" || role === "tablist"
+      }
+
+      return false
+    }
+
+
     function keyDown(event) {
       let group = findGroupNodeByEventTarget(event.target);
 
diff --git a/package.json b/package.json
index ca54091..d918cdd 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
       "import": {
         "./index.js": "{ startKeyUX, hotkeyKeyUX, pressKeyUX, focusGroupKeyUX, jumpKeyUX, hiddenKeyUX, likelyWithKeyboard, getHotKeyHint }"
       },
-      "limit": "1858 B"
+      "limit": "1853 B"
     }
   ],
   "clean-publish": {
diff --git a/test/focus-group.test.ts b/test/focus-group.test.ts
index 6d067cb..6275dbb 100644
--- a/test/focus-group.test.ts
+++ b/test/focus-group.test.ts
@@ -3,7 +3,6 @@ import { equal } from 'node:assert'
 import { test } from 'node:test'
 import { setTimeout } from 'node:timers/promises'
 
-import { findGroupNodeByEventTarget, isHorizontalOrientation } from '../focus-group.js'
 import { focusGroupKeyUX, hotkeyKeyUX, startKeyUX } from '../index.js'
 
 function press(window: DOMWindow, key: string): void {
@@ -97,6 +96,7 @@ test('stops tacking on loosing focus', () => {
 
 test('supports horizontal menus', () => {
   let window = new JSDOM().window
+  let items
   startKeyUX(window, [focusGroupKeyUX()])
 
   window.document.body.innerHTML =
@@ -105,14 +105,51 @@ test('supports horizontal menus', () => {
     '<a href="#" role="menuitem">About</a>' +
     '<a href="#" role="menuitem">Contact</a>' +
     '</nav>'
-  let items = window.document.querySelectorAll('a')
+  items = window.document.querySelectorAll('a')
   items[0].focus()
-
   press(window, 'ArrowRight')
   equal(window.document.activeElement, items[1])
+  press(window, 'ArrowLeft')
+  equal(window.document.activeElement, items[0])
 
+  window.document.body.innerHTML =
+    '<nav role="menubar">' +
+    '<a href="#" role="menuitem">Home</a>' +
+    '<a href="#" role="menuitem">About</a>' +
+    '<a href="#" role="menuitem">Contact</a>' +
+    '</nav>'
+  items = window.document.querySelectorAll('a')
+  items[0].focus()
+  press(window, 'ArrowRight')
+  equal(window.document.activeElement, items[1])
   press(window, 'ArrowLeft')
   equal(window.document.activeElement, items[0])
+
+  window.document.body.innerHTML =
+  '<nav role="menubar" aria-orientation="vertical">' +
+  '<a href="#" role="menuitem">Home</a>' +
+  '<a href="#" role="menuitem">About</a>' +
+  '<a href="#" role="menuitem">Contact</a>' +
+  '</nav>'
+  items = window.document.querySelectorAll('a')
+  items[0].focus()
+  press(window, 'ArrowDown')
+  equal(window.document.activeElement, items[1])
+  press(window, 'ArrowUp')
+  equal(window.document.activeElement, items[0])
+
+  window.document.body.innerHTML =
+    '<nav role="menu" aria-orientation="broken-bad-orientation">' +
+    '<a href="#" role="menuitem">Home</a>' +
+    '<a href="#" role="menuitem">About</a>' +
+    '<a href="#" role="menuitem">Contact</a>' +
+    '</nav>'
+  items = window.document.querySelectorAll('a')
+  items[0].focus()
+  press(window, 'ArrowDown')
+  equal(window.document.activeElement, items[1])
+  press(window, 'ArrowUp')
+  equal(window.document.activeElement, items[0])
 })
 
 test('moves focus by typing item name', async () => {
@@ -237,49 +274,6 @@ test('ignores broken DOM', () => {
   equal(window.document.activeElement, another[0])
 })
 
-test('check findGroupNodeByEventTarget method', () => {
-  let window = new JSDOM().window
-
-  window.document.body.innerHTML =
-    '<nav role="menu">' +
-    '<a href="#" role="menuitem">Home</a>' +
-    '<a href="#" role="menuitem">About</a>' +
-    '<a href="#" role="menuitem">Contact</a>' +
-    '</nav>'
-
-  let eventTarget = window.document.querySelector('a');
-  equal(findGroupNodeByEventTarget(eventTarget), window.document.querySelector("nav"))
-})
-
-test('check isHorizontalOrientation method', () => {
-  let window = new JSDOM().window
-  let group
-
-  window.document.body.innerHTML = '<nav role="menu"></nav>'
-  group = window.document.querySelector("nav")
-  equal(isHorizontalOrientation(group), false)
-
-  window.document.body.innerHTML = '<nav role="menu" aria-orientation="horizontal"></nav>'
-  group = window.document.querySelector("nav")
-  equal(isHorizontalOrientation(group), true)
-
-  window.document.body.innerHTML = '<nav role="menubar"></nav>'
-  group = window.document.querySelector("nav")
-  equal(isHorizontalOrientation(group), true)
-
-  window.document.body.innerHTML = '<nav role="menubar" aria-orientation="horizontal"></nav>'
-  group = window.document.querySelector("nav")
-  equal(isHorizontalOrientation(group), true)
-
-  window.document.body.innerHTML = '<nav role="menubar" aria-orientation="vertical"></nav>'
-  group = window.document.querySelector("nav")
-  equal(isHorizontalOrientation(group), false)
-
-  window.document.body.innerHTML = '<nav role="menubar" aria-orientation="DiAgOnAl-123"></nav>'
-  group = window.document.querySelector("nav")
-  equal(isHorizontalOrientation(group), false)
-})
-
 test('adds menubar widget', () => {
   let window = new JSDOM().window
   startKeyUX(window, [focusGroupKeyUX()])
@@ -403,4 +397,4 @@ test('node with role "tablist" should not support moving focus by search', async
   press(window, 'A')
   await setTimeout(150)
   equal(window.document.activeElement, items[0])
-})
\ No newline at end of file
+})

From 272aad329f8e3e1c126d9092963b6efb68c47722 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Thu, 7 Mar 2024 20:45:50 +0400
Subject: [PATCH 09/15] added listbox and tablist draft description to the doc

---
 README.md                | 56 ++++++++++++++++++++++++++++++++++++++++
 test/focus-group.test.ts |  2 +-
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5697b86..23de1af 100644
--- a/README.md
+++ b/README.md
@@ -228,6 +228,62 @@ startKeyUX(window, [
 ```
 
 
+### Listbox
+
+The [`role="listbox"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role)
+is used for lists from which a user may select one or
+more items which are static and, unlike HTML <select> elements, may contain images.
+
+```html
+<ul role="listbox">
+  <li tabindex="0" role="option">Pizza</li>
+  <li tabindex="0" role="option">Sushi</li>
+  <li tabindex="0" role="option">Ramen</li>
+</ul>
+```
+
+Users will use <kbd>Tab</kbd> to get inside the menu, and will use either arrows or <kbd>Home</kbd>,
+<kbd>End</kbd> or an item name to navigate inside.
+
+To enable this feature, call `focusGroupKeyUX`.
+
+```js
+import { focusGroupKeyUX } from 'keyux'
+
+startKeyUX(window, [
+  focusGroupKeyUX()
+])
+```
+
+
+### Tablist
+
+The [`role="tablist"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role)
+identifies the element that serves as the container for a set of tabs.
+The tab content are referred to as tabpanel elements.
+
+```html
+<div role="tablist">
+  <button role="tab">Home</button>
+  <button role="tab">About</button>
+  <button role="tab">Contact</button>
+</div>
+```
+
+Users will use <kbd>Tab</kbd> to get inside the menu, and will use either arrows or <kbd>Home</kbd>,
+<kbd>End</kbd>.
+
+To enable this feature, call `focusGroupKeyUX`.
+
+```js
+import { focusGroupKeyUX } from 'keyux'
+
+startKeyUX(window, [
+  focusGroupKeyUX()
+])
+```
+
+
 ### Jumps
 
 After finishing in one section, you can move user’s focus to the next step to save
diff --git a/test/focus-group.test.ts b/test/focus-group.test.ts
index 6275dbb..1077a9b 100644
--- a/test/focus-group.test.ts
+++ b/test/focus-group.test.ts
@@ -317,7 +317,7 @@ test('adds listbox widget', () => {
     '<li tabindex="0" role="option">Pizza</li>' +
     '<li tabindex="0" role="option">Sushi</li>' +
     '<li tabindex="0" role="option">Ramen</li>' +
-    '</nav>'
+    '</ul>'
   let items = window.document.querySelectorAll('li')
   items[0].focus()
 

From 7c78d5cf7925e375a720176cf19accb0679b899f Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Thu, 7 Mar 2024 20:50:17 +0400
Subject: [PATCH 10/15] moved const to top level (lint)

---
 focus-group.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/focus-group.js b/focus-group.js
index 50ec57c..b9182f5 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -1,11 +1,11 @@
+const supportedRoles = {
+  'menuitem': ["menu", "menubar"],
+  'option': ["listbox"],
+  'tab': ["tablist"]
+}
+
 export function focusGroupKeyUX(options) {
   return window => {
-    const supportedRoles = {
-      'menuitem': ["menu", "menubar"],
-      'option': ["listbox"],
-      'tab': ["tablist"]
-    }
-
     let inGroup = false
     let typingDelayMs = options?.searchDelayMs || 300
     let lastTyped = 0

From 2c8b17bc26589a66be760b3700de47a5b7effedf Mon Sep 17 00:00:00 2001
From: Dmitry Kurmanov <kurmanov.work@gmail.com>
Date: Sun, 10 Mar 2024 17:12:07 +0300
Subject: [PATCH 11/15] Update README.md

Co-authored-by: Andrey Sitnik <andrey@sitnik.ru>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 23de1af..d702982 100644
--- a/README.md
+++ b/README.md
@@ -260,7 +260,7 @@ startKeyUX(window, [
 
 The [`role="tablist"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role)
 identifies the element that serves as the container for a set of tabs.
-The tab content are referred to as tabpanel elements.
+The tab content should be marked by `[role="tabpanel']`.
 
 ```html
 <div role="tablist">

From 29c06e44c15b680d126556ea03efbbbb0af6d004 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Sun, 10 Mar 2024 19:23:05 +0400
Subject: [PATCH 12/15] work for the review-3 (modified demo)

---
 focus-group.js      |  4 ++--
 test/demo/index.tsx | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/focus-group.js b/focus-group.js
index b9182f5..16868f0 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -1,4 +1,4 @@
-const supportedRoles = {
+const Roles = {
   'menuitem': ["menu", "menubar"],
   'option': ["listbox"],
   'tab': ["tablist"]
@@ -19,7 +19,7 @@ export function focusGroupKeyUX(options) {
 
     function findGroupNodeByEventTarget(eventTarget) {
       let itemRole = eventTarget.role
-      let groupRoles = supportedRoles[itemRole]
+      let groupRoles = Roles[itemRole]
       if (!groupRoles) return null
 
       for (let role of groupRoles) {
diff --git a/test/demo/index.tsx b/test/demo/index.tsx
index dd6177a..7a90e4e 100644
--- a/test/demo/index.tsx
+++ b/test/demo/index.tsx
@@ -130,14 +130,14 @@ const Page: FC<{
     content = (
       <>
         <input aria-controls="results" placeholder="Search" type="search" />
-        <ul id="results" role="menu">
+        <ul id="results" role="listbox">
           <li>
-            <a href="#" role="menuitem">
+            <a href="#" role="option">
               First
             </a>
           </li>
           <li>
-            <a href="#" role="menuitem">
+            <a href="#" role="option">
               Second
             </a>
           </li>
@@ -148,13 +148,13 @@ const Page: FC<{
     content = (
       <>
         <h2>List item hotkey</h2>
-        <ul>
-          <li data-keyux-ignore-hotkeys tabIndex={0}>
+        <ul role="listbox">
+          <li role="option" data-keyux-ignore-hotkeys tabIndex={0}>
             <button aria-keyshortcuts="v">
               First button <HotKeyHint hotkey="v" />
             </button>
           </li>
-          <li data-keyux-ignore-hotkeys tabIndex={0}>
+          <li role="option" data-keyux-ignore-hotkeys tabIndex={0}>
             <button aria-keyshortcuts="v">
               Second button <HotKeyHint hotkey="v" />
             </button>
@@ -169,11 +169,11 @@ const Page: FC<{
     content = (
       <>
         <h2>List item hotkey with panel</h2>
-        <ul>
-          <li data-keyux-hotkeys="panel" tabIndex={0}>
+        <ul role="listbox">
+          <li role="option" data-keyux-hotkeys="panel" tabIndex={0}>
             First item
           </li>
-          <li data-keyux-hotkeys="panel" tabIndex={0}>
+          <li role="option" data-keyux-hotkeys="panel" tabIndex={0}>
             Second item
           </li>
         </ul>

From dadd96ac891e965f58836798b01b61a34a67e8fd Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Sun, 10 Mar 2024 19:33:15 +0400
Subject: [PATCH 13/15] added tablist demo

---
 test/demo/index.html |  6 ++++++
 test/demo/index.tsx  | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/test/demo/index.html b/test/demo/index.html
index 9621880..b629e51 100644
--- a/test/demo/index.html
+++ b/test/demo/index.html
@@ -98,6 +98,12 @@
         border-radius: 2px;
         margin: 0.5em 0;
       }
+      .tablist_container {
+        margin-top: 1em;
+      }
+      .tablist_tab {
+        margin-right: 0.5em;
+      }
     </style>
   </head>
   <body>
diff --git a/test/demo/index.tsx b/test/demo/index.tsx
index 7a90e4e..b3e4533 100644
--- a/test/demo/index.tsx
+++ b/test/demo/index.tsx
@@ -74,6 +74,20 @@ const Counter: FC = () => {
   )
 }
 
+const Tablist: FC = () => {
+  return (
+    <div className="tablist_container">
+      <span>Tablist:</span>
+
+      <div role="tablist">
+        <button role="tab" className="tablist_tab">Home</button>
+        <button role="tab" className="tablist_tab">About</button>
+        <button role="tab" className="tablist_tab">Contact</button>
+      </div>
+    </div>
+  )
+}
+
 const Menu: FC<{ router: string; setRouter: (value: string) => void }> = ({
   router,
   setRouter
@@ -272,6 +286,7 @@ const App: FC = () => {
   return (
     <>
       <Counter />
+      <Tablist />
       <Menu router={router} setRouter={setRouter} />
       <Page
         router={router}

From 79d5225fc35ceec12cadfa6b87320141debe8743 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Wed, 13 Mar 2024 15:55:51 +0400
Subject: [PATCH 14/15] improved the "tablist" demo

---
 test/demo/index.html |  9 ++++++++-
 test/demo/index.tsx  | 32 ++++++++++++++++++++++++--------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/test/demo/index.html b/test/demo/index.html
index b629e51..48b2446 100644
--- a/test/demo/index.html
+++ b/test/demo/index.html
@@ -99,11 +99,18 @@
         margin: 0.5em 0;
       }
       .tablist_container {
-        margin-top: 1em;
+        margin-top: 2em;
+        margin-bottom: 2em;
       }
       .tablist_tab {
         margin-right: 0.5em;
       }
+      .tabcontent {
+        display: none;
+      }
+      .tabcontent--current {
+        display: block;
+      }
     </style>
   </head>
   <body>
diff --git a/test/demo/index.tsx b/test/demo/index.tsx
index b3e4533..24b97a7 100644
--- a/test/demo/index.tsx
+++ b/test/demo/index.tsx
@@ -75,14 +75,30 @@ const Counter: FC = () => {
 }
 
 const Tablist: FC = () => {
+  let [tab, setTab] = useState("Home")
   return (
     <div className="tablist_container">
       <span>Tablist:</span>
 
-      <div role="tablist">
-        <button role="tab" className="tablist_tab">Home</button>
-        <button role="tab" className="tablist_tab">About</button>
-        <button role="tab" className="tablist_tab">Contact</button>
+      <div role="tablist" className="tablist">
+        <button className="tablist_tab" role="tab" onFocus={e => setTab("Home")}>Home Tab</button>
+        <button className="tablist_tab" role="tab" onFocus={e => setTab("About")}>About Tab</button>
+        <button className="tablist_tab" role="tab" onFocus={e => setTab("Contact")}>Contact Tab</button>
+      </div>
+
+      <div className={"tabcontent" + (tab === "Home" ? "tabcontent--current" : "")}>
+        <h3>Home Content</h3>
+        <input type="text" placeholder="Home input"/>
+      </div>
+
+      <div className={"tabcontent" + (tab === "About" ? "tabcontent--current" : "")}>
+        <h3>About Content</h3>
+        <input type="text" placeholder="About input"/>
+      </div>
+
+      <div className={"tabcontent" + (tab === "Contact" ? "tabcontent--current" : "")}>
+        <h3>Contact Content</h3>
+        <input type="text" placeholder="Contact input"/>
       </div>
     </div>
   )
@@ -163,12 +179,12 @@ const Page: FC<{
       <>
         <h2>List item hotkey</h2>
         <ul role="listbox">
-          <li role="option" data-keyux-ignore-hotkeys tabIndex={0}>
+          <li data-keyux-ignore-hotkeys role="option" tabIndex={0}>
             <button aria-keyshortcuts="v">
               First button <HotKeyHint hotkey="v" />
             </button>
           </li>
-          <li role="option" data-keyux-ignore-hotkeys tabIndex={0}>
+          <li data-keyux-ignore-hotkeys role="option" tabIndex={0}>
             <button aria-keyshortcuts="v">
               Second button <HotKeyHint hotkey="v" />
             </button>
@@ -184,10 +200,10 @@ const Page: FC<{
       <>
         <h2>List item hotkey with panel</h2>
         <ul role="listbox">
-          <li role="option" data-keyux-hotkeys="panel" tabIndex={0}>
+          <li data-keyux-hotkeys="panel" role="option" tabIndex={0}>
             First item
           </li>
-          <li role="option" data-keyux-hotkeys="panel" tabIndex={0}>
+          <li data-keyux-hotkeys="panel" role="option" tabIndex={0}>
             Second item
           </li>
         </ul>

From 6bbd944759590b1f093ef8b2e3668903d7c7bc9c Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Thu, 14 Mar 2024 10:03:02 +0400
Subject: [PATCH 15/15] fixed code styles

---
 focus-group.js      | 12 ++++--------
 test/demo/index.tsx | 14 +++++++-------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/focus-group.js b/focus-group.js
index 16868f0..b253337 100644
--- a/focus-group.js
+++ b/focus-group.js
@@ -1,4 +1,4 @@
-const Roles = {
+const ROLES = {
   'menuitem': ["menu", "menubar"],
   'option': ["listbox"],
   'tab': ["tablist"]
@@ -19,7 +19,7 @@ export function focusGroupKeyUX(options) {
 
     function findGroupNodeByEventTarget(eventTarget) {
       let itemRole = eventTarget.role
-      let groupRoles = Roles[itemRole]
+      let groupRoles = ROLES[itemRole]
       if (!groupRoles) return null
 
       for (let role of groupRoles) {
@@ -33,12 +33,8 @@ export function focusGroupKeyUX(options) {
       if (ariaOrientation === "vertical") return false
       if (ariaOrientation === "horizontal") return true
 
-      if (!ariaOrientation) {
-        let role = group.role
-        return role === "menubar" || role === "tablist"
-      }
-
-      return false
+      let role = group.role
+      return role === "menubar" || role === "tablist";
     }
 
 
diff --git a/test/demo/index.tsx b/test/demo/index.tsx
index 24b97a7..f341900 100644
--- a/test/demo/index.tsx
+++ b/test/demo/index.tsx
@@ -80,25 +80,25 @@ const Tablist: FC = () => {
     <div className="tablist_container">
       <span>Tablist:</span>
 
-      <div role="tablist" className="tablist">
-        <button className="tablist_tab" role="tab" onFocus={e => setTab("Home")}>Home Tab</button>
-        <button className="tablist_tab" role="tab" onFocus={e => setTab("About")}>About Tab</button>
-        <button className="tablist_tab" role="tab" onFocus={e => setTab("Contact")}>Contact Tab</button>
+      <div className="tablist" role="tablist" >
+        <button className="tablist_tab" onFocus={() => {setTab("Home")}} role="tab">Home Tab</button>
+        <button className="tablist_tab" onFocus={() => {setTab("About")}} role="tab">About Tab</button>
+        <button className="tablist_tab" onFocus={() => {setTab("Contact")}} role="tab">Contact Tab</button>
       </div>
 
       <div className={"tabcontent" + (tab === "Home" ? "tabcontent--current" : "")}>
         <h3>Home Content</h3>
-        <input type="text" placeholder="Home input"/>
+        <input placeholder="Home input" type="text"/>
       </div>
 
       <div className={"tabcontent" + (tab === "About" ? "tabcontent--current" : "")}>
         <h3>About Content</h3>
-        <input type="text" placeholder="About input"/>
+        <input placeholder="About input" type="text"/>
       </div>
 
       <div className={"tabcontent" + (tab === "Contact" ? "tabcontent--current" : "")}>
         <h3>Contact Content</h3>
-        <input type="text" placeholder="Contact input"/>
+        <input placeholder="Contact input" type="text"/>
       </div>
     </div>
   )