0

Using a PrimeNg datatable to display rows of data. I have a p-menu in my first column.

When activated, the p-menu is appended to the body of the page. This works fine for sighted users, however that same menu is only in the tab order at the end of the document, so it might as well be invisible to keyboard users.

<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>

Would be great to do this inside the template... Thoughts?

JayJJJ
  • 1
  • 2
  • 1
    Can you control the focus location? You are correct that adding elements to the end of the DOM would make it hard for both keyboard and screen reader users to find the newly added elements, but if the focus moves to the menu when it's displayed, that might not be a problem. – slugolicious Apr 30 '18 at 21:24
  • In order to control the focus, it had to be modified in this manner (below). However, the menu needs a template if you want to retain tab order in MSIE11. – JayJJJ May 07 '18 at 20:11
  • ` ` – JayJJJ May 07 '18 at 20:15
  • I'm not sure what a pmenu is or the ngstuff. I was commenting as an accessibility specialist with html. I can give guidance on how the generated html should look. My previous comment was whether you could move the focus to the menu when it's displayed. That would help keyboard and screen reader users. – slugolicious May 13 '18 at 16:30

0 Answers0