时间戳

首页 > 解决方案 > ngx-datatable - 选择未注册的事件

angular - ngx-datatable - 选择未注册的事件

问题描述

我正在尝试使我的 Angular/Typescript 网站符合 ADA 标准，包括允许通过键盘选择项目。可悲的是，我能想到的只是鼠标点击。

我尝试了各种事件组合，但我一定遗漏了一些东西。

<ngx-datatable-column[width]="50" [resizeable]="false" [sortable]="true" [draggable]="false" [canAutoResize="false">
    <ng-templatelet-row="row"ngx-datatable-cell-template>
        <strong></strong>
    <div[class.datatable-icon-right]="!row.$$expanded"
        [class.datatable-icon-down]="row.$$expanded"
        title="Expand/Collapse Row"
        (click)="toggleExpandRow(row)">
    </div>
  </ng-template>
</ngx-datatable-column>

有没有人知道如何让箭头上的点击事件来适应输入按键或类似的东西？

标签： angulartypescriptaccessibilityngx-datatable

解决方案

我不熟悉 Angular，所以我无法提供确切的语法，但我知道点击事件是作为按键“输入”在锚点和按钮元素上传递的，而不是在 div 上。尝试提供等效的按键处理程序，如果事件具有 enter 键代码，则运行 toggleExpandRow(row)。您需要添加一个 tabindex="0" 属性以允许仅使用键盘的用户将焦点放在元素上，并还提供一个 role="button" 属性来描述这不是非活动 div。

它应该看起来像这样：

div[class.datatable-icon-right]="!row.$$expanded"
        [class.datatable-icon-down]="row.$$expanded"
        title="Expand/Collapse Row"
        tabindex="0"
        role="button"
        (keypress)="handleKeypress($event, toggleExpandRow)"
        (click)="toggleExpandRow(row)">
    </div>

让我知道这是否适合你！

推荐阅读