tui.editor
tui.editor copied to clipboard
Tab Index - Buttons
Describe the bug
All buttons apparently are tab able, which can be a bit annoying depending on the system, however, this easily solved by making a helper function inside your own TUI wrapper/class something similar to this:
public disableTabIndex() {
this.elemEditor.querySelectorAll('.toastui-editor-toolbar-icons').forEach((e) => {
e.setAttribute('tabindex', '-1');
});
this.elemEditor.querySelectorAll('.toastui-editor-toolbar-icons.more').forEach((e) => {
e.setAttribute('tabindex', '-1');
});
// Here I can actually see that it gets the tabindex -1 as it is supposed to
console.log('more toastui-editor-toolbar-icons', this.elemEditor.querySelectorAll('.toastui-editor-toolbar-icons.more'));
}
That works fine on all buttons except the more button, it almost seems like the 'more' button is 're'rendered at some point, it just feels a bit weird as I'm using async-await, and when its ready I call the disableTabIndex code, and if I run the exact same query selector as above just with the document as the main selector in the console.log:
document.querySelectorAll('.toastui-editor-toolbar-icons.more').forEach((e) => {
e.setAttribute('tabindex', '-1');
});
it again sets the tab indexes as it should...
To Reproduce
Create a wrapper around TUI make an init method that is async await and initiate the tui editor from there when its all ready call the helper method to set the tab indexes
Expected behavior
I expected that the more button would have the tab index -1 as shown in the console.logged
data from my helper function just like all the other buttons
Desktop (please complete the following information):
- Windows
- Chrome
Additional context
We might want to add a option to disable tabbing on the buttons