Skip to content

Commit

Permalink
feat(eslint-plugin-template): [accessibility-elements-content] add al…
Browse files Browse the repository at this point in the history 
…lowList option (#1201)
  • Loading branch information
@sandikbarr
sandikbarr committed Nov 17, 2022
1 parent 6ceef8d commit 3877f43
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 282 deletions.
303 changes: 40 additions & 263 deletions packages/eslint-plugin-template/docs/rules/accessibility-elements-content.md
View file
Expand Up @@ -23,7 +23,17 @@ Ensures that the heading, anchor and button elements have content in it

## Rule Options

The rule does not have any configuration options.
The rule accepts an options object with the following properties:

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

```

<br>

Expand Down Expand Up @@ -113,94 +123,48 @@ The rule does not have any configuration options.
~~~~~~~~~~~~~~~~~
```

</details>

<br>

---

<br>

<details>
<summary>✅ - Toggle examples of <strong>correct</strong> code for this rule</summary>

<br>

#### Default Config
#### Custom Config

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

<br>

#### ✅ Valid Code
#### ❌ Invalid Code

```html
<h1>Heading Content!</h1>
```

<br>

---

<br>

#### Default Config

```json
{
"rules": {
"@angular-eslint/template/accessibility-elements-content": [
"error"
]
}
}
<button [ariaLabelledBy]="label"></button>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
```

<br>

#### ✅ Valid Code

```html
<h2><app-content></app-content></h2>
```
</details>

<br>

---

<br>

#### Default Config

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

<br>

#### ✅ Valid Code

```html
<h3 [innerHtml]="dangerouslySetHTML"></h3>
```

<br>

---
<details>
<summary>✅ - Toggle examples of <strong>correct</strong> code for this rule</summary>

<br>

Expand All @@ -221,215 +185,19 @@ The rule does not have any configuration options.
#### ✅ Valid Code

```html
<h1>Heading Content!</h1>
<h2><app-content></app-content></h2>
<h3 [innerHtml]="dangerouslySetHTML"></h3>
<h4 [innerText]="text"></h4>
```

<br>

---

<br>

#### Default Config

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

<br>

#### ✅ Valid Code

```html
<a>Anchor Content!</a>
```

<br>

---

<br>

#### Default Config

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

<br>

#### ✅ Valid Code

```html
<a><app-content></app-content></a>
```

<br>

---

<br>

#### Default Config

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

<br>

#### ✅ Valid Code

```html
<a [innerHTML]="dangerouslySetHTML"></a>
```

<br>

---

<br>

#### Default Config

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

<br>

#### ✅ Valid Code

```html
<a [innerText]="text"></a>
```

<br>

---

<br>

#### Default Config

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

<br>

#### ✅ Valid Code

```html
<a [outerHTML]="text"></a>
```

<br>

---

<br>

#### Default Config

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

<br>

#### ✅ Valid Code

```html
<a aria-hidden></a>
```

<br>

---

<br>

#### Default Config

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

<br>

#### ✅ Valid Code

```html
<button [attr.aria-hidden]="true"></button>
```

<br>

---

<br>

#### Default Config

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

<br>

#### ✅ Valid Code

```html
<h5 [attr.aria-label]="text"></h5>
<h6 title="text"></h6>
```

<br>
Expand All @@ -438,13 +206,19 @@ The rule does not have any configuration options.

<br>

#### Default Config
#### Custom Config

```json
{
"rules": {
"@angular-eslint/template/accessibility-elements-content": [
"error"
"error",
{
"allowList": [
"appTooltipLabel",
"ariaLabel"
]
}
]
}
}
Expand All @@ -455,7 +229,10 @@ The rule does not have any configuration options.
#### ✅ Valid Code

```html
<h6 title="text"></h6>
<button appTooltipLabel="directive adds aria-label"></button>
<button [appTooltipLabel]="label"></button>
<h1 ariaLabel="Important Content"></h1>
<a [ariaLabel]="label"></a>
```

</details>
Expand Down

0 comments on commit 3877f43

Please sign in to comment.