Tab trap backwards and question about disabling tab focus on grid cells

[Jon]

Hi.

We have encountered trouble when using different data grid settings to create a table component in our Blazor project. I have two questions:

Tab trap backwards?

When you navigate with keyboard into a table you can only leave it "downwards". When trying to tab backwards ("upwards") in the DOM from the first cell of the first row you end upp at the last cell of the first row.

If you use table headings you can use the arrow keys to reach them but from there you cant exit it whit arrow keys and tab navigation from ther triggers a similar "trap" in the headings row. It doesnt seem like you can exit the table upwards in any way. Is this a bug or are we missing something?

Disable tab focus on grid cells?

Is there a way to disable tab focus on grid cells when navigating with keyboard? The behavior we want is the initial browser behavior where only interaction elements such as buttons, links, input fields etc. can be reached. Of course this will create a problem with the sorting buttons in the table header cells as they only are <div>-tags that by default are not focusable.

Sub question:
Are the sorting triggers in the table headers set on the actual sorting icon or on the entire table heading cell?

[Renjith Singh Rajendran]

Hi Jon, 

Greetings from Syncfusion support. 

Query 1 : Tab trap backwards? 

We have confirmed it as a bug and logged the defect report “Problem with the behavior of backward tab navigation in Content/Header” for the same. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and including the defect fix in our weekly release which is expected to be rolled out by the month of May, 2021.  

       

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.       

https://www.syncfusion.com/feedback/23921/problem-with-the-behavior-of-backward-tab-navigation-in-content-header 

Query 2 : Is there a way to disable tab focus on grid cells when navigating with keyboard? 

We suggest you to add the below highlighted GridKeySettings code in your application to prevent navigation using keyboard. 

 

<SfGrid ...> 

    <GridKeySettings MoveDownCell="" MoveLeftCell="" MoveRightCell="" MoveUpCell=""></GridKeySettings> 

    ... 

</SfGrid> 

Query 3 : Are the sorting triggers in the table headers set on the actual sorting icon or on the entire table heading cell? 

Sorting action will be triggered when clicking in the Grid’s header cell. You can click anywhere on the Grid’s header cell to start the sorting action in Grid. 

Online demo : https://blazor.syncfusion.com/demos/datagrid/sorting?theme=bootstrap4 

https://blazor.syncfusion.com/documentation/datagrid/sorting/ 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Jon]

Thank you for the response! When it comes to the answers to the queries:

Query 1:

Great! I look forward to the backwards tab trap being solved! :)

Query 2:

This solution to set the settings to nothing is unfortunately not a good one! When using this setting with tables containing focusable elements, for example the print and edit buttons, you end up focusing on the wrapping cell of the elements(s) not able to navigate from there. So, essentially, this creates a "keyboard prison" that we do not want.

Is there no way to simply deactivate the focus mechanism for the data grid? Otherwise we'll just leave the mechanism on and wait for the backwards tab trap to be solved.

Query 3:

It sounds like the actual trigger for the sorting is the header cell itself, not the icon or the text in it. The problem we encounter here is that we do not reach the sort mechanism if we disable keyboard navigation in the table as the actual sorting is triggered by the cell header which we can not focus on.

A desired HTML solution would for example be to make the icon into a button with aria-describedby connected to the header cell text or something like that. This would make the sorting mechanism reachable both with and without keyboard focus being enabled for the data grid.

Additional question:

Is there a way to make the table pagination links focusable with keyboard navigation? Right now you can only swith page with the PageUp and PageDown keys but is this communicated in some way to the screen reader users? And is it a common way for them and those navigating with keyboard to use pagination? For me it was not obvious until I read the documentation.

[Renjith Singh Rajendran]

Hi Jon, 

Query 2 : Is there no way to simply deactivate the focus mechanism for the data grid? 

Based on this scenario, we suggest you to use Microsoft JsInerop. Using this, we suggest you to bind the JavaScript “keydown” event for Grid(header and content area alone) and prevent the keyboard navigation in Grid based on your requirement. Please refer the codes below, 

<GridEvents Created="Created" ... TValue="Contractor"></GridEvents>
public async Task Created(){     await IJSRuntime.InvokeAsync<object>("keydownprevent");}

[preventkeydown.js] 

function keydownprevent() {    //prevented the tab key press action in both grid's header and content area    document.getElementById("DataGrid").querySelector(".e-gridcontent").addEventListener("keydown", function (evt) {        if (evt.code == "Tab") {            evt.stopImmediatePropagation();        }    }, false);    document.getElementById("DataGrid").querySelector(".e-gridheader").addEventListener("keydown", function (evt) {        if (evt.code == "Tab") {            evt.stopImmediatePropagation();        }    }, false);}

We have also prepared a sample for your convenience, please download the sample from the link below. Below sample contains the suggestions from both Query 2 and Query 3. 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp62561887 

 

Query 3 : A desired HTML solution would for example be to make the icon into a button with aria-describedby connected to the header cell text or something like that 

We have HeaderTemplate support in Grid. With this you can render a custom button in Grid. So now, we suggest you to prevent the sorting action in OnActionBegin event of Grid during clicking any where in Grid’s header cell other than the custom button. Please refer the codes below, 

Reference : https://blazor.syncfusion.com/documentation/datagrid/columns/#header-template 

 

<GridEvents ... OnActionBegin="OnActionBegin" TValue="Contractor"></GridEvents>

<GridColumns> 

    <GridColumn Field="Name"> 

        <HeaderTemplate> 

            Name <SfButton Content="Sort" OnClick="OnClick"></SfButton> 

        </HeaderTemplate> 

    </GridColumn> 

    ... 

</GridColumns> 

public bool flag = true;public void OnClick(){    flag = false;}public void OnActionBegin(ActionEventArgs<Contractor> args){    if (args.RequestType.Equals(Action.Sorting) && flag)    {        //Prevent sorting by clicking on header, other than button        args.Cancel = true;    }    flag = true;}

Query : Is there a way to make the table pagination links focusable with keyboard navigation? 

We suggest you to refer the below documentation for the available keyboard navigation shortcuts in Grid. Kindly refer the below documentation for more details regarding this topic, 

https://blazor.syncfusion.com/documentation/datagrid/accessibility/#keyboard-navigation 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Jesper]

Hi, i have a followup question regarding cellfocus and keyboardnavigation with arrowbuttons in the grid.

We are trying to use a splitbutton or a dropdownbutton in the grid. The button is placed in its own column and shown by template in the presentation mode of the grid and it works well except for when trying to select a value from the dropdown with keyboard.. if you navigate to the cell containing the splitbutton/dropdownbutton and enter it and then enter again for dropdown selection you can not choose a value by arrowdown or any other keyboard combination we have tried, instead it starts to move cellfocus of the grid.

We have tried to put the button in a div and various stoppropagation but can´t get it to work. Is it possible to use these type of buttons in the grid while working with keyboard navigation, if so how?

Regards

Jesper

[Renjith Singh Rajendran]

Hi Jesper, 

Greetings from Syncfusion support. 

We suggest you to define @onkeydown:stopPropagation as true for the parent element of DropDownButton and check this scenario. We are attaching a sample in which the selection of the item from dropdownbutton works fine using keyboard navigation. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1045617634 

 

 

<GridColumn Field="PhoneNumber" AllowSearching="true"> 

    <Template> 

        <div @onkeydown:stopPropagation="true"> 

            <SfDropDownButton Content="Edit"> 

                <DropDownButtonEvents ItemSelected="ItemSelected"></DropDownButtonEvents> 

                <DropDownMenuItems> 

                    <DropDownMenuItem Text="Cut"></DropDownMenuItem> 

                    <DropDownMenuItem Text="Copy"></DropDownMenuItem> 

                    <DropDownMenuItem Text="Paste"></DropDownMenuItem> 

                </DropDownMenuItems> 

            </SfDropDownButton> 

        </div> 

    </Template> 

</GridColumn> 

 

 

Please try the above suggestion, and if you are facing any difficulties kindly share with us a video demo showing the replication of the problem you are facing. 

Regards, 

Renjith R