set focus management

Author: jonrohan

src/index.ts

@@ -319,22 +319,43 @@ function applyFromToolbar(event: Event) {
   applyStyle(target, style)
 }
 
+function setFocusManagement(toolbar: MarkdownToolbarElement) {
+  toolbar.addEventListener('keydown', focusKeydown)
+  toolbar.setAttribute('tabindex', '0')
+  toolbar.addEventListener('focus', onToolbarFocus, {once: true})
+}
+
+function unsetFocusManagement(toolbar: MarkdownToolbarElement) {
+  toolbar.removeEventListener('keydown', focusKeydown)
+  toolbar.removeAttribute('tabindex')
+  toolbar.removeEventListener('focus', onToolbarFocus)
+}
+
 class MarkdownToolbarElement extends HTMLElement {
+  static observedAttributes = ['data-no-focus']
+
   connectedCallback(): void {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'toolbar')
     }
     if (!this.hasAttribute('data-no-focus')) {
-      this.addEventListener('keydown', focusKeydown)
-      this.setAttribute('tabindex', '0')
-      this.addEventListener('focus', onToolbarFocus, {once: true})
+      setFocusManagement(this)
     }
     this.addEventListener('keydown', keydown(applyFromToolbar))
     this.addEventListener('click', applyFromToolbar)
   }
 
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (name !== 'data-no-focus') return
+    if (newValue === null) {
+      setFocusManagement(this)
+    } else {
+      unsetFocusManagement(this)
+    }
+  }
+
   disconnectedCallback(): void {
-    this.removeEventListener('keydown', focusKeydown)
+    unsetFocusManagement(this)
   }
 
   get field(): HTMLTextAreaElement | null {

test/test.js

@@ -1,5 +1,3 @@
-chai.config.truncateThreshold = Infinity
-
 describe('markdown-toolbar-element', function () {
   describe('element creation', function () {
     it('creates from document.createElement', function () {