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 16 Views
This is a migrated thread and some comments may be shown as answers.
Nicholas
Top achievements
Rank 1
Nicholas asked on 10 Sep 2015, 12:15 AM
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?

6 Answers, 1 is accepted

Sort by
0
Nicholas
Top achievements
Rank 1
answered on 10 Sep 2015, 07:03 PM
I just wanted to clarify that this happens in IE and Chrome browsers.  Firefox seems to be working for some reason.
0
Ianko
Telerik team
answered on 11 Sep 2015, 06:14 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Nicholas
Top achievements
Rank 1
answered on 11 Sep 2015, 07:20 PM
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.
0
Ianko
Telerik team
answered on 12 Sep 2015, 07:26 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Tim
Top achievements
Rank 1
answered on 11 Jun 2020, 02:33 PM

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.  

0
Rumen
Telerik team
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.
Asked by
Nicholas
Top achievements
Rank 1
Answers by
Nicholas
Top achievements
Rank 1
Ianko
Telerik team
Tim
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or