eslint-plugin-smarthr 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.
 
+### [0.2.7](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.5...v0.2.7) (2022-10-03)
+
+
+### Features
+
+* add a11y-prohibit-input-placeholder rule. ([#32](https://github.com/kufu/eslint-plugin-smarthr/issues/32)) ([a6033b9](https://github.com/kufu/eslint-plugin-smarthr/commit/a6033b94ba4f4c014caab0746ab151331e45daf0))
+* 修正しなければ問題が起きる可能性があるruleのmeta.typeをproblemに修正 ([#31](https://github.com/kufu/eslint-plugin-smarthr/issues/31)) ([e3980e5](https://github.com/kufu/eslint-plugin-smarthr/commit/e3980e5dd226f229aa21c57b81dd2460b9b0d8c9))
+
+### [0.2.6](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.5...v0.2.6) (2022-09-08)
+
+### Features
+
+* 修正しなければ問題が起きる可能性があるruleのmeta.typeをproblemに修正 ([#31](https://github.com/kufu/eslint-plugin-smarthr/pull/31))
+
 ### [0.2.5](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.4...v0.2.5) (2022-09-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/a11y-clickable-element-has-text/index.js

@@ -14,7 +14,7 @@ const filterFalsyJSXText = (cs) => cs.filter((c) => (
 
 module.exports = {
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     messages: {
       'format-styled-components': '{{ message }}',
       'a11y-clickable-element-has-text': '{{ message }}',

package/rules/a11y-image-has-alt-attribute/index.js

@@ -9,7 +9,7 @@ const EXPECTED_NAMES = {
 
 module.exports = {
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     messages: {
       'format-styled-components': '{{ message }}',
       'a11y-image-has-alt-attribute': '{{ message }}',

package/rules/a11y-prohibit-input-placeholder/README.md

@@ -0,0 +1,36 @@
+# smarthr/a11y-prohibit-input-placeholder
+
+- input や textarea などの入力要素に対して placeholder を設定することを禁止するルールです
+  - placeholder は入力要素に値を設定すると閲覧が不可能になるため、アクセシビリティの観点からは基本的に非推奨です
+- Tooltip や 別途ヒント用の要素を作成し、そちらを表示することで基本的にユーザーが閲覧する必要のあるタイミングで常に見ることができるようにしてください
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-prohibit-input-placeholder': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<Input placeholder="hoge" />
+```
+```jsx
+<CustomTextarea placeholder="hoge" />
+```
+
+## ✅ Correct
+
+```jsx
+<CustomInput tooltip="hoge" />
+```
+```jsx
+<Wrapper>
+  <Textarea />
+  <Hint>hoge</Hint>
+</Wrapper>
+```

package/rules/a11y-prohibit-input-placeholder/index.js

@@ -0,0 +1,46 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  '(i|I)nput$': 'Input$',
+  '(t|T)extarea$': 'Textarea$',
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'format-styled-components': '{{ message }}',
+      'a11y-prohibit-input-placeholder': '{{ message }}',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        if (!node.name.name) {
+          return
+        }
+
+        const match = node.name.name.match(/((i|I)nput|(t|T)extarea)$/)
+
+        if (!match) {
+          return
+        }
+
+        const placeholder = node.attributes.find((a) => a.name?.name === 'placeholder')
+
+        if (placeholder) {
+          context.report({
+              node: placeholder,
+              messageId: 'a11y-prohibit-input-placeholder',
+              data: {
+                message: 'input, textarea要素のplaceholder属性は設定せず、smarthr-ui/Tooltip や別途ヒント用要素の利用を検討してください (例: `<><Input /><Hint>ヒント</Hint></>`, `<Tooltip message="ヒント"><Textarea/></Tooltip>`)',
+              },
+            })
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []

package/rules/a11y-trigger-has-button/index.js

@@ -17,7 +17,7 @@ const filterFalsyJSXText = (cs) => cs.filter((c) => (
 
 module.exports = {
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     messages: {
       'format-styled-components': '{{ message }}',
       'a11y-trigger-has-button': '{{ message }}',

package/rules/best-practice-for-date/index.js

@@ -1,6 +1,6 @@
 module.exports = {
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     messages: {
       'best-practice-for-date': '{{ message }}',
     },

package/rules/jsx-start-with-spread-attributes/index.js

@@ -10,7 +10,7 @@ const SCHEMA = [
 
 module.exports = {
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     messages: {
       'jsx-start-with-spread-attributes': '{{ message }}',
     },

package/test/a11y-prohhibit-input-placeholder.js

@@ -0,0 +1,41 @@
+const rule = require('../rules/a11y-prohibit-input-placeholder')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+ruleTester.run('a11y-prohibit-input-placeholder', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeInput = styled.input``' },
+    { code: 'const HogeTextarea = styled.textarea``' },
+    { code: 'const HogeInput = styled(Input)``' },
+    { code: 'const HogeInput = styled(StyledInput)``' },
+    { code: 'const HogeTextarea = styled(Textarea)``' },
+    { code: `<input />` },
+    { code: `<textarea />` },
+    { code: `<StyledInput />` },
+    { code: `<HogeTextarea />` },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(StyledInput)``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.textarea``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(StyledTextarea)``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },
+    { code: `<input placeholder />`, errors: [ { message: 'input, textarea要素のplaceholder属性は設定せず、smarthr-ui/Tooltip や別途ヒント用要素の利用を検討してください (例: `<><Input /><Hint>ヒント</Hint></>`, `<Tooltip message="ヒント"><Textarea/></Tooltip>`)' } ] },
+    { code: `<textarea placeholder="hoge" />`, errors: [ { message: 'input, textarea要素のplaceholder属性は設定せず、smarthr-ui/Tooltip や別途ヒント用要素の利用を検討してください (例: `<><Input /><Hint>ヒント</Hint></>`, `<Tooltip message="ヒント"><Textarea/></Tooltip>`)' } ] },
+    { code: `<StyledInput placeholder={any} />`, errors: [ { message: 'input, textarea要素のplaceholder属性は設定せず、smarthr-ui/Tooltip や別途ヒント用要素の利用を検討してください (例: `<><Input /><Hint>ヒント</Hint></>`, `<Tooltip message="ヒント"><Textarea/></Tooltip>`)' } ] },
+    { code: `<HogeTextarea placeholder="any" />`, errors: [ { message: 'input, textarea要素のplaceholder属性は設定せず、smarthr-ui/Tooltip や別途ヒント用要素の利用を検討してください (例: `<><Input /><Hint>ヒント</Hint></>`, `<Tooltip message="ヒント"><Textarea/></Tooltip>`)' } ] },
+  ]
+})