RadEditor Table Plugin ( Keyboard Accessibility Issue )

[Lan]

Hello Telerik team,

Our customer reported that the Telerik RadEditor table plugin is not accessible using the keyboard. I tested it on the RadEditor demo page and confirmed the same issue. Is there any solution for this?

Thanks in advance,

 

Lan

[Rumen]

Hi Lan,

Thank you for reporting this issue. To make sure we are investigating the exact component you have in mind, could you please clarify what you call the Table plugin? Are you referring to:

• The table inserted in the editor's content area,
• One of the modules that appear below the content area,
• Or something else?

It would also help if you could provide:

1. A screenshot showing the exact element you mean.
2. Steps to reproduce the issue, from page load to the point where the keyboard interaction fails.

With this information, we can reproduce the behavior on our side and suggest the best solution.

Regards,
Rumen
Progress Telerik

[Lan]

Hello Rumen,

Yes, we are using the table plugin inserted in the editor (see attached image).

Steps to reproduce:

1. Go to: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

2. Use the Tab key to navigate to the table plugin.

3. Press the Down Arrow key to open the dropdown menu.

4. I tried several keyboard keys, but I couldn’t access the table area.

 

Thank you!

Lan

[Rumen]

Hi Lan,

Thank you for confirming that the issue is with the Insert Table dropdown in the RadEditor toolbar.

Keyboard Accessibility Limitation:

• Currently, the Insert Table dropdown’s grid (used for selecting rows and columns) cannot be accessed or navigated using the keyboard in Chrome and IE. There is no built-in key combination that enables keyboard users to select a table size—mouse interaction is required for this part of the UI.
• This limitation means that users relying on keyboard navigation cannot insert tables without assistance, which does not meet accessibility standards for keyboard-only operation.

Alternatives:

• You can list all table-related commands on the toolbar as it is shown in the full-featured toolbar: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx.
  
  
  All of these buttons are accessible by the keyboard. You can find the list of all toolbar tools in this article: https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/functionality/toolbars/overview#full-set-of-tools-setup 
  
  

                      <telerik:EditorTool Name="InsertRowAbove" />
                      <telerik:EditorTool Name="InsertRowBelow" />
                      <telerik:EditorTool Name="DeleteRow" />
                      <telerik:EditorTool Name="InsertColumnLeft" />
                      <telerik:EditorTool Name="InsertColumnRight" />
                      <telerik:EditorTool Name="DeleteColumn" />
                      <telerik:EditorSeparator></telerik:EditorSeparator>
                      <telerik:EditorTool Name="MergeColumns" />
                      <telerik:EditorTool Name="MergeRows" />
                      <telerik:EditorSeparator></telerik:EditorSeparator>
                      <telerik:EditorTool Name="SplitCell" />
                      <telerik:EditorTool Name="SplitCellHorizontal" />
                      <telerik:EditorTool Name="DeleteCell" />
                      <telerik:EditorTool Name="SetCellProperties" />
                      <telerik:EditorTool Name="SetTableProperties" />

  
  
  
• You can switch to the <telerik:AccessibleRadEditor > editor where the Table command shows a prompt where the user can enter numeric values to create and insert a table element in the content area: https://demos.telerik.com/aspnet-ajax/editor/examples/accessibleeditor/defaultcs.aspx 
  
  

Regards,
Rumen
Progress Telerik

[Lan]

Thank you Rumen!

 

Lan