allow opt out of focus management

Author: keithamus

src/index.ts

@@ -303,6 +303,7 @@ class MarkdownToolbarElement extends HTMLElement {
 
 function onToolbarFocus({target}: FocusEvent) {
   if (!(target instanceof Element)) return
+  if (target.hasAttribute('data-no-focus')) return
   target.removeAttribute('tabindex')
   let tabindex = '0'
   for (const button of getButtons(target)) {
@@ -319,6 +320,7 @@ function focusKeydown(event: KeyboardEvent) {
   if (key !== 'ArrowRight' && key !== 'ArrowLeft' && key !== 'Home' && key !== 'End') return
   const toolbar = event.currentTarget
   if (!(toolbar instanceof HTMLElement)) return
+  if (toolbar.hasAttribute('data-no-focus')) return
   const buttons = getButtons(toolbar)
   const index = buttons.indexOf(event.target as HTMLElement)
   const length = buttons.length

test/test.js

@@ -131,6 +131,14 @@ describe('markdown-toolbar-element', function () {
         assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
       })
 
+      it('does not move focus if `data-no-focus` is present', function () {
+        document.querySelector('markdown-toolbar').setAttribute('data-no-focus', '')
+        focusFirstButton()
+        pushKeyOnFocussedButton('ArrowRight')
+        assert.deepEqual(getElementsWithTabindex(0), [document.querySelector('md-bold')])
+        assert.deepEqual(getElementsWithTabindex(0), [document.activeElement])
+      })
+
       it('cycles focus round to last element from first when ArrowLeft is pressed', function () {
         focusFirstButton()
         pushKeyOnFocussedButton('ArrowLeft')