eslint-plugin-smarthr 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -2,8 +2,27 @@
 
 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.8](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.7...v0.2.8) (2022-10-05)
+
+
+### Bug Fixes
+
+* チェックするファイルのdirを取得するロジックから正規表現を取り除く ([#33](https://github.com/kufu/eslint-plugin-smarthr/issues/33)) ([c89548e](https://github.com/kufu/eslint-plugin-smarthr/commit/c89548e465e1f5aec49c6e1fc3b66c5bfefa6281))
+
+### [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/libs/common_domain.js

@@ -14,7 +14,7 @@ const calculateDomainContext = (context) => {
   }
 
   const parentDir = (() => {
-    const dir = context.getFilename().match(/^(.+?)\..+?$/)[1].split('/')
+    const dir = context.getFilename().split('/')
     dir.pop()
     return dir.join('/')
   })()

package/package.json

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

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/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>`)' } ] },
+  ]
+})