From 8bcad3db5df13ac00c9ed98028537157289d7597 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 7 Sep 2023 22:08:37 +0000 Subject: [PATCH 1/6] Don't set tabindex=0 when data-no-focus --- src/index.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/index.ts b/src/index.ts index c728d87..3d0e1ed 100644 --- a/src/index.ts +++ b/src/index.ts @@ -324,9 +324,11 @@ class MarkdownToolbarElement extends HTMLElement { if (!this.hasAttribute('role')) { this.setAttribute('role', 'toolbar') } - this.addEventListener('keydown', focusKeydown) - this.setAttribute('tabindex', '0') - this.addEventListener('focus', onToolbarFocus, {once: true}) + if (!this.hasAttribute('data-no-focus')) { + this.addEventListener('keydown', focusKeydown) + this.setAttribute('tabindex', '0') + this.addEventListener('focus', onToolbarFocus, {once: true}) + } this.addEventListener('keydown', keydown(applyFromToolbar)) this.addEventListener('click', applyFromToolbar) } @@ -349,7 +351,6 @@ 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)) { @@ -366,7 +367,6 @@ 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 From d933491af6eb6a58f0358bb4ca23ab7242118efd Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 22 Sep 2023 16:12:10 +0000 Subject: [PATCH 2/6] Move preventDefault into apply functions --- src/index.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index c728d87..60dfb9e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -62,7 +62,6 @@ function getButtons(toolbar: Element): HTMLElement[] { function keydown(fn: (event: KeyboardEvent) => void): (event: KeyboardEvent) => void { return function (event: KeyboardEvent) { if (event.key === ' ' || event.key === 'Enter') { - event.preventDefault() fn(event) } } @@ -121,9 +120,10 @@ const manualStyles = { class MarkdownButtonElement extends HTMLElement { constructor() { super() - const apply = () => { + const apply = (event: Event) => { const style = styles.get(this) if (!style) return + event.preventDefault() applyStyle(this, style) } this.addEventListener('keydown', keydown(apply)) @@ -316,6 +316,7 @@ function applyFromToolbar(event: Event) { const mdButtonStyle = target.getAttribute('data-md-button') const style = manualStyles[mdButtonStyle as keyof typeof manualStyles] if (!style) return + event.preventDefault() applyStyle(target, style) } From fb0296e59a5fda01497fcb63e95107f692de0705 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 22 Sep 2023 16:18:38 +0000 Subject: [PATCH 3/6] Update test --- test/test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/test.js b/test/test.js index 4345e1e..d4973fa 100644 --- a/test/test.js +++ b/test/test.js @@ -135,8 +135,7 @@ describe('markdown-toolbar-element', 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]) + assert.lengthOf(getElementsWithTabindex(0), 0) }) it('cycles focus round to last element from first when ArrowLeft is pressed', function () { From fffacb33ae7ce2a29d81ab6254038637d219095f Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 22 Sep 2023 16:21:07 +0000 Subject: [PATCH 4/6] chai config --- test/test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/test.js b/test/test.js index d4973fa..bb4f008 100644 --- a/test/test.js +++ b/test/test.js @@ -1,3 +1,5 @@ +chai.config.truncateThreshold = Infinity + describe('markdown-toolbar-element', function () { describe('element creation', function () { it('creates from document.createElement', function () { From d62bd067e3573813faf6045c76e3f75e3a9af509 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 22 Sep 2023 16:26:38 +0000 Subject: [PATCH 5/6] set focus management --- src/index.ts | 29 +++++++++++++++++++++++++---- test/test.js | 2 -- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/index.ts b/src/index.ts index 3d0e1ed..3a66970 100644 --- a/src/index.ts +++ b/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 { diff --git a/test/test.js b/test/test.js index bb4f008..d4973fa 100644 --- a/test/test.js +++ b/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 () { From 58282f34750da6fcdede3731b164ff78994d3d14 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 22 Sep 2023 16:31:18 +0000 Subject: [PATCH 6/6] remove before each --- test/test.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/test/test.js b/test/test.js index d4973fa..7a74fbd 100644 --- a/test/test.js +++ b/test/test.js @@ -96,6 +96,7 @@ describe('markdown-toolbar-element', function () { describe('focus management', function () { function focusFirstButton() { + document.querySelector('markdown-toolbar').focus() const button = document.querySelector('md-bold') button.focus() } @@ -111,10 +112,6 @@ describe('markdown-toolbar-element', function () { return [...document.querySelectorAll(`markdown-toolbar [tabindex="${index}"]`)] } - beforeEach(() => { - document.querySelector('markdown-toolbar').focus() - }) - it('moves focus to next button when ArrowRight is pressed', function () { focusFirstButton() pushKeyOnFocussedButton('ArrowRight') pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy