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

[Nicholas]

When first loading the demo page (http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx), strictly using a keyboard with no mouse, we have no issue using the <Tab> key to tab through every element on the web page to get to the Editor.  Once you get to the Editor's toolbars and start tabbing all the way into the content area, you cannot <Tab> to the "Design", "HTML", "Preview" tabs below the content area.  You can <Shift> + <Tab> to go back up, but you cannot <Tab> past the content area.  Is there a special key combination I am not aware of to be able to escape the content area?

[Nicholas]

I just wanted to clarify that this happens in IE and Chrome browsers.  Firefox seems to be working for some reason.

[Ianko]

Hello Nicholas,

When it comes to keyboard support and accessibility, it is suggested the AccessibleEditor control to be used—http://demos.telerik.com/aspnet-ajax/editor/examples/accessibleeditor/defaultcs.aspx. 

Regards,
Ianko
Telerik

[Nicholas]

This demo page runs into the same issue as the other demo page.  Once getting to the content area, <Tab> key is not able to get past that area.

[Ianko]

Hello Nicholas,

You can check whether this help article helps out with the situation—http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/accessibility-and-internationalization/keyboard-support/tab-key-behavior.

Regards,
Ianko
Telerik

[Tim]

Was this ever solved/corrected?   Success Criterion 2.1.2 - No Keyboard Trap

when tabbing into the content editor, (in any version) you cannot get past the editor using the keyboard.  

[Rumen]

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