jodit icon indicating copy to clipboard operation
jodit copied to clipboard

Jodit contains focusable element even though its hidden

Open LueNC opened this issue 2 years ago • 0 comments

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.

LueNC avatar Jul 19 '22 10:07 LueNC