Anthony Kam asked 8 months ago
Hi,
– For ada accessibility requirement, a user needs to be able to tab thru all the elements in the grid and provide proper aria labeling where needed. How can tabindex=0 be included in all the elements, including the reload and export buttons?
And for elements with tabindex=-1, how can this be changed to tabindex=0? Also, how can the html property \’aria-label\’ be added to the various elements, including the reload and export buttons?
– for accessibility, users need to be able to tab to column headers that are sortable, and tab to the reload and export buttons.
Also, be able to tab to the “>” subgrid arrow in each row.
How can these be done?
Abu Ghufran Staff answered 8 months ago
This is currently not implemented.
The basic idea is to use the loadComplete event of the grid to call jquery code which will iterate all such div / span and add tabindex=0 attribute and connect onclick to onenter event. Following will enable tabindex for toolbar buttons and column headers. For subgrid icon, we need some more testing.
$opt["loadComplete"] = "function(){ jQuery('.ui-pg-button, div.ui-jqgrid-sortable').not('.ui-state-disabled').attr('tabindex',0);
jQuery('.ui-pg-button, div.ui-jqgrid-sortable').not('.ui-state-disabled').unbind('keyup');
jQuery('.ui-pg-button, div.ui-jqgrid-sortable').not('.ui-state-disabled').on('keyup',function(e){ if ((e.keyCode || e.which) == 13) this.click();}); }";
$g->set_options($opt);
I’ve updated the code to include column headers in tabindex.
