feat(text): support form-associated custom element labels

[Krishnachaitanyakc]

Summary

Updates the accessible name computation to support <label> elements associated with form-associated custom elements via ElementInternals.

• nativeTextAlternative: Detects form-associated custom elements (those with static formAssociated = true that called attachInternals()) by checking for the labels property on the actual DOM node. When detected, adds labelText to the element's naming methods so the accessible name algorithm resolves associated <label> elements.
• getExplicitLabels (in label-text.js): For custom elements with a labels NodeList (exposed via ElementInternals), returns the labels directly instead of querying the DOM by id. Includes deduplication to prevent double-counting when an implicit (wrapping) label is already part of actualNode.labels.

Test plan

• Added unit tests for nativeTextAlternative covering:
  • Form-associated custom element with an explicit label
  • Custom element without formAssociated (should return empty)
  • Form-associated custom element without labels (should return empty)
• Added unit tests for labelText covering:
  • Explicit label via for attribute on a custom element
  • Multiple explicit labels on a custom element
  • Implicit (wrapping) label on a custom element
  • Deduplication: wrapping label that is also an explicit label (no double text)
  • No labels associated (should return empty)
• All local tests pass (test:jsdom, test:node, test:tsc)
• ESLint passes (0 errors)
• Prettier formatting verified
• Build succeeds

Closes #5045

[straker]

Thanks for the pr. I'm not sure this works as expected though. I'm pretty sure the label and labels properties are only on the internals object and not the root element itself. This means actualNode.labels is always undefined. Trying out the following shows that's the case as #target.label and #target.labels is undefined.

<script>
customElements.define(
  'custom-input',
  class extends HTMLElement {
    static formAssociated = true;
    constructor() {
      super();
      this.internals_ = this.attachInternals();
    }
  }
);
</script>

<label for="target">Custom label</label>
<custom-input id="target"></custom-input>

[Krishnachaitanyakc]

@straker Thanks for reviewing, good catch. the label and labels properties are only on the internals object.

I've updated the approach by using customElements.get(tagName)?.formAssociated instead, and label resolution falls through to the standard label[for=id] matching via findElmsInContext.

[straker]

Thanks for the update. Unfortunately window.customElements.get(nodeName) won't work either as axe-core is used in browser extensions where the isolated javascript context that axe runs in won't have access to any custom element registries. It's for that reason we have an entire set of custom element tickets that have to be done in a specific order in order to support this in all environments.