Rule: template-accessibility-label-for

Checks if a label component is associated with a form element

Notes:

Config

An optional object with optional controlComponents, labelAttributes and labelComponents properties.

• controlComponents - components that must be inside a label component. Default and non overridable values are “button”, “input”, “meter”, “output”, “progress”, “select” and “textarea”.
• labelAttributes - attributes that must be set on label components. Default and non overridable values are “for” and “htmlFor”.
• labelComponents - components that act like a label. Default and non overridable values are “label”.

Examples

"template-accessibility-label-for": true

"template-accessibility-label-for": [true, {"controlComponents": ["app-input"]}]

"template-accessibility-label-for": [
  true,
  {
    "controlComponents": ["app-input", "app-select"],
    "labelAttributes": ["id"],
    "labelComponents": ["app-label"]
  }
]

Schema

{
  "additionalProperties": false,
  "properties": {
    "controlComponents": {
      "properties": {
        "items": {
          "type": "string"
        },
        "type": "array",
        "uniqueItems": true
      },
      "type": "object"
    },
    "labelAttributes": {
      "properties": {
        "items": {
          "type": "string"
        },
        "type": "array",
        "uniqueItems": true
      },
      "type": "object"
    },
    "labelComponents": {
      "properties": {
        "items": {
          "type": "string"
        },
        "type": "array",
        "uniqueItems": true
      },
      "type": "object"
    }
  },
  "type": "object"
}