jQuery Grid Plugin - jqGrid

Tony,

Thank you for your response. 

You are correct section 508 is a US standard, not an international standard.  I only mentioned it because it is what is required by my project and was curious if anyone else had made changes to the jqGrid in relation to it.  I absolutely agree that jqGrid should focus on the international standards. 

You mentioned making the grid ARIA compatible.  What do you mean exactly? Have you actually added the roles to the various elements?  I didn't see this in the source, but i am very new to the jqGrid, so please be patient with me if i am asking a dumb question. 

For #1

I was able to make this work with the changes below in grid.base.js.  I am not sure if this is the best way to do this, but having keyboard equivalents seems reasonably useful for all users, so i thought i would pass it on.  (Again, I apologize for my ignorance, but I don't know what the process is for submitting potential code changes)

sort = ts.p.colModel[j].sortable;
if( typeof sort !== 'boolean') {sort =  true;}
if(sort) {
 $("div",this).css("cursor","pointer")
 .click(function(){sortData(this.id,j);return false;})
 .keydown(function(e){ if(e.keyCode == 13) { sortData(this.id, j); return false; } return true; })
 .attr('tabIndex', '');
}

$("#first, #prev, #next, #last",ts.p.pager).click( function(e) {
 var cp = IntNum(ts.p.page),
 last = IntNum(ts.p.lastpage), selclick = false,
 fp=true, pp=true, np=true,lp=true;
 if(last ===0 || last===1) {fp=false;pp=false;np=false;lp=false; }
 else if( last>1 && cp >=1) {
  if( cp === 1) { fp=false; pp=false; }
  else if( cp>1 && cp <last){ }
  else if( cp===last){ np=false;lp=false; }
 } else if( last>1 && cp===0 ) { np=false;lp=false; cp=last-1;}
 if( this.id === 'first' && fp ) { ts.p.page=1; selclick=true;}
 if( this.id === 'prev' && pp) { ts.p.page=(cp-1); selclick=true;}
 if( this.id === 'next' && np) { ts.p.page=(cp+1); selclick=true;}
 if( this.id === 'last' && lp) { ts.p.page=last; selclick=true;}
 if(selclick) {
  if (typeof ts.p.onPaging =='function') {ts.p.onPaging(this.id);}
  clearVals();
  populate();
 }
 e.stopPropagation();
 return false;
}).keydown(function(e){ if(e.keyCode == 13) { $(this).click(); return false; } return true; }).attr('tabIndex', '');
}

For #2:

I completely understand why it has to be two (or potentially more than two with frozen columns) tables.  And all grid widgets that I have looked at use a similar approach of breaking up the various components of the table into different elements.  They also all seem to suffer from they same issue with screen readers not being able to read the column headers.  I was just wondering if there was a best practice for providing the screen reader support while maintaining the dynamicness that provides a good user experience.  It looks like ARIA is the direction things are headed, but there is not much support on older browsers.  My thought was to somehow add the column headers into the table in the body layer and only display it based on the user's stylesheet which would be different for those users using a screen reader versus those that are not.  I don't particularly like this approach but it was the only thing i could think of.  If we have the ARIA support then that seems like it would be sufficient as we could say it is supported using the proper version of the browser.  Can you provide more details on what jqGrid supports now or point me in the right direction to find this information? 

Thanks again for your reply!