Add aria-label API to Grid

[rolfsmeds]

What is the problem?

Setting an accessible name on a vaadin-grid would require it to be applied to the <table> element inside the component's shadow DOM. Thus, there is no non-hacky way to achieve this currently.

accessible-name/accessible-name-ref properties, as supported by certain other components, would be appropriate, and a HasAriaLabel implementation in the Flow component.

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS

[web-padawan]

accessible-name-ref properties, as supported by certain other components, would be appropriate

I don't think we can use accessibleNameRef because the <table> element is in shadow root of the grid.

[jcgueriaud1]

Yes, with aria-label directly on the table in the shadow dom it's working.
With aria-labelledby="otherid" on the table inside the shadow dom, it's not working.

[rolfsmeds]

I don't think we can use accessibleNameRef because the <table> element is in shadow root of the grid.

No, we can't, that was a brainfart. But an accesibe-name prop on the <vaadin-grid> root that sets an aria-label on the <table> will do just fine (while we wait for web standards solve this for us properly).

That did make me realize, however, that a built-in title element for vaadin-grid, as proposed as part of #986, would be even more valuable than I'd previously realized.

[jcgueriaud1]

On the Java side you can set the aria-label by doing this:

grid.getElement().executeJs("this.shadowRoot.querySelector('table').ariaLabel = $0", "My grid name");