Angular 8 ng-bootstrap table header 排序列上的键盘导航

Question

我正在使用 sortableheaders 构建数据 table，如文档中 example 所示。

问题

sortable table headers 必须启用键盘导航以实现辅助功能。 table headers 必须是带有选项卡焦点的 selectable 并且所选列必须在按下回车按钮时触发排序功能。这样排序就可以仅与键盘导航一起使用（不需要鼠标）。

版本：

"@ng-bootstrap/ng-bootstrap": "^5.3.1",
"@angular/core": "~8.2.14",

尝试次数

我尝试向第 th 个元素添加一个标签索引，这使元素标签获得焦点。但是，按回车键不会触发排序功能。

<th scope="col" tabindex="0" sortable="name" (sort)="onSort($event)">Country</th>

我也试过添加(keydown)方法，但是键盘事件不能分配给排序事件，因为它没有传入列和方向参数，所以不起作用。

<th scope="col" tabindex="0" sortable="name" (keydown)="onSort($event)" (sort)="onSort($event)">Country</th>

Argument of type 'KeyboardEvent' is not assignable to parameter of type 'SortEvent'.
Type 'KeyboardEvent' is missing the following properties from type 'SortEvent': column, direction

例子

这是一个包含完整代码的 stackblitz： https://stackblitz.com/edit/angular-db3bux-g2z44n?file=src/app/table-complete.html

Answer 1

我添加了@HostListener 并尝试了你的 stackblitz 似乎工作正常

export class NgbdSortableHeader {
  @HostListener('keydown', ['$event'])
  onKeyDown(e) {
    console.log(e);
    if(e.which === 13) { //only react to "Enter"
       this.rotate();
    }
  }

  @Input() sortable: SortColumn = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}

Angular 8 ng-bootstrap table header 排序列上的键盘导航

Angular 8 ng-bootstrap table header keyboard navigation on sort columns

angular

accessibility

keyboard-events

ng-bootstrap

wai-aria