HelperComponent based on Lit not associated with the fields as helper

[knoobie]

What is the problem?

^title says it all - interesting note; using new Paragraph("Text") works and it has the proper association on the field; not just the ID on the element.

Example DOM:

Helper has the correct id, but the input has no proper matching aria.

    var textField = new TextField("Hello WOrld");
    textField.setHelperComponent(new NwrHelperText("This is my helper message"));
    add(textField);
    
    
@Tag("nwr-helper-text")
@JsModule("./nwr/components/nwr-helper-text.ts")
public class NwrHelperText extends LitTemplate {

  public NwrHelperText(String text) {
    super();
    getElement().setProperty("helperText", text);
  }
}

import {html, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('nwr-helper-text')
class NwrHelperText extends LitElement {

  @property()
  helperText: string = "";

  render() {
    return html`
      <span class="helper-text">${this.helperText}</span>
    `;
  }
}

Browsers

• [X] Chrome
• [X] Firefox
• [ ] Safari
• [ ] Safari on iOS
• [ ] Edge

Screen Readers

• [ ] None
• [X] NVDA
• [X] JAWS
• [ ] VoiceOver on MacOS
• [ ] VoiceOver on iOS