Setting the HTML ID for a NativeSelect for WCAG Compliance

Hi there-

I’m trying to use a NativeSelect in order to force standard HTML tags in order to conform to WCAG2 Level A compliance. Unfortunately, in order to properly label such an element, I need to tie a My Label directly to the id of the , but Vaadin setId(“mySelect”) attaches the id to a wrapping div, not the select element itself.

Does anyone have either:

  • a way to set the id of the actual select element
  • an alternative solution that allows WCAG compliant linkage between the label and the control?

I was trying to find something similar to the Bootstrap page override that would allow me to use jsoup to traverse the DOM and manipulate it, but I’m unaware of when/where such a method exists.

Any help would be greatly appreciated as I’m required to pass WCAG compliance, so this is not a negotiable need.

Thank you!

Really not proud of this, but for now, this is the only option I’ve found. There is obvious risk but in this particular case i know I have only one …
Anyone have a better solution?

JavaScript.getCurrent().execute("var s = document.getElementsByTagName('select'); s[0]
.id = 'theIdINeed';");

Michael Vogt has worked on improving WAI-ARIA support in Vaadin, and some of the work is briefly introduced in
this blog post
.

While the feature you requested (“for” attribute) is still unimplemented (
#12161
), he has written a
small add-on
that makes setting such attributes a little easier.