Bug in Grid Component becuase role ="treegrid"?

Question

The element has ARIA role="treegrid" despite it functionally being an element that should have the ARIA role="grid". Go to the Vaadin Grid component page and inspect the first table in the Accessibility tab. It has role="treegrid".

From my understanding, this is the wrong role, because the rows can not be expanded in this Component. See treegrid role on MDN.

The correct role should be "grid", just like the name of the Component. See MDN grid role

Am I understanding this correctly? Shouldn't the role be grid?

Note: I am an accessibility tester with no access to the source code, I found this using dev tools while inspecting my colleagues work and the Vaadin docs. This means I do not know if this is an error in the documentation and my colleagues just made the exact same error or if this is a bug in the framework.

Answer 1

Good catch, and yes, you are understanding this correctly.

To cite the related bug report:

...it may prove to be confusing to screen reader users. While they will never be able to expand the tree that contains only 1 level of data, they will still hear "Level one" announced which is suggestive of there being more levels. Without being able to see the table, it is not unlikely that a screen reader user would assume that there is more content that they cannot access but without know why. It's not the biggest problem, but it adds an element of uncertainty.

What to do if you discover an error like this

1. check if the issue is known

In Open Source libraries like Vaadin, you can go to their issue tracker and search if the issue is known. Often, these are GitHub or Gitlab pages, and you usually find a link on the library’s public page in the header or the footer.

For example, this is an issue already known by their developers:
Grid uses treegrid role even when populated with only 1 level of data #4318

As you can see, these components often are able to cover much more complex scenarios, so the Grid component is capable of becoming a real tree grid, but in the configuration used in your project it’s not.

2. Create a bug report if it’s not known yet

If you cannot find anything, go ahead and file a bug report.

Usually, you’d also find some guidelines on how to do that.

3. Fix the issue in code

As I find myself repeatedly pointing out recently: There is no point in trying to fix accessibility issues from the outside of a library. It’s often a hack, therefore fragile, inefficient, and only your project profits from it.

Instead, if you have developing force, go and fix the issue at the source, if it is important to your project. This is how Open Source works in a nutshell: Somebody, for whom the issue is critical, provides a fix for everyone.

For example, the Vaadin Contribution Guide explains how to go about this.

Answer 2

A bug ticket exists here: https://github.com/vaadin/web-components/issues/4318

The reason for role="treegrid" is that the same vaadin-grid component is also used for hierarchical data (for technical reasons it has a separate Java API where it's called TreeGrid, but under the hood it's really the same component), and currently there is no way for the Grid to know whether or not it contains hierarchical data, as the contents are lazy loaded, and the initial page of data loaded into the Grid may or may not contain more than one level of items. Thus, the Grid currently cannot automatically set its role to grid or treegrid depending on the data. If the role was hardcoded to grid instead, it would create a worse problem when used with hierarchical data. Thus, role="grid" is the lesser of two bad options.