首页 > 解决方案 > PrimeNg - 菜单 - 在动态数据表中使用 appendTo,同时保留标签顺序以方便菜单访问(可访问性)

问题描述

使用 PrimeNg 数据表显示数据行。我的第一列中有一个 p 菜单。

激活后,p-menu 将附加到页面主体。这对视力正常的用户来说效果很好,但是相同的菜单仅在文档末尾的 Tab 键顺序中出现,因此它可能对键盘用户不可见。

<p-column header="" [sortable]="false" [style]="{'width':'2rem'}" >
        <ng-template let-col let-files="rowData" pTemplate="body">
            <span>
                <button type="button" pButton icon="fa fa-chevron-down" class="myClass" (click)="menu.toggle($event);onRowClick( files )" tabindex="0" aria-label="View the Menu" aria-haspopup="true"></button>
                <p-menu #menu popup="true" [model]="myModel" styleClass="myclass" appendTo="body"></p-menu>
            </span>
        </ng-template>
</p-column>

在模板中这样做会很棒......想法?

标签: angularaccessibilityprimengprimeng-datatable

解决方案


推荐阅读