Disabling focusgroup memory (#48)

* Add disabling focusgroup memory

- Fix linting issues
- Add no-memory test
- Update existing example to include new prop
- Size limit extended by 7 bytes

* Add test case for toolbar with focusgroup

focus-group.js

@@ -13,8 +13,8 @@ function focus(current, next) {
 }
 
 function findGroupNodeByEventTarget(target) {
-  let fg = target.closest('[focusgroup]');
-  if (fg) return fg;
+  let fg = target.closest('[focusgroup]')
+  if (fg) return fg
 
   let itemRole = target.role || target.type || target.tagName
   if (!itemRole) return null
@@ -29,7 +29,9 @@ function findGroupNodeByEventTarget(target) {
 }
 
 function getItems(target, group) {
-  if (group.role === 'toolbar' || group.hasAttribute('focusgroup')) return getToolbarItems(group)
+  if (group.role === 'toolbar' || group.hasAttribute('focusgroup')) {
+    return getToolbarItems(group)
+  }
   return group.querySelectorAll(`[role=${target.role}]`)
 }
 
@@ -47,7 +49,7 @@ function getToolbarItems(group) {
 
 function isHorizontalOrientation(group) {
   let fg = group.getAttribute('focusgroup')
-  if (fg !== null) return !fg.split(' ').includes('block');
+  if (fg !== null) return !fg.split(' ').includes('block')
 
   let ariaOrientation = group.getAttribute('aria-orientation')
   if (ariaOrientation === 'vertical') return false
@@ -144,6 +146,14 @@ export function focusGroupKeyUX(options) {
     }
 
     function focusOut(event) {
+      let group = findGroupNodeByEventTarget(event.target)
+      if (group?.getAttribute('focusgroup')?.includes('no-memory')) {
+        let items = getItems(event.target, group)
+        items.forEach((item, index) => {
+          item.setAttribute('tabindex', index === 0 ? 0 : -1)
+        })
+      }
+
       if (!event.relatedTarget || event.relatedTarget === window.document) {
         stop()
       }

package.json

@@ -85,7 +85,7 @@
       "import": {
         "./index.js": "{ startKeyUX, hotkeyKeyUX, pressKeyUX, focusGroupKeyUX, jumpKeyUX, hiddenKeyUX, likelyWithKeyboard, getHotKeyHint, hotkeyOverrides, hotkeyMacCompat }"
       },
-      "limit": "2240 B"
+      "limit": "2277 B"
     }
   ],
   "clean-publish": {

test/demo/index.tsx

@@ -404,7 +404,7 @@ const FocusGroupInline: FC = () => {
       <div
         className="focusgroup"
         // @ts-expect-error
-        focusgroup="inline"
+        focusgroup="inline no-memory"
         tabIndex={0}
       >
         <button type="button">Mac</button>

test/focus-group.test.ts

@@ -532,7 +532,7 @@ test('adds focusgroup block widget', () => {
     '<button role="button" tabindex="-1">Cat</button>' +
     '<button role="button" tabindex="-1">Turtle</button>' +
     '</div>'
-  let buttons = window.document.querySelectorAll('button');
+  let buttons = window.document.querySelectorAll('button')
   // @ts-ignore
   buttons[0].focus()
 
@@ -556,3 +556,63 @@ test('adds focusgroup block widget', () => {
   press(window, 'ArrowRight')
   equal(window.document.activeElement, buttons[0])
 })
+
+test('disabling focusgroup memory', () => {
+  let window = new JSDOM().window
+  startKeyUX(window, [focusGroupKeyUX()])
+  window.document.body.innerHTML =
+    '<div focusgroup="no-memory">' +
+    '<button type="button">Item 1</button>' +
+    '<button type="button">Item 2</button>' +
+    '<button type="button">Item 3</button>' +
+    '</div>'
+  let buttons = window.document.querySelectorAll('button')
+  buttons[0].focus()
+
+  press(window, 'ArrowRight')
+  equal(window.document.activeElement, buttons[1])
+
+  buttons[1].blur()
+  buttons[0].focus()
+
+  equal(window.document.activeElement, buttons[0])
+})
+
+test('adds toolbar widget with focusgroup block option', () => {
+  let window = new JSDOM().window
+  startKeyUX(window, [focusGroupKeyUX()])
+  window.document.body.innerHTML =
+    '<div role="toolbar" focusgroup="block">' +
+    '<div>' +
+    '<button type="button">Copy</button>' +
+    '<button type="button">Paste</button>' +
+    '<button type="button">Cut</button>' +
+    '</div>' +
+    '<div>' +
+    '<input type="checkbox"/>' +
+    '</div>' +
+    '</div>'
+  let buttons = window.document.querySelectorAll('button')
+  let checkboxes = window.document.querySelectorAll('[type="checkbox"]')
+  buttons[0].focus()
+
+  equal(window.document.activeElement, buttons[0])
+
+  press(window, 'ArrowDown')
+  equal(window.document.activeElement, buttons[1])
+
+  press(window, 'ArrowUp')
+  equal(window.document.activeElement, buttons[0])
+
+  press(window, 'End')
+  equal(window.document.activeElement, checkboxes[0])
+
+  press(window, 'Home')
+  equal(window.document.activeElement, buttons[0])
+
+  press(window, 'ArrowLeft')
+  equal(window.document.activeElement, buttons[0])
+
+  press(window, 'ArrowRight')
+  equal(window.document.activeElement, buttons[0])
+})