Categories
JavaScript Web

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>