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)
The rule does not have any configuration options.
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
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div aria-roledescriptio="text">Text</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~
<input [aria-labelby]="label">
~~~~~~~~~~~~~~~~~~~~~~
<input [attr.aria-requiredIf]="required">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<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
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<input aria-labelledby="Text">
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div ariaselected="0"></div>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<textarea [attr.aria-readonly]="readonly"></textarea>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<button [variant]="variant">Text</button>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div aria-expanded="true">aria-expanded</div>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div aria-haspopup="menu">aria-haspopup</div>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div [attr.aria-pressed]="undefined">aria-pressed</div>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<input [attr.aria-rowcount]="2">
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<table aria-rowcount="-1"></table>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div aria-relevant="additions">additions</div>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div aria-checked="false">checked</div>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div role="slider" [attr.aria-valuemin]="1"></div>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div role="slider" aria-valuemin="1"></div>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<div aria-="text">Text</div>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<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">
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<app-custom aria-x="text">Text</app-custom>
{
"rules": {
"@angular-eslint/template/accessibility-valid-aria": [
"error"
]
}
}
<app-test aria-expanded="notABoolean"></app-test>