From 8bcad3db5df13ac00c9ed98028537157289d7597 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 7 Sep 2023 22:08:37 +0000 Subject: [PATCH 1/5] 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 fb0296e59a5fda01497fcb63e95107f692de0705 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 22 Sep 2023 16:18:38 +0000 Subject: [PATCH 2/5] 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 3/5] 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 4/5] 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 5/5] 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')