accessibility-elements-content.md

@angular-eslint/template/accessibility-elements-content

Ensures that the heading, anchor and button elements have content in it

• Type: suggestion

Rule Options

The rule accepts an options object with the following properties:

interface Options {
  /**
   * Default: `["aria-label","innerHtml","innerHTML","innerText","outerHTML","title"]`
   */
  allowList?: string[];
}

Usage Examples

The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.

❌ - Toggle examples of incorrect code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/template/accessibility-elements-content": [
      "error"
    ]
  }
}

❌ Invalid Code

<h1 class="size-1"></h1>
~~~~~~~~~~~~~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/accessibility-elements-content": [
      "error"
    ]
  }
}

❌ Invalid Code

<a href="#" [routerLink]="['route1']"></a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/accessibility-elements-content": [
      "error"
    ]
  }
}

❌ Invalid Code

<button></button>
~~~~~~~~~~~~~~~~~

---

Custom Config

{
  "rules": {
    "@angular-eslint/template/accessibility-elements-content": [
      "error",
      {
        "allowList": [
          "aria-labelledby"
        ]
      }
    ]
  }
}

❌ Invalid Code

<button [ariaLabelledBy]="label"></button>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

✅ - Toggle examples of correct code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/template/accessibility-elements-content": [
      "error"
    ]
  }
}

✅ Valid Code

<h1>Heading Content!</h1>
<h2><app-content></app-content></h2>
<h3 [innerHtml]="dangerouslySetHTML"></h3>
<h4 [innerText]="text"></h4>
<a>Anchor Content!</a>
<a><app-content></app-content></a>
<a [innerHTML]="dangerouslySetHTML"></a>
<a [innerText]="text"></a>
<a [outerHTML]="text"></a>
<a aria-hidden></a>
<button [attr.aria-hidden]="true"></button>
<h5 [attr.aria-label]="text"></h5>
<h6 title="text"></h6>

---

Custom Config

{
  "rules": {
    "@angular-eslint/template/accessibility-elements-content": [
      "error",
      {
        "allowList": [
          "appTooltipLabel",
          "ariaLabel"
        ]
      }
    ]
  }
}

✅ Valid Code

<button appTooltipLabel="directive adds aria-label"></button>
<button [appTooltipLabel]="label"></button>
<h1 ariaLabel="Important Content"></h1>
<a [ariaLabel]="label"></a>