tui.editor icon indicating copy to clipboard operation
tui.editor copied to clipboard

Tab Index - Buttons

Open livevsonline opened this issue 2 years ago • 0 comments

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

livevsonline avatar Aug 24 '22 09:08 livevsonline