feat: add focus management for toolbar

This follows best practices for toolbar focus management, following the
guidelines available at https://www.w3.org/TR/wai-aria-practices-1.1/examples/toolbar/toolbar.html.

ArrowLeft/ArrowRight will switch tabindex/focus the next and previous
buttons respectively, cycling round the whole toolbar if needed. Home
and End keys were also implemented.

Author: keithamus

index.js

@@ -2,10 +2,33 @@
 
 function keydown(fn: KeyboardEventHandler): KeyboardEventHandler {
   return function(event: KeyboardEvent) {
-    if (event.key === ' ' || event.key === 'Enter') {
+    const key = event.key
+    if (key === ' ' || key === 'Enter') {
       event.preventDefault()
       fn(event)
     }
+    if (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Home' || key === 'End') {
+      const target = event.currentTarget
+      if (!(target instanceof MarkdownButtonElement)) return
+      const toolbar = target.closest('markdown-toolbar')
+      if (!(toolbar instanceof MarkdownToolbarElement)) return
+
+      const buttons = []
+      for (const button of toolbar.children) {
+        if (!(button instanceof MarkdownButtonElement)) continue
+        button.setAttribute('tabindex', '-1')
+        buttons.push(button)
+      }
+      let i = 0
+      if (key === 'ArrowLeft') i = buttons.indexOf(target) - 1
+      if (key === 'ArrowRight') i = buttons.indexOf(target) + 1
+      if (key === 'End') i = buttons.length - 1
+      if (i < 0) i = buttons.length - 1
+      if (i > buttons.length - 1) i = 0
+
+      buttons[i].setAttribute('tabindex', '0')
+      buttons[i].focus()
+    }
   }
 }
 
@@ -25,7 +48,7 @@ class MarkdownButtonElement extends HTMLElement {
 
   connectedCallback() {
     if (!this.hasAttribute('tabindex')) {
-      this.setAttribute('tabindex', '0')
+      this.setAttribute('tabindex', '-1')
     }
 
     if (!this.hasAttribute('role')) {
@@ -221,11 +244,16 @@ class MarkdownToolbarElement extends HTMLElement {
   }
 
   connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'toolbar')
+    }
     const fn = shortcut.bind(null, this)
     if (this.field) {
       this.field.addEventListener('keydown', fn)
       shortcutListeners.set(this, fn)
     }
+    const firstTabIndex = document.querySelector('[role="button"][tabindex]')
+    if (firstTabIndex) firstTabIndex.setAttribute('tabindex', '0')
   }
 
   disconnectedCallback() {

test/test.js

@@ -92,6 +92,72 @@ describe('markdown-toolbar-element', function() {
       document.body.innerHTML = ''
     })
 
+    describe('focus management', function() {
+      function focusFirstButton() {
+        const button = document.querySelector('md-bold')
+        button.focus()
+      }
+
+      function pushKeyOnFocussedButton(key) {
+        const event = document.createEvent('Event')
+        event.initEvent('keydown', true, true)
+        event.key = key
+        document.activeElement.dispatchEvent(event)
+      }
+
+      function getElementsWithTabindex(index) {
+        return [...document.querySelectorAll(`markdown-toolbar [tabindex="${index}"]`)]
+      }
+
+      it('moves focus to next button when ArrowRight is pressed', function() {
+        focusFirstButton()
+        pushKeyOnFocussedButton('ArrowRight')
+        assert.equal(getElementsWithTabindex(-1).length, 13)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-header')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('ArrowRight')
+        assert.equal(getElementsWithTabindex(-1).length, 13)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-header[level="1"]')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('ArrowRight')
+        assert.equal(getElementsWithTabindex(-1).length, 13)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-header[level="10"]')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+      })
+
+      it('cycles focus round to last element from first when ArrowLeft is pressed', function() {
+        focusFirstButton()
+        pushKeyOnFocussedButton('ArrowLeft')
+        assert.equal(getElementsWithTabindex(-1).length, 13)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-ref')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('ArrowLeft')
+        assert.equal(getElementsWithTabindex(-1).length, 13)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-mention')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+      })
+
+      it('focussed first/last button when Home/End key is pressed', function() {
+        focusFirstButton()
+        pushKeyOnFocussedButton('End')
+        assert.equal(getElementsWithTabindex(-1).length, 13)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-ref')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('End')
+        assert.equal(getElementsWithTabindex(-1).length, 13)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-ref')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('Home')
+        assert.equal(getElementsWithTabindex(-1).length, 13)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-bold')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('Home')
+        assert.equal(getElementsWithTabindex(-1).length, 13)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-bold')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+      })
+    })
+
     describe('bold', function() {
       it('bold selected text when you click the bold icon', function() {
         setVisualValue('The |quick| brown fox jumps over the lazy dog')