eslint-plugin-smarthr 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.4.2](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.4.1...v0.4.2) (2024-03-03)
+
+
+### Features
+
+* best-practice-for-button-elementを追加 ([#115](https://github.com/kufu/eslint-plugin-smarthr/issues/115)) ([c19ab10](https://github.com/kufu/eslint-plugin-smarthr/commit/c19ab1062d00aa000cfcf9b86535af21b47a0ead))
+
+
+### Bug Fixes
+
+* a11y-numbered-text-within-ol でwidthの値が誤検知されてしまう場合に対応する ([#117](https://github.com/kufu/eslint-plugin-smarthr/issues/117)) ([3741d54](https://github.com/kufu/eslint-plugin-smarthr/commit/3741d5412f62ac04286e0626e37d2ca3c57c4f60))
+
 ### [0.4.1](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.4.0...v0.4.1) (2024-02-21)
 
 

package/libs/format_styled_components.js

@@ -18,6 +18,44 @@ const checkImportStyledComponents = (node, context) => {
   }
 }
 
+const getStyledComponentBaseName = (node) => {
+  let base = null
+
+  if (!node.init) {
+    return base
+  }
+
+  const tag = node.init.tag || node.init
+
+  if (tag.object?.name === STYLED_COMPONENTS_METHOD) {
+    base = tag.property.name
+  } else if (tag.callee) {
+    const callee = tag.callee
+
+    switch (STYLED_COMPONENTS_METHOD) {
+      case callee.name: {
+        const arg = tag.arguments[0]
+        base = arg.name || arg.value
+        break
+      }
+      case callee.callee?.name: {
+        const arg = callee.arguments[0]
+        base = arg.name || arg.value
+        break
+      }
+      case callee.object?.name:
+        base = callee.property.name
+        break
+      case callee.object?.callee?.name:
+        const arg = callee.object.arguments[0]
+        base = arg.name || arg.value
+        break
+    }
+  }
+
+  return base
+}
+
 const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) => {
   const entriesesTagNames = Object.entries(EXPECTED_NAMES).map(([b, e]) => [ new RegExp(b), new RegExp(e) ])
   const entriesesUnTagNames = UNEXPECTED_NAMES ? Object.entries(UNEXPECTED_NAMES).map(([b, e]) => {
@@ -52,39 +90,7 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
       }
     },
     VariableDeclarator: (node) => {
-      if (!node.init) {
-        return
-      }
-
-      const tag = node.init.tag || node.init
-
-      let base = null
-
-      if (tag.object?.name === STYLED_COMPONENTS_METHOD) {
-        base = tag.property.name
-      } else if (tag.callee) {
-        const callee = tag.callee
-
-        switch (STYLED_COMPONENTS_METHOD) {
-          case callee.name: {
-            const arg = tag.arguments[0]
-            base = arg.name || arg.value
-            break
-          }
-          case callee.callee?.name: {
-            const arg = callee.arguments[0]
-            base = arg.name || arg.value
-            break
-          }
-          case callee.object?.name:
-            base = callee.property.name
-            break
-          case callee.object?.callee?.name:
-            const arg = callee.object.arguments[0]
-            base = arg.name || arg.value
-            break
-        }
-      }
+      const base = getStyledComponentBaseName(node)
 
       if (base) {
         const extended = node.id.name
@@ -117,4 +123,4 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
   }
 }
 
-module.exports = { generateTagFormatter }
+module.exports = { generateTagFormatter, checkImportStyledComponents, getStyledComponentBaseName }

package/package.json

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

package/rules/a11y-clickable-element-has-text/README.md

@@ -1,6 +1,11 @@
 # smarthr/a11y-clickable-element-has-text
 
-- ButtonやAnchor,Link コンポーネントにテキスト要素が設定されていない場合、アクセシビリティの問題が発生する可能性を防ぐルールです
+- ButtonやAnchor,Link コンポーネントにテキスト要素が設定されていない場合、スクリーンリーダーで押したものが何だったのかわからない等の問題が発生する可能性を防ぐルールです
+- a要素やbutton要素の中身にtextがあることを担保するルール
+- 画像要素の場合は `visuallyHiddenText`や `alt`等代替テキストを設定する
+- SVGの場合はrole="img" と aria-labelを設定する
+- linkとかanchorのchildrenを含まない要素はチェックしない
+  - 例） `<YyyAnchor />`
 
 ## rules
 
@@ -38,7 +43,7 @@
 ```
 
 ```jsx
-<XxxAnchor>>
+<XxxAnchor>
   <XxxTextYyyy />
 </XxxAnchor>
 ```
@@ -57,7 +62,7 @@
 </XxxLink>
 ```
 ```jsx
-<XxxAnchor>>
+<XxxAnchor>
   <YyyIcon visuallyHiddenText="hoge" />
 </XxxAnchor>
 ```
@@ -68,11 +73,11 @@
 ```
 
 ```jsx
-<YyyAnchoor />
+<YyyAnchor />
 ```
 
 ```jsx
-<XxxAnchor>>
+<XxxAnchor>
   <XxxText />
 </XxxAnchor>
 ```

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

@@ -30,9 +30,9 @@ const REGEX_NLSP = /^\s*\n+\s*$/
 const REGEX_CLICKABLE_ELEMENT = /^(a|(.*?)Anchor(Button)?|(.*?)Link|(b|B)utton)$/
 const REGEX_SMARTHR_LOGO = /SmartHRLogo$/
 const REGEX_TEXT_COMPONENT = /(Text|Message)$/
+const REGEX_JSX_TYPE = /^(JSXText|JSXExpressionContainer)$/
 
-const HIT_TYPES_RECURSICVE_SEARCH = ['JSXText', 'JSXExpressionContainer']
-const HIT_TEXT_ATTRS = ['visuallyHiddenText', 'alt']
+const HIT_TEXT_ATTR = 'alt'
 
 const filterFalsyJSXText = (cs) => cs.filter(checkFalsyJSXText)
 const checkFalsyJSXText = (c) => (
@@ -68,7 +68,7 @@ module.exports = {
         }
 
         const recursiveSearch = (c) => {
-          if (HIT_TYPES_RECURSICVE_SEARCH.includes(c.type)) {
+          if (REGEX_JSX_TYPE.test(c.type)) {
             return true
           }
 
@@ -97,7 +97,7 @@ module.exports = {
 
                 if (
                   prev ||
-                  !HIT_TEXT_ATTRS.includes(a.name.name)
+                  HIT_TEXT_ATTR !== a.name.name
                 ) {
                   return prev
                 }

package/rules/a11y-numbered-text-within-ol/index.js

@@ -6,20 +6,27 @@ const EXPECTED_NAMES = {
 }
 const UNEXPECTED_NAMES = EXPECTED_NAMES
 
-const NUMBERED_TEXT_REGEX = /^[\s\n]*(([1-9])([^1-9]{2})[^\s\n]*)/
+const NUMBERED_TEXT_REGEX = /^[\s\n]*(([0-9])([^0-9]{2})[^\s\n]*)/
 const ORDERED_LIST_REGEX = /(Ordered(.*)List|^ol)$/
 const SELECT_REGEX = /(S|s)elect$/
+const IGNORE_ATTRIBUTE_REGEX = /((w|W)idth|(h|H)eight)$/
+const AS_ATTRIBUTE_REGEX = /^(as|forwardedAs)$/
+
+const findAsOlAttr = (a) => a.type === 'JSXAttribute' && AS_ATTRIBUTE_REGEX.test(a.name?.name) && a.value?.value === 'ol'
 
 const searchOrderedList = (node) => {
   if (node.type === 'JSXElement' && node.openingElement.name?.name) {
     const name = node.openingElement.name.name
 
-    if (name.match(ORDERED_LIST_REGEX)) {
-      return node.openingElement
-    } else if (name.match(SELECT_REGEX)) {
+    if (name.match(SELECT_REGEX)) {
       // HINT: select要素の場合、optionのラベルに連番がついている場合がありえるのでignoreする
       // 通常と処理を分けるためnullではなく0を返す
       return 0
+    } else if (
+      name.match(ORDERED_LIST_REGEX) ||
+      node.openingElement.attributes.find(findAsOlAttr)
+    ) {
+      return node.openingElement
     }
   }
 
@@ -121,7 +128,7 @@ module.exports = {
     return {
       ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
       JSXAttribute: (node) => {
-        if (node.value?.value) {
+        if (node.value?.value && !IGNORE_ATTRIBUTE_REGEX.test(node.name?.name)) {
           checker(node, node.value.value.match(NUMBERED_TEXT_REGEX))
         }
       },

package/rules/best-practice-for-button-element/README.md

@@ -0,0 +1,35 @@
+# smarthr/best-practice-for-button-element
+
+- button要素の利用を禁止し、smarthr/Button、もしくはsmarthr/UnstyledButtonの利用を促すルールです
+- button要素のtype属性のデフォルトは 'submit' であり、これはform要素にbuttonを設置すると、clickでformをsubmitする状態になります
+- 上記挙動は開発者が意図しづらいため、smarthr/Button, smarthr/UnstyledButtonはtype属性のデフォルトを 'button' に変更しています
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-button-element': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```js
+<button>click</button>
+
+const AnyButton = styled.button``
+```
+
+## ✅ Correct
+
+
+```js
+<button type="button">click</button>
+<button type="submit">click</button>
+<Button>click</Button>
+<AnyButton>click</AnyButton>
+
+const AnyButton = styled(Button)``
+```

package/rules/best-practice-for-button-element/index.js

@@ -0,0 +1,43 @@
+const { checkImportStyledComponents, getStyledComponentBaseName } = require('../../libs/format_styled_components')
+
+const ERRORMESSAGE_SUFFIX = `
+ - button要素のtype属性のデフォルトは "submit" のため、button要素がformでラップされていると意図しないsubmitを引き起こす可能性があります
+ - smarthr-ui/Button, smarthr-ui/UnstyledButtonのtype属性のデフォルトは "button" になっているため、buttonから置き換えることをおすすめします`
+const ERRORMESSAGE_REQUIRED_TYPE_ATTR = `button要素を利用する場合、type属性に "button" もしくは "submit" を指定してください${ERRORMESSAGE_SUFFIX}`
+const ERRORMESSAGE_PROHIBIT_STYLED = `"styled.button" の直接利用をやめ、smarthr-ui/Button、もしくはsmarthr-ui/UnstyledButtonを利用してください${ERRORMESSAGE_SUFFIX}`
+
+const findTypeAttr = (a) => a.type === 'JSXAttribute' && a.name.name === 'type'
+
+const SCHEMA = []
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      ImportDeclaration: (node) => {
+        checkImportStyledComponents(node, context)
+      },
+      JSXOpeningElement: (node) => {
+        if (node.name.name === 'button' && !node.attributes.find(findTypeAttr)) {
+          context.report({
+            node,
+            message: ERRORMESSAGE_REQUIRED_TYPE_ATTR,
+          });
+        }
+      },
+      VariableDeclarator: (node) => {
+        if (getStyledComponentBaseName(node) === 'button') {
+          context.report({
+            node,
+            message: ERRORMESSAGE_PROHIBIT_STYLED,
+          });
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/a11y-clickable-element-has-text.js

@@ -92,12 +92,6 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     {
       code: `<a><img src="hoge.jpg" alt="ほげ" /></a>`,
     },
-    {
-      code: `<a><Icon visuallyHiddenText="ほげ" /></a>`,
-    },
-    {
-      code: `<a><AnyComponent><Icon visuallyHiddenText="ほげ" /></AnyComponent></a>`,
-    },
     {
       code: `<a>{any}</a>`,
     },
@@ -194,10 +188,6 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
       code: `<a><img src="hoge.jpg" alt="" /></a>`,
       errors: [{ message: defaultErrorMessage }]
     },
-    {
-      code: `<a><AnyComponent><Icon visuallyHiddenText="" /></AnyComponent></a>`,
-      errors: [{ message: defaultErrorMessage }]
-    },
     {
       code: `<button><img src="hoge.jpg" /></button>`,
       errors: [{ message: defaultErrorMessage }]
@@ -214,10 +204,6 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
       code: `<button><img src="hoge.jpg" alt="" /></button>`,
       errors: [{ message: defaultErrorMessage }]
     },
-    {
-      code: `<button><AnyComponent><Icon visuallyHiddenText="" /></AnyComponent></button>`,
-      errors: [{ message: defaultErrorMessage }]
-    },
     {
       code: `<button><SmartHRLogoSuffix /></button>`,
       errors: [{ message: defaultErrorMessage }]

package/test/a11y-numbered-text-within-ol.js

@@ -21,7 +21,10 @@ ruleTester.run('a11y-numbered-text-within-ol', rule, {
     { code: `<><p>2: hoge</p><p>1: hoge</p></>` },
     { code: `<ol><li>abc</li><li>def</li></ol>` },
     { code: `<OrderedList><li>abc</li><li>def</li></OrderedList>` },
+    { code: `<Hoge as="ol"><li>abc</li><li>def</li></Hoge>` },
+    { code: `<Hoge forwardedAs="ol"><li>abc</li><li>def</li></Hoge>` },
     { code: `<Select><optgroup><option value="hoge">1. hoge</option><option value="fuga">2. fuga</option></optgroup></Select>` },
+    { code: `<><Hoge width="100%" /><Hoge height="200%" /><Hoge maxWidth="30px" /></>` },
   ],
   invalid: [
     { code: `<><p>1: hoge</p><p>2: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。

package/test/best-practice-for-button-element.js

@@ -0,0 +1,38 @@
+const rule = require('../rules/best-practice-for-button-element')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const ERRORMESSAGE_REQUIRED_TYPE_ATTR = `button要素を利用する場合、type属性に "button" もしくは "submit" を指定してください
+ - button要素のtype属性のデフォルトは "submit" のため、button要素がformでラップされていると意図しないsubmitを引き起こす可能性があります
+ - smarthr-ui/Button, smarthr-ui/UnstyledButtonのtype属性のデフォルトは "button" になっているため、buttonから置き換えることをおすすめします`
+const ERRORMESSAGE_PROHIBIT_STYLED = `"styled.button" の直接利用をやめ、smarthr-ui/Button、もしくはsmarthr-ui/UnstyledButtonを利用してください
+ - button要素のtype属性のデフォルトは "submit" のため、button要素がformでラップされていると意図しないsubmitを引き起こす可能性があります
+ - smarthr-ui/Button, smarthr-ui/UnstyledButtonのtype属性のデフォルトは "button" になっているため、buttonから置き換えることをおすすめします`
+
+ruleTester.run('best-practice-for-button-element', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `<Button />` },
+    { code: `<Button>ほげ</Button>` },
+    { code: `<AnyButton>ほげ</AnyButton>` },
+    { code: `<button type="button">any</button>` },
+    { code: `<button type="submit">any</button>` },
+    { code: 'const HogeButton = styled(HogeButton)``' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `<button>ほげ</button>`, errors: [ { message: ERRORMESSAGE_REQUIRED_TYPE_ATTR } ] },
+    { code: 'const HogeButton = styled.button``', errors: [ { message: ERRORMESSAGE_PROHIBIT_STYLED } ] },
+  ]
+})