This is a migrated thread and some comments may be shown as answers.

Accessibility issue when using the "Tab" key to get past the Editor

6 Answers 256 Views

Editor

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 15 Jun 2020, 10:09 AM

Hi Tim,

Here you are an example of how to achieve the requested tab functionality:

Tab Index 1:
<telerik:RadTextBox runat="server" ID="RadTextBoxInput" TabIndex="1"></telerik:RadTextBox>
<br />
<br />
Tab Index 2:
<telerik:RadEditor ID="RadEditor1" Skin="Default" EditModes="Design" OnClientLoad="OnClientLoad" ContentAreaMode="div" runat="server">
    <Modules>
        <telerik:EditorModule Visible="false" />
    </Modules>
</telerik:RadEditor>
<br />
Tab Index 2:
<telerik:RadTextBox runat="server" ID="RadTextBox2" TabIndex="3"></telerik:RadTextBox>
 
<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.get_contentArea().tabIndex = "2"; //set the tabIndex to the content area

        //disable the built-in InsertTab feature which inserts 4 empty spaces on Tab press like in MS Word
        editor.removeShortCut("InsertTab");
        editor.removeShortCut("InsertShiftTab");

        //disable tabbing through the toolbar buttons
        var buttonsHolder = $get(editor.get_id() + "Top"); //get a reference to the top toolbar zone of the editor
        var buttons = buttonsHolder.getElementsByTagName("A"); //get a reference to all A elements on the toolbar and disable the tabbing through them
        for (var i = 0; i < buttons.length; i++) {
            var a = buttons[i];
            a.tabIndex = -1;
            a.tabStop = false;
        }
    }
</script>

The ContentAreaMode="Div" should be set for the above solution to work properly.

Regards,
Rumen
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.