[accessibility] tab into the grid

[ceolter]

as explained here:
http://www.angulargrid.com/forum/showthread.php?tid=2250

[antonrademaker]

Any progress on this?

[ceolter]

Nope, sorry. Haven't looked since.

[ronanquillevere]

+1

[ronanquillevere]

My personal hack, it will focus first cell of first row when tabing into the grid. This can be switched to selected row easily I guess if needed.

I have only one column in my grid and simple rows, so this code should be improved to remove potential focus on all cells for all columns and/or for rows with more than one level.

Note that focus styles are not removed when grid looses focus (another bug to track ?)

<div ag-grid="ctlr.gridOptions" class="ag-fresh" role="grid" tabindex="201" ng-focus="ctlr.onFocus()" id="myGrid"></div>

ctrl.onFocus = function()
{
    var rows = $('#myGrid .ag-row.ag-row-even.ag-row-level-0');
    var firstRow = rows[0];

    var firstColumnCells = $('#myGrid .ag-row.ag-row-even.ag-row-level-0 .ag-cell.cell-col-0');
    var firstCell = firstColumnCells[0];

    //remove potential focus on rows
    for (var i = 0; i < rows.length; i++) 
    {
        rows[i].classList.remove('ag-row-focus');
        rows[i].classList.add('ag-row-no-focus');
    }

    //remove potential focus on first column cells
    for (var j = 0; j < rows.length; j++)
    {
        firstColumnCells[j].classList.remove('ag-cell-focus');
        firstColumnCells[j].classList.add('ag-cell-no-focus');
    }

    //focus first row
    firstRow.classList.remove('ag-row-no-focus');
    firstRow.classList.add('ag-row-focus');

    //focus first cell
    firstCell.classList.remove('ag-cell-no-focus');
    firstCell.classList.add('ag-cell-focus');

    firstCell.focus();

};

[asfordmatt]

+1 Being able to tab into (and out of) the grid is good for accessibility.

For my Angular 1 app, my workaround was to add tabindex="0" to the grid div so it gets the keyboard focus, then I added a directive:

function gridTab($window) {
    return {
        restrict : 'A',
        link : function(scope, element) {
            element.bind('focus', function() {
                if (scope.grid.rowData.length > 0) {
                    scope.grid.api.setFocusedCell(0,0);
                }
            });
        }
    };
}

[randdusing]

@asfordmatt I'm not able to shift tab back out of the grid with your method. I tried a few modifications, but haven't been able to fix it yet.

[buddyp450]

Would personally love this feature, am going to have to implement a hacky way of doing it in react until then.

[nkagarw]

Can anyone suggest a way to do it in Angular2 ?

[FranBacoSoft]

Hi everyone,
any news related to this topic?
a setFocus(x,y) method would be fancy!

[ceolter]

still on our todo list,

api.setFocusedCell(rowIndex, colKey, floating) is already in the api

[ceolter]

tracked by https://ag-grid.atlassian.net/browse/AG-46

[makinggoodsoftware]

Hi,

Thank you for raising this issue for us, at this moment we are reviewing how we process Feature Requests/questions that come through from GitHub.

As I am sure you are aware, we offer two products:

ag-Grid - this is entirely free to use in line with our MIT license
ag-Grid Enterprise - our commercial version which funds the development of both versions.

We currently have a very full pipeline of work which can be viewed here: https://www.ag-grid.com/ag-grid-pipeline/

This will be our priority for the coming months and as a result, we don’t have capacity to take feature requests/questions from GitHub, but you might find that yours has already been raised in our pipeline.

We will do a periodic review of GitHub issues for any bugs raised and these can also be tracked on our pipeline page.

Thanks for your understanding.
ag-Grid Team.

[JohnMasterson]

Just to confirm this was included in Version 15 which was released last week.

https://www.ag-grid.com/ag-grid-blog-15-0-0/

Regards,

John