eslint-plugin-smarthr 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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)
+
+
+### Features
+
+* a11y-numbered-text-within-olを追加する ([#105](https://github.com/kufu/eslint-plugin-smarthr/issues/105)) ([167b92f](https://github.com/kufu/eslint-plugin-smarthr/commit/167b92f0f29db8ee9a446d25e09e04a7b11ce340))
+* ComboBoxなどのinputAttributesでtitle属性が指定された場合、擬似的にラベルが付いていると判定するように修正 ([#113](https://github.com/kufu/eslint-plugin-smarthr/issues/113)) ([5f3b594](https://github.com/kufu/eslint-plugin-smarthr/commit/5f3b5943ec64a18d094a9c66627ad1db2bbabe08))
+
 ## [0.4.0](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.27...v0.4.0) (2024-02-05)
 
 

package/README.md

@@ -7,6 +7,7 @@
 - [a11y-image-has-alt-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-image-has-alt-attribute)
 - [a11y-input-has-name-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-has-name-attribute)
 - [a11y-input-in-form-control](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-in-form-control)
+- [a11y-numbered-text-within-ol](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-numbered-text-within-ol)
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
 - [a11y-prohibit-useless-sectioning-fragment](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-useless-sectioning-fragment)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)

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

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

@@ -6,7 +6,9 @@
   - URL遷移を行う場合、hrefが設定されていないとキーボード操作やコンテキストメニューからの遷移ができなくなります
     - これらの操作は href属性を参照します
   - 無効化されたリンクであることを表したい場合 `href={undefined}` を設定してください
-- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
+- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます
+- react-router-dom packageを利用している場合、a要素にto属性が指定されている場合、href属性が指定されているものとして許容します
+- next/link コンポーネント直下のa要素にhref属性が指定されていないことを許容します
 
 ## rules
 

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-input-in-form-control/index.js

@@ -63,6 +63,7 @@ const IGNORE_INPUT_CHECK_PARENT_TYPE = /^(Program|ExportNamedDeclaration)$/
 
 const findRoleGroup = (a) => a.name?.name === 'role' && a.value.value === 'group'
 const findAsSectioning = (a) => a.name?.name.match(AS_REGEX) && a.value.value.match(BARE_SECTIONING_TAG_REGEX)
+const findTitle = (i) => i.key.name === 'title'
 
 const SCHEMA = [
   {
@@ -121,6 +122,12 @@ module.exports = {
                   case 'title':
                     isPseudoLabel = true
                     break
+                  case 'inputAttributes': {
+                    if (!isPseudoLabel && i.value.expression.type === 'ObjectExpression' && i.value.expression.properties.some(findTitle)) {
+                      isPseudoLabel = true
+                    }
+                    break
+                  }
                   case 'type':
                     switch (i.value.value) {
                       case 'radio':

package/rules/a11y-numbered-text-within-ol/README.md

@@ -0,0 +1,82 @@
+# smarthr/a11y-numbered-text-within-ol
+
+- "1. hoge", "2. fuga" ... のように連番のテキストをもつコンポーネントはol要素でマークアップすることを促すルールです
+  - ol要素でマークアップすることで連番テキストをもつ要素同士の関係、順番に意味があることを適切に示すことが出来ます
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-numbered-text-within-ol': 'error', // 'warn', 'off',
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// ol要素で囲まれていないためNG
+<Any>1. hoge</Any>
+<Any>2. fuga</Any>
+
+// 属性でも同様にチェックする
+<Any title="1. hoge" />
+<Any title="2. fuga" />
+
+// ol要素内で連番を設定しているとNG
+<OrderedList>
+  <li>1. hoge</li>
+  <li>2. fuga</li>
+</OrderedList>
+
+// 同一のol要素で囲まれていないためNG
+<OrderedList>
+  <li>hoge</li>
+</OrderedList>
+<OrderedList>
+  <li>fuga</li>
+</OrderedList>>
+
+```
+
+## ✅ Correct
+
+```jsx
+<ol>
+  <li>hoge</li>
+  <li>fuga</li>
+</ol>
+
+<OrderedList>
+  <Any title="hoge" />
+  <Any title="fuga" />
+</OrderedList>
+
+// デフォルトの連番からフォーマット、スタイルを変更したい場合
+// counter-reset + counter-increment で表現する
+// 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)
+<OrderedList>
+  <li>
+    <NumberedHeading>hoge</NumberedHeading>
+    <Any />
+  </li>
+  <li>
+    <NumberedHeading>fuga</NumberedHeading>
+    <Any />
+  </li>
+</OrderedList>
+
+...
+
+const OrderedList = styled.ol`
+  list-style: none; // デフォルトのstyleを消す
+  counter-reset: hoge; // カウンターの名称。わかりやすいものなら何でもOK
+`
+const NumberedHeading = styled(Heading)`
+  &::before {
+    counter-increment: hoge; // hogeカウンターを+1する
+    content: "No " counter(hoge) ": "; // 表示される連番のフォーマット
+  }
+`
+```

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

@@ -0,0 +1,141 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  '(Ordered(.*)List|^ol)$': '(Ordered(.*)List)$',
+  '(S|s)elect$': '(Select)$',
+}
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+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(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
+    }
+  }
+
+  if (node.type === 'Program') {
+    return null
+  }
+
+  return searchOrderedList(node.parent)
+}
+
+const checkNumberedTextInOl = (result, node, context) => {
+  if (result) {
+    context.report({
+      node,
+      message: `${result.name.name} 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)`,
+    })
+  }
+}
+
+const renderTag = (node) => `\`${node.name.name}="${node.value.value}"\``
+const renderNode = (node, matcher) => node.type === 'JSXText' ? `\`${matcher[1]}\`` : renderTag(node)
+
+const SCHEMA = []
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    let firstNumber = 0
+    let firstNumberedNode = null
+    let firstNumberedMatcher = null
+
+    function checker(node, matcher) {
+      if (matcher) {
+        const result = searchOrderedList(node)
+
+        if (result !== 0) {
+          checkNumberedTextInOl(result, node, context)
+
+          const nowNumber = matcher[2] * 1
+
+          if (firstNumberedNode && nowNumber !== firstNumber) {
+            if (nowNumber === firstNumber + 1) {
+              const resultFirst = searchOrderedList(firstNumberedNode)
+
+              if (!resultFirst) {
+                if (!result) {
+                  context.report({
+                    node: firstNumberedNode,
+                    message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - ${renderNode(firstNumberedNode, firstNumberedMatcher)} と ${renderNode(node, matcher)} が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります`,
+                  })
+                } else {
+                  context.report({
+                    node: firstNumberedNode,
+                    message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - ${renderNode(firstNumberedNode, firstNumberedMatcher)} が ${renderNode(node, matcher)} を囲んでいるol要素内(<${result.name.name}>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<${result.name.name}>)に存在する必要があります`,
+                  })
+                }
+              } else {
+                if (!result) {
+                  context.report({
+                    node,
+                    message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - ${renderNode(node, matcher)} が ${renderNode(firstNumberedNode, firstNumberedMatcher)} を囲んでいるol要素内(<${resultFirst.name.name}>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<${resultFirst.name.name}>)に存在する必要があります`,
+                  })
+
+                  firstNumberedNode = null
+                } else if (resultFirst !== result) {
+                  context.report({
+                    node,
+                    message: `連番を含むテキストが同一のol要素でマークアップされていません。同一のol要素でマークアップすることでリスト内の要素関連性を正しく表せるためマークアップの修正を行ってください。
+ - ${renderNode(firstNumberedNode, firstNumberedMatcher)} と ${renderNode(node, matcher)} が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります`,
+                  })
+                }
+              }
+            }
+
+            firstNumber = nowNumber
+            firstNumberedNode = node
+            firstNumberedMatcher = matcher
+          } else if (!firstNumberedNode || nowNumber === firstNumber) {
+            firstNumber = nowNumber
+            firstNumberedNode = node
+            firstNumberedMatcher = matcher
+          }
+        }
+      }
+    }
+
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXAttribute: (node) => {
+        if (node.value?.value && !IGNORE_ATTRIBUTE_REGEX.test(node.name?.name)) {
+          checker(node, node.value.value.match(NUMBERED_TEXT_REGEX))
+        }
+      },
+      JSXText: (node) => {
+        checker(node, node.value.match(NUMBERED_TEXT_REGEX))
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

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-input-in-form-control.js

@@ -129,6 +129,8 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeFieldset><HogeCheckBox /><HogeInput title="any" /></HogeFieldset>' },
     { code: '<FugaSection><HogeInput title="any" /></FugaSection>' },
     { code: '<HogeTextarea title="any" />' },
+    { code: '<HogeComboBox inputAttributes={{ title: "any" }} />' },
+    { code: '<HogeComboBox inputAttributes={{ title }} />' },
     { code: '<Fieldset><HogeRadioButtons /></Fieldset>' },
     { code: '<Fieldset><HogeRadioButtonPanels /></Fieldset>' },
     { code: '<Fieldset><HogeCheckBoxs /></Fieldset>' },
@@ -154,6 +156,7 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeSelect />', errors: [ { message: noLabeledSelect('HogeSelect') } ] },
     { code: '<HogeInputFile />', errors: [ { message: noLabeledInput('HogeInputFile') } ] },
     { code: '<HogeComboBox />', errors: [ { message: noLabeledInput('HogeComboBox') } ] },
+    { code: '<HogeComboBox inputAttributes={{ any }} />', errors: [ { message: noLabeledInput('HogeComboBox') } ] },
     { code: '<HogeDatePicker />', errors: [ { message: noLabeledInput('HogeDatePicker') } ] },
     { code: '<HogeFormControl><Input type="checkbox" /><Input type="checkbox" /></HogeFormControl>', errors: [ { message: invalidPureCheckboxInFormControl('Input') } ] },
     { code: '<HogeFormControl><HogeCheckBox /><Input /></HogeFormControl>', errors: [ { message: invalidMultiInputsInFormControl() } ] },

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

@@ -0,0 +1,114 @@
+const rule = require('../rules/a11y-numbered-text-within-ol')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+ruleTester.run('a11y-numbered-text-within-ol', rule, {
+  valid: [
+    { code: `const HogeOrderedFugaList = styled.ol` },
+    { code: `const HogeOrderedFugaList = styled(HogeOrderedList)` },
+    { code: `<p>1: hoge</p>` },
+    { code: `<p title="2. hoge" />` },
+    { 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要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` と \`2: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `
+      <>
+        <div>
+          1. abc
+        </div>
+        <p>
+          2. def
+        </p>
+      </>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1. abc\` と \`2. def\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>2: hoge</p><p>1: hoge</p><p>2: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` と \`2: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>1: hoge</p><ol><li>2: hoge</li></ol></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` が \`2: hoge\` を囲んでいるol要素内(<ol>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<ol>)に存在する必要があります` }, { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` } ] },
+    { code: `<><p>1: hoge</p><p title="2. hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` と \`title="2. hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><ol><li>1: hoge</li></ol><p>2: hoge</p></>`, errors: [ { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`2: hoge\` が \`1: hoge\` を囲んでいるol要素内(<ol>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<ol>)に存在する必要があります` } ] },
+    { code: `<><ol><li>1: hoge</li></ol><ol><li>2: hoge</li></ol></>`, errors: [ { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `連番を含むテキストが同一のol要素でマークアップされていません。同一のol要素でマークアップすることでリスト内の要素関連性を正しく表せるためマークアップの修正を行ってください。
+ - \`1: hoge\` と \`2: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="1: hoge" /><Hoge any="2: hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="1: hoge"\` と \`any="2: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="2: hoge" /><Hoge any="1: hoge" /><Hoge any="2: hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="1: hoge"\` と \`any="2: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="1: hoge" /><ol><li><Hoge any="2: hoge" /></li></ol></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="1: hoge"\` が \`any="2: hoge"\` を囲んでいるol要素内(<ol>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<ol>)に存在する必要があります` }, { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` } ] },
+    { code: `<><ol><li><Hoge any="1: hoge" /></li></ol><Hoge any="2: hoge" /></>`, errors: [ { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="2: hoge"\` が \`any="1: hoge"\` を囲んでいるol要素内(<ol>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<ol>)に存在する必要があります` } ] },
+    { code: `<><ol><li><Hoge any="1: hoge" /></li></ol><ol><li><Hoge any="2: hoge" /></li></ol></>`, errors: [ { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `連番を含むテキストが同一のol要素でマークアップされていません。同一のol要素でマークアップすることでリスト内の要素関連性を正しく表せるためマークアップの修正を行ってください。
+ - \`any="1: hoge"\` と \`any="2: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="1: hoge" /><Hoge any="2: hoge" /><Hoge any="3: hoge" /><Hoge any="4: hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="1: hoge"\` と \`any="2: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="2: hoge"\` と \`any="3: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="3: hoge"\` と \`any="4: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="1: hoge" /><Hoge any="3: hoge" /><Hoge any="4: hoge" /><Hoge any="6: hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="3: hoge"\` と \`any="4: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>1: hoge</p><p>2: hoge</p><p>3: hoge</p><p>4: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` と \`2: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`2: hoge\` と \`3: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`3: hoge\` と \`4: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>1: hoge</p><p>3: hoge</p><p>4: hoge</p><p>6: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`3: hoge\` と \`4: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>3: hoge</p><select><option value="hoge">1: hoge</option></select><p>4: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`3: hoge\` と \`4: hoge\` が同じ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 } ] },
+  ]
+})