-
-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add the
require-accessible-name
rule.
- Loading branch information
yusukehirao
committed
Mar 6, 2022
1 parent
a79f895
commit 0eb3a1e
Showing
13 changed files
with
243 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
packages/@markuplint/rules/src/require-accessible-name/README.ja.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
# アクセシブルな名前必須(`require-accessible-name`) | ||
|
||
要素にアクセシブルな名前がなければ警告します。名前が必要かどうかは ARIA ロールによって異なります。 | ||
|
||
## ルールの詳細 | ||
|
||
👎 間違ったコード例 | ||
|
||
```html | ||
<button> | ||
<span></span> | ||
<span></span> | ||
<span></span> | ||
</button> | ||
``` | ||
|
||
👍 正しいコード例 | ||
|
||
```html | ||
<button> | ||
<span class="visually-hidden">Menu</span> | ||
<span></span> | ||
<span></span> | ||
<span></span> | ||
</button> | ||
``` | ||
|
||
### 設定値 | ||
|
||
- 型: `boolean` | ||
- デフォルト値: `true` | ||
|
||
### デフォルトの警告の厳しさ | ||
|
||
`error` |
41 changes: 41 additions & 0 deletions
41
packages/@markuplint/rules/src/require-accessible-name/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
--- | ||
title: 'Require accessible name' | ||
id: 'require-accessible-name' | ||
category: 'a11y' | ||
--- | ||
|
||
# Require accessible name | ||
|
||
Warn if the element has no accessible name. It is according to its ARIA role whether name required. | ||
|
||
## Rule Details | ||
|
||
👎 Examples of **incorrect** code for this rule | ||
|
||
```html | ||
<button> | ||
<span></span> | ||
<span></span> | ||
<span></span> | ||
</button> | ||
``` | ||
|
||
👍 Examples of **correct** code for this rule | ||
|
||
```html | ||
<button> | ||
<span class="visually-hidden">Menu</span> | ||
<span></span> | ||
<span></span> | ||
<span></span> | ||
</button> | ||
``` | ||
|
||
### Interface | ||
|
||
- Type: `boolean` | ||
- Deafult Value: `true` | ||
|
||
### Default severity | ||
|
||
`error` |
102 changes: 102 additions & 0 deletions
102
packages/@markuplint/rules/src/require-accessible-name/index.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
import { mlRuleTest } from 'markuplint'; | ||
|
||
import rule from './'; | ||
|
||
it('has accessible name', async () => { | ||
const { violations } = await mlRuleTest(rule, '<button>Label</button>'); | ||
expect(violations.length).toBe(0); | ||
}); | ||
|
||
it('has accessible name', async () => { | ||
const { violations } = await mlRuleTest(rule, '<button aria-label="Label"></button>'); | ||
expect(violations.length).toBe(0); | ||
}); | ||
|
||
it("does'nt have accessible name", async () => { | ||
const { violations } = await mlRuleTest(rule, '<button></button>'); | ||
expect(violations).toStrictEqual([ | ||
{ | ||
severity: 'error', | ||
col: 1, | ||
line: 1, | ||
message: 'Require accessible name', | ||
raw: '<button>', | ||
}, | ||
]); | ||
}); | ||
|
||
it("does'nt have accessible name", async () => { | ||
const { violations } = await mlRuleTest(rule, '<input type="text">'); | ||
expect(violations).toStrictEqual([ | ||
{ | ||
severity: 'error', | ||
col: 1, | ||
line: 1, | ||
message: 'Require accessible name', | ||
raw: '<input type="text">', | ||
}, | ||
]); | ||
}); | ||
|
||
it('has accessible name', async () => { | ||
const { violations } = await mlRuleTest(rule, '<input type="text" aria-label="Label">'); | ||
expect(violations.length).toBe(0); | ||
}); | ||
|
||
it('has accessible name', async () => { | ||
const { violations } = await mlRuleTest(rule, '<input type="text" id="foo"><label for="foo">Label</label>'); | ||
expect(violations.length).toBe(0); | ||
}); | ||
|
||
it("does'nt have accessible name", async () => { | ||
const { violations } = await mlRuleTest(rule, '<input type="text" id="foo"><label for="foo2">Label</label>'); | ||
expect(violations).toStrictEqual([ | ||
{ | ||
severity: 'error', | ||
col: 1, | ||
line: 1, | ||
message: 'Require accessible name', | ||
raw: '<input type="text" id="foo">', | ||
}, | ||
]); | ||
}); | ||
|
||
it('has accessible name', async () => { | ||
const { violations } = await mlRuleTest(rule, '<label><input type="text">Label</label>'); | ||
expect(violations.length).toBe(0); | ||
}); | ||
|
||
it("does'nt have accessible name", async () => { | ||
const { violations } = await mlRuleTest( | ||
rule, | ||
` | ||
<button> | ||
<span></span> | ||
<span></span> | ||
<span></span> | ||
</button>`, | ||
); | ||
expect(violations).toStrictEqual([ | ||
{ | ||
severity: 'error', | ||
col: 1, | ||
line: 2, | ||
message: 'Require accessible name', | ||
raw: '<button>', | ||
}, | ||
]); | ||
}); | ||
|
||
it('has accessible name', async () => { | ||
const { violations } = await mlRuleTest( | ||
rule, | ||
` | ||
<button> | ||
<span class="visually-hidden">Menu</span> | ||
<span></span> | ||
<span></span> | ||
<span></span> | ||
</button>`, | ||
); | ||
expect(violations.length).toBe(0); | ||
}); |
24 changes: 24 additions & 0 deletions
24
packages/@markuplint/rules/src/require-accessible-name/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { createRule } from '@markuplint/ml-core'; | ||
|
||
import { getComputedRole, getRoleSpec } from '../helpers'; | ||
|
||
export default createRule<boolean, null>({ | ||
async verify({ document, report, t }) { | ||
await document.walkOn('Element', el => { | ||
const role = getComputedRole(document.specs, el); | ||
if (!role) { | ||
return; | ||
} | ||
const roleSpec = getRoleSpec(document.specs, role.name); | ||
if (!roleSpec || !roleSpec.accessibleNameRequired) { | ||
return; | ||
} | ||
|
||
const hasAccessibleName = !!el.getAccessibleName().trim(); | ||
|
||
if (!hasAccessibleName) { | ||
report({ scope: el, message: t('Require {0}', 'accessible name') }); | ||
} | ||
}); | ||
}, | ||
}); |
30 changes: 30 additions & 0 deletions
30
packages/@markuplint/rules/src/require-accessible-name/schema.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
{ | ||
"$schema": "http://json-schema.org/draft-07/schema#", | ||
"definitions": { | ||
"value": { | ||
"type": "boolean" | ||
} | ||
}, | ||
"oneOf": [ | ||
{ | ||
"type": "boolean", | ||
"enum": [false] | ||
}, | ||
{ | ||
"$ref": "#/definitions/value" | ||
}, | ||
{ | ||
"type": "object", | ||
"additionalProperties": false, | ||
"properties": { | ||
"value": { "$ref": "#/definitions/value" }, | ||
"severity": { | ||
"$ref": "https://raw.githubusercontent.com/markuplint/markuplint/main/packages/%40markuplint/ml-config/schema.json#/definitions/severity" | ||
}, | ||
"reason": { | ||
"type": "string" | ||
} | ||
} | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters