valid-aria.md

@angular-eslint/template/valid-aria

[Accessibility] Ensures that correct ARIA attributes and respective values are used

• Type: suggestion

• 💡 Provides suggestions on how to fix issues (https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions)

Rule Options

The rule does not have any configuration options.

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/valid-aria": [
      "error"
    ]
  }
}

❌ Invalid Code

<div aria-roledescriptio="text">Text</div>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~
<input [aria-labelby]="label">
       ~~~~~~~~~~~~~~~~~~~~~~
<input [attr.aria-requiredIf]="required">
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

❌ Invalid Code

<div aria-expanded="notABoolean">notABoolean</div>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div aria-haspopup="notAToken">notAToken</div>
     ~~~~~~~~~~~~~~~~~~~~~~~~~
<input [attr.aria-rowcount]="{ a: 2 }">notAnInteger
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div aria-relevant="notATokenList">notATokenList</div>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div aria-checked="notATristate">notATristate</div>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div role="slider" [attr.aria-valuemin]="[1, 2]">notANumber</div>
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<input [attr.aria-placeholder]="4">notAPlaceholder
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

✅ - Toggle examples of correct code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<input aria-labelledby="Text">

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div ariaselected="0"></div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<textarea [attr.aria-readonly]="readonly"></textarea>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<button [variant]="variant">Text</button>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div aria-expanded="true">aria-expanded</div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div aria-haspopup="menu">aria-haspopup</div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div [attr.aria-pressed]="undefined">aria-pressed</div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<input [attr.aria-rowcount]="2">

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<table aria-rowcount="-1"></table>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div aria-relevant="additions">additions</div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div aria-checked="false">checked</div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div role="slider" [attr.aria-valuemin]="1"></div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div role="slider" aria-valuemin="1"></div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div aria-="text">Text</div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<input
  aria-placeholder="Placeholder"
  aria-orientation="undefined"
  [attr.aria-checked]="test && isChecked"
  [attr.aria-hidden]="'abc' | appAria"
  [attr.aria-invalid]="hasError ? 'grammar' : 'spelling'"
  [attr.aria-label]="inputSchema!.label"
  [attr.aria-live]="inputSchema['live']"
  [attr.aria-required]="inputSchema?.isRequired">

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<app-custom aria-x="text">Text</app-custom>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<app-test aria-expanded="notABoolean"></app-test>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div aria-checked="mixed">checked</div>

---

Default Config

{
  "rules": {
    "@angular-eslint/template/valid-aria": [
      "error"
    ]
  }
}

✅ Valid Code

<div aria-pressed="mixed">checked</div>