Не фокусируюсь на табличном теге с клавиатуры

Question

У меня проблемы с фокусировкой на столе, и я не уверен, как мне его разметить, чтобы он мог получить доступ через клавиатуру.

 <table class="table table-bordered">
                <thead>
                    <tr>
                        <th scope="col" class="sortable" width="10%" (click)="onHeaderClick('id')"
                            [ngClass]="{'active': sortBy == 'id', 'ascending': sortOrder == 'asc', 'descending': sortOrder == 'desc'}">
                            Id
                        </th>
                        <th scope="col" class="sortable" width="50%" (click)="onHeaderClick('name')"
                            [ngClass]="{'active': sortBy == 'name', 'ascending': sortOrder == 'asc', 'descending': sortOrder == 'desc'}">
                            Name
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let student of studentList" (click)="selectedStudent(student)">
                        <td>
                            {{student.uId}}
                        </td>
                        <td>
                            <a (click)="profile(student)">{{student.fields.Name}}</a>
                        </td>
                    </tr>
                </tbody>
            </table>

Answer 1

Вы должны использовать button элементы внутри ячеек заголовка таблицы вместо того, чтобы пытаться сделать th сами элементы интерактивные.

Кнопки предназначены для взаимодействия и имеют все возможности, чтобы помочь пользователю работать с ними.