github · keithamus · Apr 2, 2020 · Mar 17, 2020 · Mar 17, 2020 · Mar 18, 2020
diff --git a/README.md b/README.md
@@ -28,10 +28,13 @@ import '@github/markdown-toolbar-element'
   <md-task-list>task-list</md-task-list>
   <md-mention>mention</md-mention>
   <md-ref>ref</md-ref>
+  <button data-md-button>Custom button</button>
 </markdown-toolbar>
 <textarea id="textarea_id"></textarea>
 ```
 
+`<markdown-toolbar>` comes with focus management as advised in [WAI-ARIA Authoring Practices 1.1: Toolbar Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/examples/toolbar/toolbar.html). The `md-*` buttons that ship with this package are automatically managed. Add a `data-md-button` attribute to any custom toolbar items to enroll them into focus management.
+
 ## Browser support
 
 Browsers without native [custom element support][support] require a [polyfill][].

diff --git a/examples/index.html b/examples/index.html
@@ -6,6 +6,7 @@
   </head>
   <body>
     <div class="container py-4">
+      <p><button type="button">Add a Comment</button></p>
       <markdown-toolbar for="textarea">
         <md-bold class="btn btn-sm">bold</md-bold>
         <md-header class="btn btn-sm">header</md-header>
@@ -22,6 +23,29 @@
       </markdown-toolbar>
       <textarea rows="6" class="mt-3 d-block width-full" id="textarea"></textarea>
     </div>
+
+    <details class="container py-4">
+      <summary>Initially hidden toolbar!</summary>
+      <div class="container py-4">
+        <p><button type="button">Add a Comment</button></p>
+        <markdown-toolbar for="textarea2">
+          <md-bold class="btn btn-sm">bold</md-bold>
+          <md-header class="btn btn-sm">header</md-header>
+          <md-italic class="btn btn-sm">italic</md-italic>
+          <md-quote class="btn btn-sm">quote</md-quote>
+          <md-code class="btn btn-sm">code</md-code>
+          <md-link class="btn btn-sm">link</md-link>
+          <md-image class="btn btn-sm">image</md-image>
+          <md-unordered-list class="btn btn-sm">unordered-list</md-unordered-list>
+          <md-ordered-list class="btn btn-sm">ordered-list</md-ordered-list>
+          <md-task-list class="btn btn-sm">task-list</md-task-list>
+          <md-mention class="btn btn-sm">mention</md-mention>
+          <md-ref class="btn btn-sm">ref</md-ref>
+        </markdown-toolbar>
+        <textarea rows="6" class="mt-3 d-block width-full" id="textarea2"></textarea>
+      </div>
+    </details>
+
     <script>
       const script = document.createElement('script')
       if (window.location.hostname.endsWith('github.io') || window.location.hostname.endsWith('github.com')) {

diff --git a/index.js b/index.js
@@ -1,5 +1,30 @@
 /* @flow strict */
 
+const buttonSelectors = [
+  '[data-md-button]',
+  'md-header',
+  'md-bold',
+  'md-italic',
+  'md-quote',
+  'md-code',
+  'md-link',
+  'md-image',
+  'md-unordered-list',
+  'md-ordered-list',
+  'md-task-list',
+  'md-mention',
+  'md-ref'
+]
+function getButtons(toolbar: Element): HTMLElement[] {
+  const els = []
+  for (const button of toolbar.querySelectorAll(buttonSelectors.join(', '))) {
+    // Skip buttons that are hidden, either via `hidden` attribute or CSS:
+    if (button.hidden || (button.offsetWidth <= 0 && button.offsetHeight <= 0)) continue
+    if (button.closest('markdown-toolbar') === toolbar) els.push(button)
+  }
+  return els
+}
+
 function keydown(fn: KeyboardEventHandler): KeyboardEventHandler {
   return function(event: KeyboardEvent) {
     if (event.key === ' ' || event.key === 'Enter') {
@@ -24,10 +49,6 @@ class MarkdownButtonElement extends HTMLElement {
   }
 
   connectedCallback() {
-    if (!this.hasAttribute('tabindex')) {
-      this.setAttribute('tabindex', '0')
-    }
-
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'button')
     }
@@ -221,11 +242,17 @@ class MarkdownToolbarElement extends HTMLElement {
   }
 
   connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'toolbar')
+    }
+    this.addEventListener('keydown', focusKeydown)
     const fn = shortcut.bind(null, this)
     if (this.field) {
       this.field.addEventListener('keydown', fn)
       shortcutListeners.set(this, fn)
     }
+    this.setAttribute('tabindex', '0')
+    this.addEventListener('focus', onToolbarFocus, {once: true})
   }
 
   disconnectedCallback() {
@@ -234,6 +261,7 @@ class MarkdownToolbarElement extends HTMLElement {
       this.field.removeEventListener('keydown', fn)
       shortcutListeners.delete(this)
     }
+    this.removeEventListener('keydown', focusKeydown)
   }
 
   get field(): ?HTMLTextAreaElement {
@@ -244,6 +272,46 @@ class MarkdownToolbarElement extends HTMLElement {
   }
 }
 
+function onToolbarFocus({target}: FocusEvent) {
+  if (!(target instanceof Element)) return
+  target.removeAttribute('tabindex')
+  let tabindex = '0'
+  for (const button of getButtons(target)) {
+    button.setAttribute('tabindex', tabindex)
+    if (tabindex === '0') {
+      button.focus()
+      tabindex = '-1'
+    }
+  }
+}
+
+function focusKeydown(event: KeyboardEvent) {
+  const key = event.key
+  if (key !== 'ArrowRight' && key !== 'ArrowLeft' && key !== 'Home' && key !== 'End') return
+  const toolbar = event.currentTarget
+  if (!(toolbar instanceof HTMLElement)) return
+  const buttons = getButtons(toolbar)
+  const index = buttons.indexOf(event.target)
+  const length = buttons.length
+  if (index === -1) return
+
+  let n = 0
+  if (key === 'ArrowLeft') n = index - 1
+  if (key === 'ArrowRight') n = index + 1
+  if (key === 'End') n = length - 1
+  if (n < 0) n = length - 1
+  if (n > length - 1) n = 0
+
+  for (let i = 0; i < length; i += 1) {
+    buttons[i].setAttribute('tabindex', i === n ? '0' : '-1')
+  }
+
+  // Need to stop home/end scrolling:
+  event.preventDefault()
+
+  buttons[n].focus()
+}
+
 const shortcutListeners = new WeakMap()
 
 function shortcut(toolbar: Element, event: KeyboardEvent) {

diff --git a/test/test.js b/test/test.js
@@ -71,7 +71,11 @@ describe('markdown-toolbar-element', function() {
           <md-bold>bold</md-bold>
           <md-header>header</md-header>
           <md-header level="1">h1</md-header>
+          <div hidden>
+            <md-header level="5">h5</md-header>
+          </div>
           <md-header level="10">h1</md-header>
+          <div data-md-button>Other button</div>
           <md-italic>italic</md-italic>
           <md-quote>quote</md-quote>
           <md-code>code</md-code>
@@ -92,6 +96,87 @@ 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}"]`)]
+      }
+
+      beforeEach(() => {
+        document.querySelector('markdown-toolbar').focus()
+      })
+
+      it('moves focus to next button when ArrowRight is pressed', function() {
+        focusFirstButton()
+        pushKeyOnFocussedButton('ArrowRight')
+        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-header')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('ArrowRight')
+        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-header[level="1"]')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('ArrowRight')
+        assert.equal(getElementsWithTabindex(-1).length, 14)
+        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, 14)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-ref')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('ArrowLeft')
+        assert.equal(getElementsWithTabindex(-1).length, 14)
+        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, 14)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-ref')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('End')
+        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-ref')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('Home')
+        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-bold')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+        pushKeyOnFocussedButton('Home')
+        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-bold')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+      })
+
+      it('counts `data-md-button` elements in the focussable set', function() {
+        focusFirstButton()
+        pushKeyOnFocussedButton('ArrowRight')
+        pushKeyOnFocussedButton('ArrowRight')
+        pushKeyOnFocussedButton('ArrowRight')
+        pushKeyOnFocussedButton('ArrowRight')
+        assert.equal(getElementsWithTabindex(-1).length, 14)
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('div[data-md-button]')])
+        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')