WCAG-aria-controls给出了一个问题:aria-valid attr-value

表中动态填充了数据。最后一列有一个上下文菜单。右键单击会打开一个简单(隐藏)的上下文菜单。很好。

在执行WCAG的可访问性检查(通过“Web的可访问性洞察”)时,我得到一个错误:aria valid attr value。这是最后一个汽车WCAG问题,所以我希望你能帮助我解决这个问题。

按钮(触发上下文菜单)具有以下属性:aria controls=“上下文菜单”。上下文菜单代码的id为“上下文菜单”。为什么会出现aria有效属性值错误?我不希望我必须在上下文菜单位于每行内的地方构建行。。。

这是最后一列的代码:

<button id="{{'menubutton'+i}}" title="context menu" alt="context-menu" class="btn btn-info" 
      aria-haspopup="true" aria-controls="context-menu" (contextmenu)="onrightClick($event, journalEntry)">
  <fa-icon [icon]="ellipsisV" [styles]="{'stroke': 'white', 'color': 'white'}" alt="Context menu"></fa-icon>

HTML文件的底部是上下文菜单的代码。通常(当然)不应该显示。

<div tabindex="-1" *ngIf="contextmenu===true">
  <app-contextmenu id="context-menu" [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" role="menu" aria-labelledby="menubutton">
    <li role="none" class="list-group-item" *ngFor="let menuItem of theMenuItems">
      <span role="menuitem" (click)="outputSelectedMenuItem( menuItem)">{{ menuItem }}</span>
    </li>
  </ul>
</div>