Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to remove a tabindex from editor toolbar

See original GitHub issue

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.

Issue Analytics

State:
Created 4 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

1reaction

cchetan1993commented, Sep 20, 2019

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.

0reactions

fairkingcommented, Mar 3, 2020

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); });