From b152f3a314cbeba17e52dc271e88f55903ecd8b4 Mon Sep 17 00:00:00 2001
From: Pramish Pandey <pramishedu@gmail.com>
Date: Fri, 4 Sep 2026 17:02:07 -0500
Subject: [PATCH] fix: call super.connectedCallback() in button sub-components
 (#70)

---
 src/index.ts | 13 +++++++++++++
 test/test.js | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index 9c76c20..b2e371b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -145,6 +145,7 @@ class MarkdownButtonElement extends HTMLElement {
 
 class MarkdownHeaderButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     const level = parseInt(this.getAttribute('level') || '3', 10)
     this.#setLevelStyle(level)
   }
@@ -178,6 +179,7 @@ if (!window.customElements.get('md-header')) {
 
 class MarkdownBoldButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '**', suffix: '**', trimFirst: true})
   }
 }
@@ -189,6 +191,7 @@ if (!window.customElements.get('md-bold')) {
 
 class MarkdownItalicButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '_', suffix: '_', trimFirst: true})
   }
 }
@@ -200,6 +203,7 @@ if (!window.customElements.get('md-italic')) {
 
 class MarkdownQuoteButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '> ', multiline: true, surroundWithNewlines: true})
   }
 }
@@ -211,6 +215,7 @@ if (!window.customElements.get('md-quote')) {
 
 class MarkdownCodeButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '`', suffix: '`', blockPrefix: '```', blockSuffix: '```'})
   }
 }
@@ -222,6 +227,7 @@ if (!window.customElements.get('md-code')) {
 
 class MarkdownLinkButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '[', suffix: '](url)', replaceNext: 'url', scanFor: 'https?://'})
   }
 }
@@ -233,6 +239,7 @@ if (!window.customElements.get('md-link')) {
 
 class MarkdownImageButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '![', suffix: '](url)', replaceNext: 'url', scanFor: 'https?://'})
   }
 }
@@ -244,6 +251,7 @@ if (!window.customElements.get('md-image')) {
 
 class MarkdownUnorderedListButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '- ', multiline: true, unorderedList: true})
   }
 }
@@ -255,6 +263,7 @@ if (!window.customElements.get('md-unordered-list')) {
 
 class MarkdownOrderedListButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '1. ', multiline: true, orderedList: true})
   }
 }
@@ -266,6 +275,7 @@ if (!window.customElements.get('md-ordered-list')) {
 
 class MarkdownTaskListButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '- [ ] ', multiline: true, surroundWithNewlines: true})
   }
 }
@@ -277,6 +287,7 @@ if (!window.customElements.get('md-task-list')) {
 
 class MarkdownMentionButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '@', prefixSpace: true})
   }
 }
@@ -288,6 +299,7 @@ if (!window.customElements.get('md-mention')) {
 
 class MarkdownRefButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '#', prefixSpace: true})
   }
 }
@@ -299,6 +311,7 @@ if (!window.customElements.get('md-ref')) {
 
 class MarkdownStrikethroughButtonElement extends MarkdownButtonElement {
   connectedCallback() {
+    super.connectedCallback()
     styles.set(this, {prefix: '~~', suffix: '~~', trimFirst: true})
   }
 }
diff --git a/test/test.js b/test/test.js
index 7a74fbd..d27dc3d 100644
--- a/test/test.js
+++ b/test/test.js
@@ -11,6 +11,43 @@ describe('markdown-toolbar-element', function () {
     })
   })
 
+  describe('role attribute', function () {
+    afterEach(function () {
+      document.body.innerHTML = ''
+    })
+
+    const buttonTags = [
+      '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',
+      'md-strikethrough'
+    ]
+
+    for (const tag of buttonTags) {
+      it(`sets role="button" on <${tag}> when connected`, function () {
+        const el = document.createElement(tag)
+        document.body.append(el)
+        assert.equal(el.getAttribute('role'), 'button')
+      })
+
+      it(`preserves custom role on <${tag}> if already present`, function () {
+        const el = document.createElement(tag)
+        el.setAttribute('role', 'none')
+        document.body.append(el)
+        assert.equal(el.getAttribute('role'), 'none')
+      })
+    }
+  })
+
   describe('in shadow DOM', function () {
     it('finds field and inserts markdown', function () {
       const div = document.createElement('div')