eslint-plugin-smarthr 0.4.2 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -1
- package/package.json +1 -1
- package/rules/a11y-anchor-has-href-attribute/README.md +3 -3
- package/rules/a11y-anchor-has-href-attribute/index.js +2 -2
- package/rules/a11y-delegate-element-has-role-presentation/README.md +11 -11
- package/rules/a11y-image-has-alt-attribute/README.md +3 -3
- package/rules/a11y-image-has-alt-attribute/index.js +2 -2
- package/rules/a11y-input-has-name-attribute/README.md +3 -3
- package/rules/a11y-input-has-name-attribute/index.js +2 -2
- package/test/a11y-anchor-has-href-attribute.js +1 -1
- package/test/a11y-image-has-alt-attribute.js +1 -1
- package/test/a11y-input-has-name-attribute.js +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [0.5.0](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.4.2...v0.5.0) (2024-03-11)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### ⚠ BREAKING CHANGES
|
|
9
|
+
|
|
10
|
+
* spread attributesが指定されている場合、ruleをcorrectにする smartr オプションを allow-spread-attributes オプションにリネームする (#119)
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
* spread attributesが指定されている場合、ruleをcorrectにする smartr オプションを allow-spread-attributes オプションにリネームする ([#119](https://github.com/kufu/eslint-plugin-smarthr/issues/119)) ([25752bb](https://github.com/kufu/eslint-plugin-smarthr/commit/25752bb8e77cf170779de3746b9dbbc3997be09d))
|
|
15
|
+
|
|
5
16
|
### [0.4.2](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.4.1...v0.4.2) (2024-03-03)
|
|
6
17
|
|
|
7
18
|
|
|
@@ -333,7 +344,7 @@ All notable changes to this project will be documented in this file. See [standa
|
|
|
333
344
|
### [0.2.14](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.13...v0.2.14) (2022-12-13)
|
|
334
345
|
|
|
335
346
|
### Features
|
|
336
|
-
* trim-propsルールを追加 ([#44](https://github.com/kufu/eslint-plugin-smarthr/pull/44))
|
|
347
|
+
* trim-propsルールを追加 ([#44](https://github.com/kufu/eslint-plugin-smarthr/pull/44))
|
|
337
348
|
|
|
338
349
|
### [0.2.13](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.12...v0.2.13) (2022-12-07)
|
|
339
350
|
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
- URL遷移を行う場合、hrefが設定されていないとキーボード操作やコンテキストメニューからの遷移ができなくなります
|
|
7
7
|
- これらの操作は href属性を参照します
|
|
8
8
|
- 無効化されたリンクであることを表したい場合 `href={undefined}` を設定してください
|
|
9
|
-
- checkTypeオプションに '
|
|
9
|
+
- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます
|
|
10
10
|
- react-router-dom packageを利用している場合、a要素にto属性が指定されている場合、href属性が指定されているものとして許容します
|
|
11
11
|
- next/link コンポーネント直下のa要素にhref属性が指定されていないことを許容します
|
|
12
12
|
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
rules: {
|
|
18
18
|
'smarthr/a11y-anchor-has-href-attribute': [
|
|
19
19
|
'error', // 'warn', 'off'
|
|
20
|
-
// { checkType: 'always' } /* 'always' || '
|
|
20
|
+
// { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
|
|
21
21
|
]
|
|
22
22
|
},
|
|
23
23
|
}
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
// react-router-domを利用している場合
|
|
50
50
|
<Link to={hoge}>any</Link>
|
|
51
51
|
|
|
52
|
-
// checkType: '
|
|
52
|
+
// checkType: 'allow-spread-attributes'
|
|
53
53
|
<XxxAnchor {...args} />
|
|
54
54
|
<XxxLink {...args} any="any" />
|
|
55
55
|
```
|
|
@@ -45,7 +45,7 @@ const baseCheck = (node, checkType) => {
|
|
|
45
45
|
if (
|
|
46
46
|
nodeName.match(REGEX_TARGET) &&
|
|
47
47
|
checkExistAttribute(node, findHrefAttribute) &&
|
|
48
|
-
(checkType !== '
|
|
48
|
+
(checkType !== 'allow-spread-attributes' || !node.attributes.some(findSpreadAttr))
|
|
49
49
|
) {
|
|
50
50
|
return nodeName
|
|
51
51
|
}
|
|
@@ -87,7 +87,7 @@ const SCHEMA = [
|
|
|
87
87
|
{
|
|
88
88
|
type: 'object',
|
|
89
89
|
properties: {
|
|
90
|
-
checkType: { type: 'string', enum: ['always', '
|
|
90
|
+
checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
|
|
91
91
|
},
|
|
92
92
|
additionalProperties: false,
|
|
93
93
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
# smarthr/a11y-delegate-element-has-role-
|
|
1
|
+
# smarthr/a11y-delegate-element-has-role-presentation
|
|
2
2
|
|
|
3
|
-
- 'role="
|
|
4
|
-
- インタラクティブな要素に対して'role="
|
|
3
|
+
- 'role="presentation"'を適切に設定することを促すルールです
|
|
4
|
+
- インタラクティブな要素に対して'role="presentation"'が設定されている場合、エラーになります
|
|
5
5
|
- インタラクティブな要素とは form, inputなどの入力要素、button, a などのクリッカブルな要素を指します
|
|
6
|
-
- インタラクティブな要素から発生するイベントを親要素でキャッチする場合、親要素に 'role="
|
|
7
|
-
- インタラクティブではない要素でイベントをキャッチしており、かつ'role="
|
|
6
|
+
- インタラクティブな要素から発生するイベントを親要素でキャッチする場合、親要素に 'role="presentation"' を設定することを促します
|
|
7
|
+
- インタラクティブではない要素でイベントをキャッチしており、かつ'role="presentation"'を設定しているにも関わらず、子要素にインタラクティブな要素がない場合はエラーになります
|
|
8
8
|
- additionalInteractiveComponentRegexオプションに独自コンポーネントの名称を正規表現で設定することで、インタラクティブな要素として判定することが可能です
|
|
9
9
|
|
|
10
10
|
## rules
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
```js
|
|
13
13
|
{
|
|
14
14
|
rules: {
|
|
15
|
-
'smarthr/a11y-delegate-element-has-role-
|
|
15
|
+
'smarthr/a11y-delegate-element-has-role-presentation': [
|
|
16
16
|
'error', // 'warn', 'off'
|
|
17
17
|
// { additionalInteractiveComponentRegex: ['^InteractiveComponent%'] }
|
|
18
18
|
]
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
## ❌ Incorrect
|
|
24
24
|
|
|
25
25
|
```jsx
|
|
26
|
-
// インタラクティブな要素に対して role="
|
|
27
|
-
<Button role="
|
|
28
|
-
<input type="text" role="
|
|
26
|
+
// インタラクティブな要素に対して role="presentation" は設定できない
|
|
27
|
+
<Button role="presentation">text.</Button>
|
|
28
|
+
<input type="text" role="presentation" />
|
|
29
29
|
|
|
30
30
|
// インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
|
|
31
|
-
// role="
|
|
31
|
+
// role="presentation" を設定する必要がある
|
|
32
32
|
<div onClick={hoge}>
|
|
33
33
|
<Button>text.</Button>
|
|
34
34
|
</div>
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
```jsx
|
|
46
46
|
// インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
|
|
47
|
-
// role="
|
|
47
|
+
// role="presentation" を設定する
|
|
48
48
|
<div onClick={hoge} role="presentation">
|
|
49
49
|
<Button>text.</Button>
|
|
50
50
|
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# smarthr/a11y-image-has-alt-attribute
|
|
2
2
|
|
|
3
3
|
- 画像やアイコンにalt属性を設定することを強制するルールです
|
|
4
|
-
- checkTypeオプションに '
|
|
4
|
+
- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
|
|
5
5
|
|
|
6
6
|
## rules
|
|
7
7
|
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
rules: {
|
|
11
11
|
'smarthr/a11y-image-has-alt-attribute': [
|
|
12
12
|
'error', // 'warn', 'off'
|
|
13
|
-
// { checkType: 'always' } /* 'always' || '
|
|
13
|
+
// { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
16
|
}
|
|
@@ -56,7 +56,7 @@ const StyledPiyo = styled(Icon)``
|
|
|
56
56
|
<Icon alt="message" />
|
|
57
57
|
```
|
|
58
58
|
```jsx
|
|
59
|
-
// checkType: '
|
|
59
|
+
// checkType: 'allow-spread-attributes'
|
|
60
60
|
<XxxImage {...args} />
|
|
61
61
|
<YyyIcon {...args} any="any" />
|
|
62
62
|
```
|
|
@@ -42,7 +42,7 @@ const SCHEMA = [
|
|
|
42
42
|
{
|
|
43
43
|
type: 'object',
|
|
44
44
|
properties: {
|
|
45
|
-
checkType: { type: 'string', enum: ['always', '
|
|
45
|
+
checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
|
|
46
46
|
},
|
|
47
47
|
additionalProperties: false,
|
|
48
48
|
}
|
|
@@ -76,7 +76,7 @@ module.exports = {
|
|
|
76
76
|
!isWithinSvgJsxElement(node.parent)
|
|
77
77
|
) &&
|
|
78
78
|
(
|
|
79
|
-
checkType !== '
|
|
79
|
+
checkType !== 'allow-spread-attributes' ||
|
|
80
80
|
!node.attributes.some(findSpreadAttr)
|
|
81
81
|
)
|
|
82
82
|
) {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
- 入力要素は name を設定することでブラウザの補完機能が有効になる可能性が高まります。
|
|
5
5
|
- 補完機能はブラウザによって異なるため、補完される可能性が上がるよう、name には半角英数の小文字・大文字と一部記号(`_ , [, ]`)のみ利用可能です。
|
|
6
6
|
- input[type="radio"] は name を適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。
|
|
7
|
-
- checkTypeオプションに '
|
|
7
|
+
- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
|
|
8
8
|
|
|
9
9
|
## rules
|
|
10
10
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
rules: {
|
|
14
14
|
'smarthr/a11y-input-has-name-attribute': [
|
|
15
15
|
'error', // 'warn', 'off'
|
|
16
|
-
// { checkType: 'always' } /* 'always' || '
|
|
16
|
+
// { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
|
|
17
17
|
]
|
|
18
18
|
},
|
|
19
19
|
}
|
|
@@ -51,7 +51,7 @@ const StyledPiyo = styled(RadioButton)``;
|
|
|
51
51
|
<Textarea name="some" />
|
|
52
52
|
<Select name="piyo" />
|
|
53
53
|
|
|
54
|
-
// checkType: '
|
|
54
|
+
// checkType: 'allow-spread-attributes'
|
|
55
55
|
<AnyInput {...args} />
|
|
56
56
|
<AnyInput {...args} any="any" />
|
|
57
57
|
```
|
|
@@ -34,7 +34,7 @@ const SCHEMA = [
|
|
|
34
34
|
{
|
|
35
35
|
type: 'object',
|
|
36
36
|
properties: {
|
|
37
|
-
checkType: { type: 'string', enum: ['always', '
|
|
37
|
+
checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
|
|
38
38
|
},
|
|
39
39
|
additionalProperties: false,
|
|
40
40
|
}
|
|
@@ -60,7 +60,7 @@ module.exports = {
|
|
|
60
60
|
if (!nameAttr) {
|
|
61
61
|
if (
|
|
62
62
|
node.attributes.length === 0 ||
|
|
63
|
-
checkType !== '
|
|
63
|
+
checkType !== 'allow-spread-attributes' ||
|
|
64
64
|
!node.attributes.some(findSpreadAttr)
|
|
65
65
|
) {
|
|
66
66
|
const isRadio =
|
|
@@ -37,7 +37,7 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
|
|
|
37
37
|
{ code: `<HogeAnchor href={hoge}>ほげ</HogeAnchor>` },
|
|
38
38
|
{ code: `<Link href="hoge">ほげ</Link>` },
|
|
39
39
|
{ code: `<Link href="#fuga">ほげ</Link>` },
|
|
40
|
-
{ code: '<AnyAnchor {...args1} />', options: [{ checkType: '
|
|
40
|
+
{ code: '<AnyAnchor {...args1} />', options: [{ checkType: 'allow-spread-attributes' }] },
|
|
41
41
|
],
|
|
42
42
|
invalid: [
|
|
43
43
|
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
@@ -45,7 +45,7 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
|
|
|
45
45
|
{ code: '<HogeImage aria-describedby="hoge" />' },
|
|
46
46
|
{ code: '<HogeImage aria-describedby="hoge" alt="fuga" />' },
|
|
47
47
|
{ code: '<svg><image /></svg>' },
|
|
48
|
-
{ code: '<AnyImg {...hoge} />', options: [{ checkType: '
|
|
48
|
+
{ code: '<AnyImg {...hoge} />', options: [{ checkType: 'allow-spread-attributes' }] },
|
|
49
49
|
],
|
|
50
50
|
invalid: [
|
|
51
51
|
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
@@ -46,9 +46,9 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
|
|
|
46
46
|
{ code: '<HogeTextarea name="hoge" />' },
|
|
47
47
|
{ code: '<select name="hoge" />' },
|
|
48
48
|
{ code: '<Select name="hoge[0][Fuga]" />' },
|
|
49
|
-
{ code: '<Input {...hoge} />', options: [{ checkType: '
|
|
50
|
-
{ code: '<Input {...args1} {...args2} />', options: [{ checkType: '
|
|
51
|
-
{ code: '<Input {...args} hoge="fuga" />', options: [{ checkType: '
|
|
49
|
+
{ code: '<Input {...hoge} />', options: [{ checkType: 'allow-spread-attributes' }] },
|
|
50
|
+
{ code: '<Input {...args1} {...args2} />', options: [{ checkType: 'allow-spread-attributes' }] },
|
|
51
|
+
{ code: '<Input {...args} hoge="fuga" />', options: [{ checkType: 'allow-spread-attributes' }] },
|
|
52
52
|
],
|
|
53
53
|
invalid: [
|
|
54
54
|
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|