PR: focus-group support toolbar

focus-group.js

@@ -1,7 +1,9 @@
 const ROLES = {
   menuitem: ['menu', 'menubar'],
   option: ['listbox'],
-  tab: ['tablist']
+  tab: ['tablist'],
+  button: ['toolbar'],
+  checkbox: ['toolbar']
 }
 
 export function focusGroupKeyUX(options) {
@@ -18,8 +20,10 @@ export function focusGroupKeyUX(options) {
     }
 
     function findGroupNodeByEventTarget(eventTarget) {
-      let itemRole = eventTarget.role
-      let groupRoles = ROLES[itemRole]
+      let itemRole = eventTarget.role || eventTarget.type || eventTarget.tagName
+      if (!itemRole) return null;
+
+      let groupRoles = ROLES[itemRole.toLowerCase()]
       if (!groupRoles) return null
 
       for (let role of groupRoles) {
@@ -28,13 +32,25 @@ export function focusGroupKeyUX(options) {
       }
     }
 
+    function getItems(eventTarget, group) {
+      if (group.role === "toolbar") return getToolbarItems(group)
+      return group.querySelectorAll(`[role=${eventTarget.role}]`)
+    }
+
+    function getToolbarItems(group) {
+      let items = [...group.querySelectorAll('*')]
+      return items.filter((item)=> {
+        return item.role === 'button' || item.type === 'button' || item.role === 'checkbox' ||item.type === 'checkbox'
+      })
+    }
+
     function isHorizontalOrientation(group) {
       let ariaOrientation = group.getAttribute('aria-orientation')
       if (ariaOrientation === 'vertical') return false
       if (ariaOrientation === 'horizontal') return true
 
       let role = group.role
-      return role === 'menubar' || role === 'tablist'
+      return role === 'menubar' || role === 'tablist' || role === 'toolbar'
     }
 
     function keyDown(event) {
@@ -45,7 +61,7 @@ export function focusGroupKeyUX(options) {
         return
       }
 
-      let items = group.querySelectorAll(`[role=${event.target.role}]`)
+      let items = getItems(event.target, group);
       let index = Array.from(items).indexOf(event.target)
 
       let nextKey = 'ArrowDown'
@@ -106,7 +122,7 @@ export function focusGroupKeyUX(options) {
           inGroup = true
           window.addEventListener('keydown', keyDown)
         }
-        let items = group.querySelectorAll(`[role=${event.target.role}]`)
+        let items = getItems(event.target, group);
         for (let item of items) {
           if (item !== event.target) {
             item.setAttribute('tabindex', -1)
@@ -126,7 +142,7 @@ export function focusGroupKeyUX(options) {
     function click(event) {
       let group = findGroupNodeByEventTarget(event.target)
       if (group) {
-        let items = group.querySelectorAll(`[role=${event.target.role}]`)
+        let items = getItems(event.target, group);
         for (let item of items) {
           if (item !== event.target) {
             item.setAttribute('tabindex', -1)

test/focus-group.test.ts

@@ -423,3 +423,42 @@ test('is ready to click after focus', () => {
       '</nav>'
   )
 })
+
+test('adds toolbar widget', () => {
+  let window = new JSDOM().window
+  startKeyUX(window, [focusGroupKeyUX()])
+  window.document.body.innerHTML =
+    '<div role="toolbar">' +
+      '<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, 'ArrowRight')
+  equal(window.document.activeElement, buttons[1])
+
+  press(window, 'ArrowLeft')
+  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, checkboxes[0])
+
+  press(window, 'ArrowRight')
+  equal(window.document.activeElement, buttons[0])
+})