Label clicks not polyfilled

[bennypowers]

Consider this example switch component

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

@customElement('x-switch')
export class XSwitch extends LitElement {
  static formAssociated = true;
  
  #internals = this.attachInternals();

  @property({ type: Boolean }) checked = false;

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.onClick);
  }
  
  render() {
    return this.checked ? 'x' : 'o';
  }
  
  onClick() {
    this.checked = !this.checked;
  }
}

When it is labeled, clicking the label should toggle the switch:

<x-switch id="x"></x-switch>
<label for="x">LABEL</label>

In Firefox and Chromium (supporting), clicking the label will toggle the switch
However, in epiphany (webkit) clicking the label will not toggle the switch.

The polyfill should add click listeners to labels associated with the control via for

[jpzwarte]

Just ran into this difference as well; the polyfill focuses instead of clicks the element:

    const initLabels = (ref, labels) => {
        if (labels.length) {
            Array.from(labels).forEach(label => label.addEventListener('click', ref.focus.bind(ref)));
            let firstLabelId = labels[0].id;
            if (!labels[0].id) {
                firstLabelId = `${labels[0].htmlFor}_Label`;
                labels[0].id = firstLabelId;
            }
            ref.setAttribute('aria-labelledby', firstLabelId);
        }
    };

Pretty easy to change to ref.click.bind(ref)?