eslint-plugin-smarthr 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 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.5.0](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.4.2...v0.5.0) (2024-03-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* spread attributesが指定されている場合、ruleをcorrectにする smartr オプションを allow-spread-attributes オプションにリネームする (#119)
+
+### Bug Fixes
+
+* 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))
+
+### [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)
 
 
@@ -321,7 +344,7 @@ All notable changes to this project will be documented in this file. See [standa
 ### [0.2.14](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.13...v0.2.14) (2022-12-13)
 
 ### Features
-* trim-propsルールを追加 ([#44](https://github.com/kufu/eslint-plugin-smarthr/pull/44)) 
+* trim-propsルールを追加 ([#44](https://github.com/kufu/eslint-plugin-smarthr/pull/44))
 
 ### [0.2.13](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.12...v0.2.13) (2022-12-07)
 

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.5.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/a11y-anchor-has-href-attribute/README.md

@@ -6,7 +6,7 @@
   - URL遷移を行う場合、hrefが設定されていないとキーボード操作やコンテキストメニューからの遷移ができなくなります
     - これらの操作は href属性を参照します
   - 無効化されたリンクであることを表したい場合 `href={undefined}` を設定してください
-- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます
+- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます
 - react-router-dom packageを利用している場合、a要素にto属性が指定されている場合、href属性が指定されているものとして許容します
 - next/link コンポーネント直下のa要素にhref属性が指定されていないことを許容します
 
@@ -17,7 +17,7 @@
   rules: {
     'smarthr/a11y-anchor-has-href-attribute': [
       'error', // 'warn', 'off'
-      // { checkType: 'always' } /* 'always' || 'smart' */
+      // { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
     ]
   },
 }
@@ -49,7 +49,7 @@
 // react-router-domを利用している場合
 <Link to={hoge}>any</Link>
 
-// checkType: 'smart'
+// checkType: 'allow-spread-attributes'
 <XxxAnchor {...args} />
 <XxxLink {...args} any="any" />
 ```

package/rules/a11y-anchor-has-href-attribute/index.js

@@ -45,7 +45,7 @@ const baseCheck = (node, checkType) => {
   if (
     nodeName.match(REGEX_TARGET) &&
     checkExistAttribute(node, findHrefAttribute) &&
-    (checkType !== 'smart' || !node.attributes.some(findSpreadAttr))
+    (checkType !== 'allow-spread-attributes' || !node.attributes.some(findSpreadAttr))
   ) {
     return nodeName
   }
@@ -87,7 +87,7 @@ const SCHEMA = [
   {
     type: 'object',
     properties: {
-      checkType: { type: 'string', enum: ['always', 'smart'], default: 'always' },
+      checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
     },
     additionalProperties: false,
   }

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-delegate-element-has-role-presentation/README.md

@@ -1,10 +1,10 @@
-# smarthr/a11y-delegate-element-has-role-presantation
+# smarthr/a11y-delegate-element-has-role-presentation
 
-- 'role="presantation"'を適切に設定することを促すルールです
-- インタラクティブな要素に対して'role="presantation"'が設定されている場合、エラーになります
+- 'role="presentation"'を適切に設定することを促すルールです
+- インタラクティブな要素に対して'role="presentation"'が設定されている場合、エラーになります
   - インタラクティブな要素とは form, inputなどの入力要素、button, a などのクリッカブルな要素を指します
-- インタラクティブな要素から発生するイベントを親要素でキャッチする場合、親要素に 'role="presantation"' を設定することを促します
-  - インタラクティブではない要素でイベントをキャッチしており、かつ'role="presantation"'を設定しているにも関わらず、子要素にインタラクティブな要素がない場合はエラーになります
+- インタラクティブな要素から発生するイベントを親要素でキャッチする場合、親要素に 'role="presentation"' を設定することを促します
+  - インタラクティブではない要素でイベントをキャッチしており、かつ'role="presentation"'を設定しているにも関わらず、子要素にインタラクティブな要素がない場合はエラーになります
 - additionalInteractiveComponentRegexオプションに独自コンポーネントの名称を正規表現で設定することで、インタラクティブな要素として判定することが可能です
 
 ## rules
@@ -12,7 +12,7 @@
 ```js
 {
   rules: {
-    'smarthr/a11y-delegate-element-has-role-presantation': [
+    'smarthr/a11y-delegate-element-has-role-presentation': [
       'error', // 'warn', 'off'
       // { additionalInteractiveComponentRegex: ['^InteractiveComponent%'] }
     ]
@@ -23,12 +23,12 @@
 ## ❌ Incorrect
 
 ```jsx
-// インタラクティブな要素に対して role="presantation" は設定できない
-<Button role="presantation">text.</Button>
-<input type="text" role="presantation" />
+// インタラクティブな要素に対して role="presentation" は設定できない
+<Button role="presentation">text.</Button>
+<input type="text" role="presentation" />
 
 // インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
-// role="presantation" を設定する必要がある
+// role="presentation" を設定する必要がある
 <div onClick={hoge}>
   <Button>text.</Button>
 </div>
@@ -44,7 +44,7 @@
 
 ```jsx
 // インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
-// role="presantation" を設定する
+// role="presentation" を設定する
 <div onClick={hoge} role="presentation">
   <Button>text.</Button>
 </div>

package/rules/a11y-image-has-alt-attribute/README.md

@@ -1,7 +1,7 @@
 # smarthr/a11y-image-has-alt-attribute
 
 - 画像やアイコンにalt属性を設定することを強制するルールです
-- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
+- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
 
 ## rules
 
@@ -10,7 +10,7 @@
   rules: {
     'smarthr/a11y-image-has-alt-attribute': [
       'error', // 'warn', 'off'
-      // { checkType: 'always' } /* 'always' || 'smart' */
+      // { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
     ]
   },
 }
@@ -56,7 +56,7 @@ const StyledPiyo = styled(Icon)``
 <Icon alt="message" />
 ```
 ```jsx
-// checkType: 'smart'
+// checkType: 'allow-spread-attributes'
 <XxxImage {...args} />
 <YyyIcon {...args} any="any" />
 ```

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

@@ -42,7 +42,7 @@ const SCHEMA = [
   {
     type: 'object',
     properties: {
-      checkType: { type: 'string', enum: ['always', 'smart'], default: 'always' },
+      checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
     },
     additionalProperties: false,
   }
@@ -76,7 +76,7 @@ module.exports = {
                   !isWithinSvgJsxElement(node.parent)
                 ) &&
                 (
-                  checkType !== 'smart' ||
+                  checkType !== 'allow-spread-attributes' ||
                   !node.attributes.some(findSpreadAttr)
                 )
               ) {

package/rules/a11y-input-has-name-attribute/README.md

@@ -4,7 +4,7 @@
   - 入力要素は name を設定することでブラウザの補完機能が有効になる可能性が高まります。
     - 補完機能はブラウザによって異なるため、補完される可能性が上がるよう、name には半角英数の小文字・大文字と一部記号(`_ , [, ]`)のみ利用可能です。
   - input[type="radio"] は name を適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。
-- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
+- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
 
 ## rules
 
@@ -13,7 +13,7 @@
   rules: {
     'smarthr/a11y-input-has-name-attribute': [
       'error', // 'warn', 'off'
-      // { checkType: 'always' } /* 'always' || 'smart' */
+      // { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
     ]
   },
 }
@@ -51,7 +51,7 @@ const StyledPiyo = styled(RadioButton)``;
 <Textarea name="some" />
 <Select name="piyo" />
 
-// checkType: 'smart'
+// checkType: 'allow-spread-attributes'
 <AnyInput {...args} />
 <AnyInput {...args} any="any" />
 ```

package/rules/a11y-input-has-name-attribute/index.js

@@ -34,7 +34,7 @@ const SCHEMA = [
   {
     type: 'object',
     properties: {
-      checkType: { type: 'string', enum: ['always', 'smart'], default: 'always' },
+      checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
     },
     additionalProperties: false,
   }
@@ -60,7 +60,7 @@ module.exports = {
           if (!nameAttr) {
             if (
               node.attributes.length === 0 ||
-              checkType !== 'smart' ||
+              checkType !== 'allow-spread-attributes' ||
               !node.attributes.some(findSpreadAttr)
             ) {
               const isRadio =

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-anchor-has-href-attribute.js

@@ -37,7 +37,7 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     { code: `<HogeAnchor href={hoge}>ほげ</HogeAnchor>` },
     { code: `<Link href="hoge">ほげ</Link>` },
     { code: `<Link href="#fuga">ほげ</Link>` },
-    { code: '<AnyAnchor {...args1} />', options: [{ checkType: 'smart' }] },
+    { code: '<AnyAnchor {...args1} />', options: [{ checkType: 'allow-spread-attributes' }] },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },

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-image-has-alt-attribute.js

@@ -45,7 +45,7 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: '<HogeImage aria-describedby="hoge" />' },
     { code: '<HogeImage aria-describedby="hoge" alt="fuga" />' },
     { code: '<svg><image /></svg>' },
-    { code: '<AnyImg {...hoge} />', options: [{ checkType: 'smart' }] },
+    { code: '<AnyImg {...hoge} />', options: [{ checkType: 'allow-spread-attributes' }] },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },

package/test/a11y-input-has-name-attribute.js

@@ -46,9 +46,9 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
     { code: '<HogeTextarea name="hoge" />' },
     { code: '<select name="hoge" />' },
     { code: '<Select name="hoge[0][Fuga]" />' },
-    { code: '<Input {...hoge} />', options: [{ checkType: 'smart' }] },
-    { code: '<Input {...args1} {...args2} />', options: [{ checkType: 'smart' }] },
-    { code: '<Input {...args} hoge="fuga" />', options: [{ checkType: 'smart' }] },
+    { code: '<Input {...hoge} />', options: [{ checkType: 'allow-spread-attributes' }] },
+    { code: '<Input {...args1} {...args2} />', options: [{ checkType: 'allow-spread-attributes' }] },
+    { code: '<Input {...args} hoge="fuga" />', options: [{ checkType: 'allow-spread-attributes' }] },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },

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