We Keep Coding

ContentTools - Clicking in the link tool's dialog focuses on background element, and not on its input?

I'm using ContentTools in a Bootstrap modal. When I select some text and click the hyperlink tool, the dialog to enter the link pops up, but immediately gives focus to an element in the background (in this case, the modal close button, but when I remove it, it focuses on the first input in the form, etc). This makes it impossible to type in the dialog to create a link.
Any pointers? Not a JS wiz, but from a peek at the ContentTools source, it seems to set up an event handler to grab the click event and give focus to the dialog's input, and I'm assuming that's getting borked somewhere...
Here's a screenshot

For anyone who finds this later, the issue was that Bootstrap's modals maintain focus and re-capture it anytime it is given to an element in the background. Since ContentTools appends itself to the end of the DOM (after my modal), it is in the "background" as far as bootstrap is concerned. Buttons in ContentTools work because they register as click events, but anytime you try to click in an input, it gains focus, and Bootstrap returns focus to the modal.
My solution was to modify the ContentTools source to instead append itself to the end of my modal <div>, and now it's entirely contained within the modal--Bootstrap has no focus issues.

How to change screen reader focus to vuetify modal once it opens?

I'm implementing adjustments for accessibility on a project and I need to make it possible to navigate through the page using only the keyboard. I am experiencing a problem with modals using the vuetify's v-dialog component. When I try to change the focus of the page to the content within the modal for screen readers to announce to the user. I've tried manually focus with Javascrípt document.getElementById('id').focus() and with Vue $refs like this.$refs.dialog.focus() but no success. No error appears in the console, it just doesn't focus on the contents of the modal.
I noticed that vuetify add the role="document" property to modal div but I don't know if that is the cause:
How can I focus content within modal?

You got to wait for the dialog box transition to complete and then detect that transition completion in JavaScript followed by focussing the first element in the dialog.
For this, what you need to do is detect the end of our triggered CSS transition and focus back the first element inside the dialog, like so:
dialog.addEventListener('transitionend', (e) => {
dialog.querySelector('input').focus(); // Assuming that there is an input field. If you wanna focus a non-input field then add tabindex=0 for that element and then focus it
});
where dialog is the v-dialog Dom element

Set focus when inserting a hyperlink in wysihtml5 editor

We are using wysihtml5 for a project. We noticed that when editing body text, if you highlight some text, and click the 'Insert link' button in the tool bar that focus is NOT set to the text box in the modal that pops up. The result is, if the user highlights text, clicks the insert link button, and pastes in there url with out first setting focus in the modal, then the url is inserted in the body text (behind the modal).
Looking for ideas in either the css or js on where to try and fix this. Thanks!

Upgraded gem from - bootstrap-wysihtml5-rails (0.3.2.100) to bootstrap-wysihtml5-rails (0.3.3.1) and that fixed the issue for us.

Always visible tinymce toolbar

I am working on a cms for a smaller company and they want inline editing, my only problem is that they want to have the tinymce toolbar visible at all times, disabled when not in use and active when focus on a field.
So my question is: How can i have a tinymce toolbar that is constantly visible, and disabled when not in use and active when it is?

Can't set focus to tinyMCE textarea on iPad

I need use to be able to use multiple tinyMCE <textarea>s on an iPad compatible site.
However when I view the site example website on my iPad, I can't get it to focus on the 2nd <textarea>.

Programatically, you may use tinymce.get('your_editor_id').focus() to focus your editor.
What you see as editor is not a a textarea, but a contenteditable iframe.