Tab to column header, reload and export (accessibility tabindex and aria)

QuestionsTab to column header, reload and export (accessibility tabindex and aria)
Anthony Kam asked 2 weeks 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?

 

 

1 Answers
Abu Ghufran Staff answered 2 weeks 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);

 

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
Abu Ghufran Staff replied 2 weeks ago

I’ve updated the code to include column headers in tabindex.

Your Answer

4 + 19 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?