search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
447 stars 83 forks source link

Add aria-label API to Grid #6749

Open rolfsmeds opened 10 months ago

rolfsmeds commented 10 months ago

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

Screen Readers

web-padawan commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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 https://github.com/vaadin/web-components/issues/986, would be even more valuable than I'd previously realized.

jcgueriaud1 commented 10 months ago

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");