Making clickable table rows accessable

This particular issue came up for me at work.  The project in question uses AngularJS and bootstrap.  We had a table where the rows were already clickable and opened up a modal popup (id = #recordModal) to edit the record.  However, it was not accessible via the keyboard.

<table class="zebra record-list" cg-busy="'tracker'">
    <tbody>
    <tr ng-repeat="record in list
            data-toggle="modal" data-target="#record-modal"
            ng-click="editRecord(record)">
        <td>{{ record.field1 }}</td>
        <td>{{ record.fieldN }}</td>
    </tr>
    </tbody>
</table>

The solution ended up being two fold.  First, make a wrapper for the editRecord() function which looks at what key was pressed before calling the ng-click function.  So, in your angular controller:

$scope.editRecord = function(record) {...};
$scope.editRecordOnKeyUp = function(event, record) {
    var space, returnKey;
    space = 32;
    returnKey = 13;
    if ( (event.keyCode == space) || (event.keyCode == returnKey) ) {
        $scope.editRecord(record);
        // whatever other setup you need to do
        $('#record-modal').modal();
    }
};

This article was extremely helpful in understanding how Bootstrap modals work.

Then, to make the rows tabbable, add the tabindex=0 property (source) to your element and plug your editRecordOnKeyUp() function into ng-keyup and you are good to go:

<table class="zebra record-list" cg-busy="'tracker'">
    <tbody>
    <tr ng-repeat="record in list
            data-toggle="modal" data-target="#record-modal"
            ng-click="editRecord(record)"
            role="button" tabindex="0"
            ng-keyup="editRecordOnKeyUp($event, record)">
        <td>{{ record.field1 }}</td>
        <td>{{ record.fieldN }}</td>
    </tr>
    </tbody>
</table>

There you have it.