[eslint-plugin-lit-a11y]: implement control-has-associated-label

[bennypowers]

See: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md

From the docs:

Enforce that a control (an interactive element) has a text label.

There are two supported ways to supply a control with a text label:

• Provide text content inside the element.
• Use the aria-label attribute on the element, with a text value.
• Use the aria-labelledby attribute on the element, and point the IDREF value to an element with an accessible label.
• Alternatively, with an img tag, you may use the alt attribute to supply a text description of the image.

Succeed

html`
  <button type="button" class="icon-save">Save</button>
  <button type="button" aria-label="Save" class="icon-save"></button>
`;

Fail

html`
  <button type="button" class="icon-save"></button>
`;

Proposed Options

{
  "rules": {
    "lit-a11y/control-has-associated-label": ["error", {
      "labelAttributes": ["label"],
      "customElements": [
        { "tagName": "mwc-textfield", "attribute": "label" },
        { "pattern": "mwc-(\\w+)-button", "attribute": "label" },
        { "pattern": "vaadin-(.*)button", "attribute": "label" },
        { "tagName": "label-slot", "slot": ["label"] }
      ],
      "ignoreElements": [
        "audio",
        "canvas",
        "embed",
        "input",
        "textarea",
        "tr",
        "video",
      ],
      "ignoreRoles": [
        "grid",
        "listbox",
        "menu",
        "menubar",
        "radiogroup",
        "row",
        "tablist",
        "toolbar",
        "tree",
        "treegrid",
      ],
      "depth": 3,
    }],
  }
}

• labelAttributes is a list of attributes to check on the control element and its children for a label. Use this if you have a custom element that uses an attribute to render and internal <label>, for example.
• customElements is a list of objects that specifies either a tag name or a RegExp pattern with an associated attribute which, if present and non-empty, validates the control as being labeled, or a required slot for the label content.
• ignoreElements is an array of elements that should not be considered control (interactive) elements and therefore they do not require a text label.
• ignoreRoles is an array of ARIA roles that should not be considered control (interactive) roles and therefore they do not require a text label.
• depth (default 2, max 25) is an integer that determines how deep within an element's children the rule should look for text content or an element with a label to determine if the interactive element will have an accessible label.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[bennypowers]

not stale

[bennypowers]

What do we do about

const content = html`<span slot="label">haha</span>`;
render(html`<label-slot>${content}</label-slot>`, document.body);

Do we just pass any control CE that has a node-position interpolation?