Skip to content

Commit 7b0de3a

Browse files
llastflowersllastflowers
authored
Merge pull request #105 from pramishpy/fix-button-role-connected-callback-70
fix: call super.connectedCallback() in button sub-components
2 parents 5b3c29a + b152f3a commit 7b0de3a

2 files changed

Lines changed: 50 additions & 0 deletions

File tree

‎src/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ class MarkdownButtonElement extends HTMLElement {
145145

146146
class MarkdownHeaderButtonElement extends MarkdownButtonElement {
147147
connectedCallback() {
148+
super.connectedCallback()
148149
const level = parseInt(this.getAttribute('level') || '3', 10)
149150
this.#setLevelStyle(level)
150151
}
@@ -178,6 +179,7 @@ if (!window.customElements.get('md-header')) {
178179

179180
class MarkdownBoldButtonElement extends MarkdownButtonElement {
180181
connectedCallback() {
182+
super.connectedCallback()
181183
styles.set(this, {prefix: '**', suffix: '**', trimFirst: true})
182184
}
183185
}
@@ -189,6 +191,7 @@ if (!window.customElements.get('md-bold')) {
189191

190192
class MarkdownItalicButtonElement extends MarkdownButtonElement {
191193
connectedCallback() {
194+
super.connectedCallback()
192195
styles.set(this, {prefix: '_', suffix: '_', trimFirst: true})
193196
}
194197
}
@@ -200,6 +203,7 @@ if (!window.customElements.get('md-italic')) {
200203

201204
class MarkdownQuoteButtonElement extends MarkdownButtonElement {
202205
connectedCallback() {
206+
super.connectedCallback()
203207
styles.set(this, {prefix: '> ', multiline: true, surroundWithNewlines: true})
204208
}
205209
}
@@ -211,6 +215,7 @@ if (!window.customElements.get('md-quote')) {
211215

212216
class MarkdownCodeButtonElement extends MarkdownButtonElement {
213217
connectedCallback() {
218+
super.connectedCallback()
214219
styles.set(this, {prefix: '`', suffix: '`', blockPrefix: '```', blockSuffix: '```'})
215220
}
216221
}
@@ -222,6 +227,7 @@ if (!window.customElements.get('md-code')) {
222227

223228
class MarkdownLinkButtonElement extends MarkdownButtonElement {
224229
connectedCallback() {
230+
super.connectedCallback()
225231
styles.set(this, {prefix: '[', suffix: '](url)', replaceNext: 'url', scanFor: 'https?://'})
226232
}
227233
}
@@ -233,6 +239,7 @@ if (!window.customElements.get('md-link')) {
233239

234240
class MarkdownImageButtonElement extends MarkdownButtonElement {
235241
connectedCallback() {
242+
super.connectedCallback()
236243
styles.set(this, {prefix: '![', suffix: '](url)', replaceNext: 'url', scanFor: 'https?://'})
237244
}
238245
}
@@ -244,6 +251,7 @@ if (!window.customElements.get('md-image')) {
244251

245252
class MarkdownUnorderedListButtonElement extends MarkdownButtonElement {
246253
connectedCallback() {
254+
super.connectedCallback()
247255
styles.set(this, {prefix: '- ', multiline: true, unorderedList: true})
248256
}
249257
}
@@ -255,6 +263,7 @@ if (!window.customElements.get('md-unordered-list')) {
255263

256264
class MarkdownOrderedListButtonElement extends MarkdownButtonElement {
257265
connectedCallback() {
266+
super.connectedCallback()
258267
styles.set(this, {prefix: '1. ', multiline: true, orderedList: true})
259268
}
260269
}
@@ -266,6 +275,7 @@ if (!window.customElements.get('md-ordered-list')) {
266275

267276
class MarkdownTaskListButtonElement extends MarkdownButtonElement {
268277
connectedCallback() {
278+
super.connectedCallback()
269279
styles.set(this, {prefix: '- [ ] ', multiline: true, surroundWithNewlines: true})
270280
}
271281
}
@@ -277,6 +287,7 @@ if (!window.customElements.get('md-task-list')) {
277287

278288
class MarkdownMentionButtonElement extends MarkdownButtonElement {
279289
connectedCallback() {
290+
super.connectedCallback()
280291
styles.set(this, {prefix: '@', prefixSpace: true})
281292
}
282293
}
@@ -288,6 +299,7 @@ if (!window.customElements.get('md-mention')) {
288299

289300
class MarkdownRefButtonElement extends MarkdownButtonElement {
290301
connectedCallback() {
302+
super.connectedCallback()
291303
styles.set(this, {prefix: '#', prefixSpace: true})
292304
}
293305
}
@@ -299,6 +311,7 @@ if (!window.customElements.get('md-ref')) {
299311

300312
class MarkdownStrikethroughButtonElement extends MarkdownButtonElement {
301313
connectedCallback() {
314+
super.connectedCallback()
302315
styles.set(this, {prefix: '~~', suffix: '~~', trimFirst: true})
303316
}
304317
}

‎test/test.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,43 @@ describe('markdown-toolbar-element', function () {
1111
})
1212
})
1313

14+
describe('role attribute', function () {
15+
afterEach(function () {
16+
document.body.innerHTML = ''
17+
})
18+
19+
const buttonTags = [
20+
'md-header',
21+
'md-bold',
22+
'md-italic',
23+
'md-quote',
24+
'md-code',
25+
'md-link',
26+
'md-image',
27+
'md-unordered-list',
28+
'md-ordered-list',
29+
'md-task-list',
30+
'md-mention',
31+
'md-ref',
32+
'md-strikethrough'
33+
]
34+
35+
for (const tag of buttonTags) {
36+
it(`sets role="button" on <${tag}> when connected`, function () {
37+
const el = document.createElement(tag)
38+
document.body.append(el)
39+
assert.equal(el.getAttribute('role'), 'button')
40+
})
41+
42+
it(`preserves custom role on <${tag}> if already present`, function () {
43+
const el = document.createElement(tag)
44+
el.setAttribute('role', 'none')
45+
document.body.append(el)
46+
assert.equal(el.getAttribute('role'), 'none')
47+
})
48+
}
49+
})
50+
1451
describe('in shadow DOM', function () {
1552
it('finds field and inserts markdown', function () {
1653
const div = document.createElement('div')

0 commit comments

Comments
 (0)