How to remove a tabindex from editor toolbar

[cchetan1993]

I am facing problem to set the tabindex=-1 for toolbar options.
where i observed that it doesn't remove tabindex from toolbar

<span _ngcontent-c2="" class="ql-color ql-picker ql-color-picker ql-expanded" tabindex="-1"><span class="ql-picker-label" tabindex="0" role="button" aria-expanded="true" aria-controls="ql-picker-options-1" data-value="#ff0000"><svg viewBox="0 0 18 18"> <line class="ql-color-label ql-stroke ql-transparent" x1="3" x2="15" y1="15" y2="15"></line> <polyline class="ql-stroke" points="5.5 11 9 3 12.5 11"></polyline> <line class="ql-stroke" x1="11.63" x2="6.38" y1="9" y2="9"></line> </svg></span><span class="ql-picker-options" aria-hidden="false" tabindex="-1" id="ql-picker-options-1"><span tabindex="0" role="button" class="ql-picker-item ql-selected ql-primary" data-value="#ff0000" style="background-color: rgb(255, 0, 0);"></span><span tabindex="0" role="button" class="ql-picker-item ql-primary" data-value="#5b9bd5" style="background-color: rgb(91, 155, 213);"></span></span></span>

please help me with possible solution for above scenario.

[KillerCodeMonkey]

sorry i do not understand your problem.

the first span has tabindex="-1", what do you want to achieve?

Edit: the tab-index is automatically set by quilljs, why you want to break accessibility

[cchetan1993]

Thanks for Replying,
There is a user requirement in our project where we want to disable tabbing for quill editor toolbar.
What i have done is created a custom toolbar via projection slot with which i tried to set the tab-index="-1" on buttons(tab-index is set to -1 and working expected) and select tags(not working as expected).
but what i observed is it doesn't set tab-index=-1 for auto generated inner tags.
which hinders to achieve the task.

kindly suggest.

[KillerCodeMonkey]

okay i only pass the custom toolbar to quilljs and quilljs does the magic.
I do not know if it is possible to disable tabindexing there. i think you should ask in this repository.

As a little hacky workaround, just remove the tabIndex attribute after editor is initialised.

And check this:
slab/quill#110

seems like you can remove keyboard bindings from the editor.
Disabling tab and shift+tab :)

[cchetan1993]

"As a little hacky workaround, just remove the tabIndex attribute after editor is initialised."
-->You mean to say onEditorCreated event i can do this.

"seems like you can remove keyboard bindings from the editor.
Disabling tab and shift+tab :)"
-->Does this works for toolbar or editor box?
-->If for editor box. Does this remove tab to work inside editor box?

Please suggest.

[KillerCodeMonkey]

-->You mean to say onEditorCreated event i can do this.
yes. grab the editor instance there -> get the editor dom node and select all spans with tabindex and remove the attribute.

-->Does this works for toolbar or editor box?
do not know. just try it. 🙃

[cchetan1993]

Thanks,
Will try and let you know in case your help and guidance is required.

Thanks again.

[KillerCodeMonkey]

any updates?

[cchetan1993]

editorCreated(event)
{
$('.ql-toolbar *').each(function(i){
$(this).attr('tabindex',-1);
});
}

Yes, this works for me
But it's a hack , i am looking for solution respect to angular.
Thanks for your guidance.

[KillerCodeMonkey]

please never use jquery... anymore

just plain js you can grab the editor from the event data passed to the editorCreated function.

get the toolbar module and the element.
And then just use:

const formatElements = toolbarElement.querySelectorAll('your css selector here')
formatElements.forEach((formatElement) => // set tabIndex)

[fairking]

I can remove some of the tabs but not every is working:

                <span class="ql-formats">
                    <button class="ql-bold" type="button" tabindex="-1"></button>
                    <button class="ql-italic" type="button" tabindex="-1"></button>
                    <button class="ql-underline" type="button" tabindex="-1"></button>
                </span>
                <span class="ql-formats">
                    <select class="ql-color" tabindex="-1"></select>
                    <select class="ql-background" tabindex="-1"></select>
                </span>
                <span class="ql-formats">
                    <button class="ql-list" value="ordered" type="button" tabindex="-1"></button>
                    <button class="ql-list" value="bullet" type="button" tabindex="-1"></button>
                    <select class="ql-align" tabindex="-1">
                        <option defaultValue></option>
                        <option value="center"></option>
                        <option value="right"></option>
                        <option value="justify"></option>
                    </select>
                    <button class="ql-indent" value="-1" type="button" tabindex="-1"></button>
                    <button class="ql-indent" value="+1" type="button" tabindex="-1"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-link" type="button" tabindex="-1"></button>
                    <!--<button class="ql-image" type="button" tabindex="-1"></button>-->
                    <button class="ql-code-block" type="button" tabindex="-1"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-clean" type="button" tabindex="-1"></button>
                </span>

Update:
My solution is

var tabHideEls = document.querySelectorAll(".ql-toolbar .ql-picker-label");
tabHideEls.forEach(function(item) { item.setAttribute("tabindex", -1); });