Angular and .NET core. version 13.40.0 / 14.0.1 In US and Canada, Accessibility (WCAG 2.0 AA) is now priority and we have hefty fines and penalties for not complaint to it. Asp.net zero and Metronic themes doesn't have any accessibility consideration.
Example: Side menu, action menu is tables, top bar, profile, pages Simple side menu cannot be navigated using keyboard. Even if we try to set the tab index to certain items, it doesn't work. Couple of reasons we found is Metronic css is overriding bootstrap behavior and how asp. net zero coded the side bar. Action buttons in the primeNG table ( cannot tab into it).
Is there a solution to fix in Metronic or remove Metronic and use bootstrap css directly? Do you have it in your roadmap to adhere to Accessibility as you may have lot of North American clients? Are their any solutions to fix them with less effort?
Appreciate your help
5 Answer(s)
-
0
Hi @mmukkara
Sorry for our late reply, I have created an issue here https://github.com/aspnetzero/aspnet-zero-core/issues/5581, we will work on this for the next version.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
can you please let us know when we can get this fixed. we are mostly stuck. The big issue is "Actions" button on PrimeNG table. We cannot tab or use arrows in the Action button. We tried few options but no use.
can you provide a solution for that as soon as possible. Really appreciate your help
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @mmukkara
We are currently working on this matter and plan to complete it as soon as possible. Thank you for your patience and understanding.
Example temporary solution:
A correction has been made for the actions table in the role table. You can solve the problem using the code examples below.
<div class="btn-group" dropdown placement="bottom left" container="body"> <button id="dropdownButton" type="button" class="btn btn-primary btn-sm dropdown-toggle" dropdownToggle aria-controls="dropdownMenu" (click)="onDropdownClick()"> <i class="fa fa-cog"></i> <span class="caret"></span> {{ 'Actions' | localize }} </button> <ul #dropdownMenu id="dropdownMenu" class="dropdown-menu" role="menu" *dropdownMenu aria-labelledby="dropdownButton" tabindex="-1"> <li *ngIf="'Pages.Administration.Roles.Edit' | permission" role="menuitem" tabindex="0"> <a class="dropdown-item" href="javascript:;" (click)="createOrEditRoleModal.show(record.id)"> {{ 'Edit' | localize }} </a> </li> <li *ngIf=" !record.isStatic && ('Pages.Administration.Roles.Delete' | permission) " role="menuitem" tabindex="0"> <a class="dropdown-item" href="javascript:;" (click)="deleteRole(record)"> {{ 'Delete' | localize }} </a> </li> <li *ngIf="entityHistoryEnabled" role="menuitem" tabindex="0"> <a class="dropdown-item" href="javascript:;" (click)="showHistory(record)"> {{ 'History' | localize }} </a> </li> </ul> </div>@ViewChild('dropdownMenu') dropdownMenu: any; onDropdownClick() { setTimeout(() => { this.dropdownMenu.nativeElement.focus(); }, 0); }Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
We tried above solution, it works partially. It tabs through the list (not up down button) in dropdown but after last element, it doesn't close the dropdown and tab goes to the top of the screen instead of the next column in PrimeNg table. In other places where we have this Action select button functionality in our application, we used ngbdropdown, which works perfectly but if we use the same on PrimeNG table, the dropdown goes underneath (check where you have only 1 record or last record on primeng). We couldn't find the fix yet.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @mmukkara
Thank you for your feedback. We are implementing improvements and fixes for the dropdown and other accessibility issues. As you mentioned, the issue where the dropdown does not close after the last item when tabbing, and the focus order breaks, has been noted. We are making additional adjustments to ensure a consistent experience across similar components.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image)
