Angular

Question

环境：Angular，Bootstrap4。现在选择此步骤是为了使 table 更易于访问。在不久的将来，我们将使 tables 以更 WCAG 的方式可见。请关注这个问题。

具有动态数据的 table 中的每一行都包含一个上下文菜单。见下图。当然这是简化版，只有2个选项。

用户使用上下文菜单选择一个操作。通常情况下，上下文菜单是通过单击鼠标或单击鼠标右键来激活的。事件数据用于定位上下文菜单。在这个简单的案例中，上下文菜单包含 2 个项目：显示和编辑。多年来工作正常。当然，我可以让菜单更显眼。

当上下文菜单处于 Tab 键顺序时，用户可以使用 'return' 激活菜单。问题是事件的坐标然后在页面上的任何位置。

上下文菜单代码是：

<div tabindex="-1" *ngIf="contextmenu===true">
  <app-contextmenu [x]="contextmenuX" [y]="contextmenuY" [menuitems]="showMenuOptions()"
                   (menuItemSelected)="handleMenuSelection($event)"></app-contextmenu>
</div>

如何从选项卡选择的上下文菜单中检索坐标 (x,y)，即点图标或 table 单元格？我可以用来定位上下文菜单的那个位置。

每个 table 行包含最后一个 table 行代码：

<td tabindex="0" class="col-1" (click)="onrightClick($event, journalEntry)" (keydown.enter)="onrightClick($event, journalEntry)"
    (contextmenu)="onrightClick($event, journalEntry)">
  <fa-icon [icon]="ellipsisV" size="1x" alt="..." aria-label="..."  [styles]="{'stroke': 'blue', 'color': 'blue'}"></fa-icon>
</td>

当页面包含上下文菜单时，我将其放在页面底部：

<div tabindex="-1" *ngIf="contextmenu===true">
  <app-contextmenu [x]="contextmenuX" [y]="contextmenuY" [menuitems]="showMenuOptions()"
                   (menuItemSelected)="handleMenuSelection($event)"></app-contextmenu>
</div>

上下文菜单的代码是：

<div class="contextmenu" [ngStyle]="{'left.px': x, 'top.px': y}">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let menuItem of theMenuItems">
      <span (click)="outputSelectedMenuItem( menuItem)">{{ menuItem }}</span>
    </li>
  </ul>
</div>

Answer 1

放置上下文菜单并使用数据和布尔的通用行 ID 将其隐藏。当用户单击时，传递包含该行的数据并将 bool 设置为 true。如果 bool 为 true，则显示上下文菜单。并在进行更改后将 bool 设置为 false。

Answer 2

在 Menu buttons 上的 w3 文档中找到同事的建议。

我正在尝试的另一个解决方案是使用 pulldown menu。然后，您可以使用 'standard' 库元素，因此只需最少的编码。它看起来有点沉重（外观和感觉），但使用起来非常清晰和直观。

非常欢迎进一步的建议！

Angular - 如何使用 'return' 键将上下文菜单定位在 table 行中

Angular - how to position a context menu in a table row using a 'return' key

wcag2.0