Merge pull request #71 from github/allow-opt-out-of-focus-management

allow opt out of focus management
github · Jul 17, 2023 · e343a0b · e343a0b
2 parents ab679fc + 3e4a515
commit e343a0b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/index.ts b/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

diff --git a/test/test.js b/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')