ig DataGrid does not provide an API to mention a row's function

[saychakraborty89]

Description

We use igGrids widely in our codebase. Our ui is such that if you double click or press enter after selecting row, an action takes place. IgGrid does not provide an API through which we can specify the additional responsibility of row. In our case for example, it should a row as well as button.

• ignite-ui version: any
• browser: any

Steps to reproduce

1. Intiate igGrid from javascript code.
2. On the cellclick events, bind a handler that does some action.
3. Use NVDA to move through the rows, see that there is no information available that can tell the user that this element can work as a button.

Violated Accessibility Guideline

This viloates WCAG success criterion 4.1.2 - Name, Role, Value.

Result

User does not have enough information in an element to know the rows can perform other actions too.

Expected result

IgGrid should provide an API that can enable the consuming code to tell igGrid about any other actions the rows are going to perform. This additional information needs to be present in html in such a way that the assistive technology can read it. For example, NVDA should be able to state that this is a row but it also is a button.

[ChronosSF]

@saychakraborty89 , while it's true there is no way to modify the row template currently, this doesn't mean there aren't ways to change it after it was rendered. For example you can always target all rows using a jQuery selector and bulk update them. If this is undesired from a performance standpoint, you can use the specifics of your use-case and update rows on demand when a user selects them.

For example:

features: [
    {
	  name: "Selection",
	  mode: "row",
	  rowSelectionChanging: function (evt, ui) {
               ui.row.element.attr('role', 'button');
          }
    }
]

Let me know if this helps!

[saychakraborty89]

Sorry that I missed your earlier comment. This solution would not be acceptable by our stakeholders as this would require us to tamper with infragistics generated HTML and also, as you mentioned, this is going to affect performance. Moreover, we do not want role = row to be removed, as it is also an important semantic information.

As mentioned in the expected result, we want the nvda to somehow read that this is a row, as well as, a button. As roles cannot have multiple values, infragistics might need to leverage any other property to achieve this. From our stand-point, we would like to have an API through which we can specify the custom 'role' it is performing.

[ChronosSF]

@saychakraborty89 , thank you for the response I am reopening the issue!

I am not saying this would be easy to explain to stakeholders but igGrid is built for performance/low memory consumption and as such it is stripped down as much as possible. One of the ways it does this is by being almost entirely stateless as it barely has any runtime "model" . It renders its DOM and can re-render it when required but between re-renders you can do a lot of additional work on it without breaking anything, especially if it doesn't involve node restructuring.

This being said there aren't many better solutions for what you want than the one I added above. It's a perfectly viable way of altering the DOM of the grid rows that many customers use for various custom solutions to their specific use-cases. Only full row templating would trump that but there are various reasons we haven't implemented row templating yet and why it's unfeasible to consider for this case either.

So to find the right solution I need to know how you envision using this API that the grid would expose? I assume you'd want to aria-label rows so that nvda reads something about it being clickable? Should the label be conditional? We can try adding a template for attributes only (instead of full row template) or a mapper that you can fill with values for the grid to render as aria-labels.

[saychakraborty89]

My thought process was that it is impossible for the igGrid to know how a consumer is going to use a row. So, the consumer would have to pass that information.

For this, ig must provide an API where we specify the added responsibility - which in our case, is button. Then ig can internally map it to whatever property it chooses (it may or may not be aria-label). Our only concern is that the screen reader should be able to read that in a meaningful way so that the end user can understand that this is a row, that also functions as a button.

[ChronosSF]

@saychakraborty89 , I have a working version of an attribute template option for rows. As I mentioned we can't easily expose the whole row for templating but with this option you can add whatever extra attributes you want. It'll look similar to the following:

$("#grid").igGrid({
     ...
      rowAttributeTemplate: "aria-label=\"Row ${index}\"",
});

The template context is an object with the following signature:

{
    rowData: <the record object>,
    index: <the data index of the row>
}

If you think this will work for you we can release it in our next feature release that is most likely happening around November.