diff --git a/src/index.ts b/src/index.ts index 032f2f7..8fa8dbc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -303,6 +303,7 @@ 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)) { @@ -319,6 +320,7 @@ 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 diff --git a/test/test.js b/test/test.js index a4a66f1..7b3d63d 100644 --- a/test/test.js +++ b/test/test.js @@ -131,6 +131,14 @@ describe('markdown-toolbar-element', function () { assert.deepEqual(getElementsWithTabindex(0), [document.activeElement]) }) + it('does not move focus if `data-no-focus` is present', 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]) + }) + it('cycles focus round to last element from first when ArrowLeft is pressed', function () { focusFirstButton() pushKeyOnFocussedButton('ArrowLeft')