jodit
jodit copied to clipboard
Jodit contains focusable element even though its hidden
Jodit Version: 3.8.5
**Browser:**Chrome OS: W10 Is React App: Vue
Code
setupJodit() {
this.$nextTick(() => {
this.toolbarContainer = document.getElementById("editorToolbar");
if (this.toolbarContainer !== null) {
this.editorConfig =
{
allowResizeY: false,
allowTabNavigation: true,
askBeforePasteFromWord: false,
askBeforePasteHTML: false,
defaultActionOnPaste: "insert_clear_html",
defaultActionOnPasteFromWord: "insert_as_text",
height: 350,
i18n: {
da: this.joditLang
},
language: 'da',
placeholder: this.messageContentPlaceholder,
showCharsCounter: false,
showTooltip: false,
showWordsCounter: false,
showXPathInStatusbar: false,
spellcheck: false,
tabIndex: -1,
toolbar: this.toolbarContainer,
commandToHotkeys: {
"insertOrderedList": [
"ctrl+shift+f7", "cmd+shift+f7"
],
"insertUnorderedList": [
"ctrl+shift+f8", "cmd+shift+f8"
]
}
};
this.$nextTick(() => {
//add aria-label to text editor
var textEditor = $(".jodit-wysiwyg", "#textEditor");
textEditor.attr("title", this.messageContentAccessibilityText);
})
}
});
Expected behavior: WCAG should not have any complaints (https://www.siteimprove.com/integrations/browser-extensions/). Actual behavior: WCAG complains that the toolbarcontainer (editorToolbar) is targetable by keyboard even if it is aria-hidden="true" and tabindex is set to -1 in jodit.