eslint-plugin-smarthr 0.3.24 → 0.3.26

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.3.26](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.25...v0.3.26) (2024-01-24)
+
+
+### Bug Fixes
+
+* a11y-prohibit-useless-sectioning-fragmentの属性チェックのバグを修正 ([#107](https://github.com/kufu/eslint-plugin-smarthr/issues/107)) ([b42bdd9](https://github.com/kufu/eslint-plugin-smarthr/commit/b42bdd9e11258a6a32e13647c0c764065b5bac64))
+
+### [0.3.25](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.24...v0.3.25) (2024-01-23)
+
+
+### Features
+
+* a11y-input-in-form-controlを追加する ([#98](https://github.com/kufu/eslint-plugin-smarthr/issues/98)) ([fb7e77d](https://github.com/kufu/eslint-plugin-smarthr/commit/fb7e77d8c3ac73f57425d094a240d998ff78a51d))
+* a11y-prohibit-useless-sectioning-fragmentを追加する ([#106](https://github.com/kufu/eslint-plugin-smarthr/issues/106)) ([994c040](https://github.com/kufu/eslint-plugin-smarthr/commit/994c04027892a5fe50fb71ba8b5941401f12c02c))
+
 ### [0.3.24](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.23...v0.3.24) (2024-01-19)
 
 ### [0.3.23](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.22...v0.3.23) (2024-01-16)

package/README.md

@@ -6,10 +6,11 @@
 - [a11y-heading-in-sectioning-content](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-heading-in-sectioning-content)
 - [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-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
 - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)
-- [best-practice-for-remote-trigger-action-dialog](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-remote-trigger-action-dialog)
+- [best-practice-for-remote-trigger-dialog](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-remote-trigger-dialog)
 - [format-import-path](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/format-translate-component)
 - [jsx-start-with-spread-attributes](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/jsx-start-with-spread-attributes)

package/package.json

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

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

@@ -15,7 +15,7 @@ const EXPECTED_NAMES = {
 const TARGET_TAG_NAME_REGEX = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
 const INPUT_NAME_REGEX = /^[a-zA-Z0-9_\[\]]+$/
 const INPUT_TAG_REGEX = /(i|I)nput$/
-const RADIO_BUTTON_REGEX = /RadioButton$/
+const RADIO_BUTTON_REGEX = /RadioButton(Panel)?$/
 
 const findNameAttr = (a) => a?.name?.name === 'name'
 const findSpreadAttr = (a) => a.type === 'JSXSpreadAttribute'

package/rules/a11y-input-in-form-control/README.md

@@ -0,0 +1,103 @@
+# smarthr/a11y-input-in-form-control
+
+- 入力要素をsmarthr-ui/FormControl、もしくはsmarthr-ui/Fieldsetで囲むことを促すルールです
+  - SectioningContent + Heading でのマークアップではなく、FormControl・Fieldsetを使うように促します
+  - FormControl・Fieldsetを使うことでlabelと入力要素が適切に紐づいたり、RadioButtonなどが適切にグルーピングされるようになり、アクセシビリティ的メリットが得られます
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-input-in-form-control': [
+      'error', // 'warn', 'off',
+      // {
+      //   additionalInputComponents: ['^HogeSelector$'], // 単一の入力要素として扱いたいコンポーネント名を正規表現で入力する
+      //   additionalMultiInputComponents: ['Inputs$'], // 複数の入力要素として扱いたいコンポーネント名を正規表現で入力する
+      // }
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// FormControlで囲まれていないためNG
+<Input />
+
+// FormControl・FieldsetではなくSectionでマークアップされているためNG
+<Section>
+  <Heading />
+  <Select />
+</Section>
+
+// RadioButton, CheckBoxはFieldsetでグルーピングする必要があるためNG
+<FormControl title="any heading">
+  <RadioButton>{a.label}</RadioButton>
+</FormControl>
+
+// FormControlが複数の入力要素を持ってしまっているのでNG
+<FormControl title="any heading">
+  <Input />
+  <ComboBox />
+</FormControl>
+
+
+// FormControlがネストしてしまっているのでNG
+<FormControl>
+  <SubFormControl>
+    <CheckBox />
+  </SubFormControl>
+</FormControl>
+
+
+// Fieldsetには role="group" がデフォルトで設定されているのでNG
+<Fieldset  role="group" />
+```
+
+## ✅ Correct
+
+```jsx
+<FormControl title="any heading">
+  <Input />
+</FormControl>
+
+<Fieldset title="any heading">
+  {radios.map((a) => (
+    <RadioButton>{a.label}</RadioButton>
+  ))}
+</Fieldset>
+
+<FormControl title="any heading" role="group">
+  <DatePicker />
+  ~
+  <DatePicker />
+</Fieldset>
+
+<Fieldset title="any heading">
+  <FormControl role="group">
+    <DatePicker />
+    ~
+    <DatePicker />
+  </FormControl>>
+</Fieldset>
+
+// childrenを持たないFieldset、FormControlは入力要素として扱うためOK
+<Fieldset title="any heading">
+  <HogeFieldset />
+  <FugaFormControl />
+</Fieldset>
+
+// Sectionより先にFormControl・Fieldsetで囲んでいるためOK
+<Section>
+  <Heading />
+  <FormControl title="any heading">
+    <Input />
+  </FormControl>
+</Section>
+
+// smarthr-ui/CheckBox はlabelを含むため、なんの入力要素かが単独で伝えられるので
+// FormControl・Fieldsetで囲む必要はない (囲んでも問題はない)
+<CheckBox />
+```

package/rules/a11y-input-in-form-control/index.js

@@ -0,0 +1,441 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_LABELED_INPUT_NAMES = {
+  'RadioButton$': '(RadioButton)$',
+  'RadioButtonPanel$': '(RadioButtonPanel)$',
+  'Check(B|b)ox$': '(CheckBox)$',
+}
+const EXPECTED_INPUT_NAMES = {
+  '(I|^i)nput$': '(Input)$',
+  'SearchInput$': '(SearchInput)$',
+  '(T|^t)extarea$': '(Textarea)$',
+  '(S|^s)elect$': '(Select)$',
+  'InputFile$': '(InputFile)$',
+  'Combo(b|B)ox$': '(ComboBox)$',
+  'DatePicker$': '(DatePicker)$',
+  ...EXPECTED_LABELED_INPUT_NAMES,
+}
+
+const EXPECTED_FORM_CONTROL_NAMES = {
+  '(FormGroup)$': '(FormGroup)$',
+  '(FormControl)$': '(FormControl)$',
+  '((F|^f)ieldset)$': '(Fieldset)$',
+}
+
+const EXPECTED_NAMES = {
+  ...EXPECTED_INPUT_NAMES,
+  ...EXPECTED_FORM_CONTROL_NAMES,
+  '(A|^a)rticle$': '(Article)$',
+  '(A|^a)side$': '(Aside)$',
+  '(N|^n)av$': '(Nav)$',
+  '(S|^s)ection$': '(Section)$',
+  'Center$': '(Center)$',
+  'Reel$': '(Reel)$',
+  'Sidebar$': '(Sidebar)$',
+  'Stack$': '(Stack)$',
+
+}
+
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const FORM_CONTROL_INPUTS_REGEX = new RegExp(`(${Object.keys(EXPECTED_INPUT_NAMES).join('|')})`)
+const LABELED_INPUTS_REGEX = new RegExp(`(${Object.keys(EXPECTED_LABELED_INPUT_NAMES).join('|')})`)
+const SEARCH_INPUT_REGEX = /SearchInput$/
+const INPUT_REGEX = /(i|I)nput$/
+const RADIO_BUTTONS_REGEX = /RadioButton(Panel)?$/
+const CHECKBOX_REGEX = /Check(B|b)ox?$/
+const SELECT_REGEX = /(S|s)elect?$/
+const FROM_CONTROLS_REGEX = new RegExp(`(${Object.keys(EXPECTED_FORM_CONTROL_NAMES).join('|')})`)
+const FORM_CONTROL_REGEX = /(Form(Control|Group))$/
+const FIELDSET_REGEX = /Fieldset$/
+const DIALOG_REGEX = /Dialog(WithTrigger)?$/
+const SECTIONING_REGEX = /(((A|^a)(rticle|side))|(N|^n)av|(S|^s)ection|^SectioningFragment)$/
+const BARE_SECTIONING_TAG_REGEX = /^(article|aside|nav|section)$/
+const LAYOUT_COMPONENT_REGEX = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
+const AS_REGEX = /^(as|forwardedAs)$/
+
+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 SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      additionalInputComponents: { type: 'array', items: { type: 'string' }, default: [] },
+      additionalMultiInputComponents: { type: 'array', items: { type: 'string' }, default: [] },
+    },
+    additionalProperties: false,
+  }
+]
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const option = context.options[0] || {}
+    const additionalInputComponents = option.additionalInputComponents?.length > 0 ? new RegExp(`(${option.additionalInputComponents.join('|')})`) : null
+    const additionalMultiInputComponents = option.additionalMultiInputComponents?.length > 0 ? new RegExp(`(${option.additionalMultiInputComponents.join('|')})`) : null
+
+    const checkAdditionalInputComponents = (name) => additionalInputComponents && name.match(additionalInputComponents)
+    const checkAdditionalMultiInputComponents = (name) => additionalMultiInputComponents && name.match(additionalMultiInputComponents)
+
+    let formControls = []
+    let checkboxFormControls = []
+
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const nodeName = node.name.name || '';
+        const isFormControlInput = nodeName.match(FORM_CONTROL_INPUTS_REGEX)
+        const isAdditionalMultiInput = checkAdditionalMultiInputComponents(nodeName)
+
+        if (isFormControlInput || isAdditionalMultiInput || checkAdditionalInputComponents(nodeName)) {
+          let isInMap = false
+
+          // HINT: 検索ボックスの場合、UIの関係上labelを設定出来ないことが多い & smarthr-ui/SearchInputはa11y対策してあるため無視
+          if (nodeName.match(SEARCH_INPUT_REGEX)) {
+            return
+          }
+
+          const isPureInput = nodeName.match(INPUT_REGEX)
+          let isPseudoLabel = false
+          let isTypeRadio = false
+          let isTypeCheck = false
+
+          if (isFormControlInput) {
+            for (const i of node.attributes) {
+              if (i.name) {
+                // HINT: idが設定されている場合、htmlForでlabelと紐づく可能性が高いため無視する
+                // HINT: titleが設定されている場合、なんの入力要素かはわかるため無視する
+                switch (i.name.name) {
+                  case 'id':
+                  case 'title':
+                    isPseudoLabel = true
+                    break
+                  case 'type':
+                    switch (i.value.value) {
+                      case 'radio':
+                        isTypeRadio = true
+                        break
+                      case 'checkbox':
+                        isTypeCheck = true
+                        break
+                    }
+
+                    break
+                }
+              }
+            }
+          }
+          const isRadio = (isPureInput && isTypeRadio) || nodeName.match(RADIO_BUTTONS_REGEX);
+          const isCheckbox = !isRadio && (isPureInput && isTypeCheck || nodeName.match(CHECKBOX_REGEX));
+
+          const wrapComponentName = isRadio ? 'Fieldset' : 'FormControl'
+          const search = (n) => {
+            switch (n.type) {
+              case 'JSXElement': {
+                const openingElement = n.openingElement
+                const name = openingElement.name.name
+
+                if (name) {
+                  if (name.match(FROM_CONTROLS_REGEX)) {
+                    const hit = formControls.includes(n)
+
+                    if (!hit) {
+                      formControls.push(n)
+
+                      if (isCheckbox) {
+                        checkboxFormControls.push(n)
+                      }
+                    }
+
+                    const isMultiInput = isAdditionalMultiInput || hit || isInMap
+                    const matcherFormControl = name.match(FORM_CONTROL_REGEX)
+
+                    if (matcherFormControl) {
+                      if (isRadio || isCheckbox && (isInMap || hit && checkboxFormControls.includes(n))) {
+                        const convertComp = isRadio ? 'smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel' : 'smarthr-ui/Checkbox'
+
+                        context.report({
+                          node: n,
+                          message: `${name} が ${nodeName} を含んでいます。smarthr-ui/${matcherFormControl[1]} を smarthr-ui/Fieldset に変更し、正しくグルーピングされるように修正してください。${isRadio ? `
+ - Fieldsetで同じname属性のラジオボタン全てを囲むことで正しくグループ化され、適切なタイトル・説明を追加出来ます` : ''}${isPureInput ? `
+ - 可能なら${nodeName}は${convertComp}への変更を検討してください。難しい場合は ${nodeName} と結びつくlabel要素が必ず存在するよう、マークアップする必要があることに注意してください。` : ''}`,
+                        });
+                      } else if (isMultiInput && !openingElement.attributes.find(findRoleGroup)) {
+                        context.report({
+                          node: n,
+                          message: `${name} が複数の入力要素を含んでいます。ラベルと入力要素の紐づけが正しく行われない可能性があるため、以下の方法のいずれかで修正してください。
+ - 方法1: 入力要素ごとにラベルを設定できる場合、${name}をsmarthr-ui/Fieldset、もしくはそれを拡張したコンポーネントに変更した上で、入力要素を一つずつsmarthr-ui/FormControlで囲むようにマークアップを変更してください
+ - 方法2: 郵便番号や電話番号など、本来一つの概念の入力要素を分割して複数の入力要素にしている場合、一つの入力要素にまとめることを検討してください
+   - コピーアンドペーストがしやすくなる、ブラウザの自動補完などがより適切に反映されるなど多大なメリットがあります
+ - 方法3: ${name} が smarthr-ui/${matcherFormControl[1]}、もしくはそれを拡張しているコンポーネントではない場合、名称を ${FROM_CONTROLS_REGEX} にマッチしないものに変更してください
+ - 方法4: 上記方法のいずれも対応出来ない場合、${name} に 'role="group"' 属性を設定してください`,
+                        });
+                      }
+                    // HINT: 擬似的にラベルが設定されている場合、無視する
+                    } else if (!isRadio && !isCheckbox && !isPseudoLabel) {
+                      context.report({
+                        node: n,
+                        message: `${name} が ラベルを持たない入力要素(${nodeName})を含んでいます。入力要素が何であるかを正しく伝えるため、以下の方法のいずれかで修正してください。
+ - 方法1: ${name} を smarthr-ui/FormControl、もしくはそれを拡張したコンポーネントに変更してください
+ - 方法2: ${nodeName} がlabel要素を含むコンポーネントである場合、名称を${FORM_CONTROL_REGEX}にマッチするものに変更してください
+    - smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
+ - 方法3: ${nodeName} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を${LABELED_INPUTS_REGEX}にマッチするものに変更してください
+    - smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
+ - 方法4: ${name} が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を ${FIELDSET_REGEX} にマッチしないものに変更してください`,
+                      });
+                    }
+
+                    return
+                  } else {
+                    const isSection = name.match(SECTIONING_REGEX)
+                    const layoutSectionAttribute = !isSection && name.match(LAYOUT_COMPONENT_REGEX) && openingElement.attributes.find(findAsSectioning)
+
+                    if (isSection || layoutSectionAttribute) {
+                      // HINT: smarthr-ui/CheckBoxはlabelを単独で持つため、FormControl系でラップをする必要はない
+                      // HINT: 擬似的にラベルが設定されている場合、無視する
+                      if (!isCheckbox && !isPseudoLabel) {
+                        const actualName = isSection ? name : `<${name} ${layoutSectionAttribute.name.name}="${layoutSectionAttribute.value.value}">`
+                        const isSelect = !isRadio && nodeName.match(SELECT_REGEX)
+
+                        context.report({
+                          node,
+                          message: `${nodeName}は${actualName}より先に、smarthr-ui/${wrapComponentName}が入力要素を囲むようマークアップを以下のいずれかの方法で変更してください。
+ - 方法1: ${actualName} を${wrapComponentName}、もしくはそれを拡張したコンポーネントに変更してください
+   - ${actualName} 内のHeading要素は${wrapComponentName}のtitle属性に変更してください
+ - 方法2: ${actualName} と ${nodeName} の間に ${wrapComponentName} が存在するようにマークアップを変更してください${isRadio ? '' : `
+ - 方法3: 上記のいずれの方法も適切では場合、${nodeName}のtitle属性に "どんな値を${isSelect ? '選択' : '入力'}すれば良いのか" の説明を設定してください
+   - 例: <${nodeName} title="${isSelect ? '検索対象を選択してください' : '姓を全角カタカナのみで入力してください'}" />`}`,
+                        });
+                      }
+
+                      return
+                    }
+                  }
+                }
+
+                break
+              }
+              case 'VariableDeclarator': {
+                if (n.parent.parent?.type && n.parent.parent.type.match(IGNORE_INPUT_CHECK_PARENT_TYPE)) {
+                  const name = n.id.name
+
+                  // 入力要素系コンポーネントの拡張なので対象外
+                  if (name.match(FORM_CONTROL_INPUTS_REGEX) || checkAdditionalMultiInputComponents(name) || checkAdditionalInputComponents(name)) {
+                    return
+                  }
+                }
+
+                break
+              }
+              case 'Program': {
+                // HINT: smarthr-ui/CheckBoxはlabelを単独で持つため、FormControl系でラップをする必要はない
+                // HINT: 擬似的にラベルが設定されている場合、無視する
+                if (!isCheckbox && !isPseudoLabel) {
+                  const isSelect = !isRadio && nodeName.match(SELECT_REGEX)
+
+                  context.report({
+                    node,
+                    message: `${nodeName} を、smarthr-ui/${wrapComponentName} もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
+ - ${wrapComponentName}で入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります${isRadio ? `
+ - FieldsetでRadioButtonを囲むことでグループ化された入力要素に対して適切なタイトル・説明を追加出来ます` : ``}
+ - ${nodeName}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を${FROM_CONTROLS_REGEX}とマッチするように修正してください
+ - ${nodeName}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を${FORM_CONTROL_INPUTS_REGEX}とマッチするように修正してください${isRadio ? '' : `
+ - 上記のいずれの方法も適切では場合、${nodeName}のtitle属性に "どんな値を${isSelect ? '選択' : '入力'}すれば良いのか" の説明を設定してください
+   - 例: <${nodeName} title="${isSelect ? '検索対象を選択してください' : '姓を全角カタカナのみで入力してください'}" />`}`,
+                  });
+                }
+
+                return
+              }
+              case 'CallExpression':
+                if (n.callee.property?.name === 'map') {
+                  isInMap = true
+                }
+
+                break
+            }
+
+            return search(n.parent)
+          }
+
+          return search(node.parent.parent)
+        }
+
+        const formControlMatcher = nodeName.match(FROM_CONTROLS_REGEX)
+
+        if (formControlMatcher) {
+          const isRoleGrouop = node.attributes.find(findRoleGroup)
+
+          if (!nodeName.match(FORM_CONTROL_REGEX) && isRoleGrouop) {
+            const component = formControlMatcher[1]
+            const actualComponent = component[0].match(/[a-z]/) ? component : `smarthr-ui/${component}`
+
+            const message = `${nodeName}に 'role="group" が設定されています。${actualComponent} をつかってマークアップする場合、'role="group"' は不要です
+ - ${nodeName} が ${actualComponent}、もしくはそれを拡張しているコンポーネントではない場合、名称を ${FROM_CONTROLS_REGEX} にマッチしないものに変更してください`
+            context.report({
+              node,
+              message,
+            });
+
+            return
+          }
+
+          const searchParent = (n) => {
+            switch (n.type) {
+              case 'JSXElement': {
+                const name = n.openingElement.name.name || ''
+
+                // Fieldset > Dialog > Fieldset のようにDialogを挟んだFormControl系のネストは許容する(Portalで実際にはネストしていないため)
+                if (name.match(DIALOG_REGEX)) {
+                  return
+                }
+
+                const matcher = name.match(FROM_CONTROLS_REGEX)
+                if (matcher) {
+                  // FormControl > FormControl や FormControl > Fieldset のように複数のFormControl系コンポーネントがネストしてしまっているためエラーにする
+                  // Fieldset > Fieldset や Fieldset > FormControl のようにFieldsetが親の場合は許容する
+                  if (name.match(FORM_CONTROL_REGEX)) {
+                    context.report({
+                      node: n,
+                      message: `${name} が、${nodeName} を子要素として持っており、マークアップとして正しくない状態になっています。以下のいずれかの方法で修正を試みてください。
+ - 方法1: 親要素である${name}をsmarthr-ui/${matcher[1]}、もしくはそれを拡張していないコンポーネントでマークアップしてください
+   - ${matcher[1]}ではなく、smarthr-ui/Fieldset、もしくはsmarthr-ui/Section + smarthr-ui/Heading などでのマークアップを検討してください
+ - 方法2: 親要素である${name}がsmarthr-ui/${matcher[1]}を拡張したコンポーネントではない場合、コンポーネント名を${FORM_CONTROL_REGEX}と一致しない名称に変更してください`,
+                    });
+                  }
+
+                  return
+                }
+
+                break
+              }
+              case 'Program': {
+                return
+              }
+            }
+
+            return searchParent(n.parent)
+          }
+
+          searchParent(node.parent.parent)
+
+          if (!node.selfClosing && nodeName.match(FORM_CONTROL_REGEX) && isRoleGrouop) {
+            const searchChildren = (n, count = 0) => {
+              switch (n.type) {
+                case 'BinaryExpression':
+                case 'Identifier':
+                case 'JSXEmptyExpression':
+                case 'JSXText':
+                case 'Literal':
+                case 'VariableDeclaration':
+                  // これ以上childrenが存在しないため終了
+                  return count
+                case 'JSXAttribute':
+                  return n.value ? searchChildren(n.value, count) : count
+                case 'LogicalExpression':
+                  return searchChildren(n.right, count)
+                case 'ArrowFunctionExpression':
+                  return searchChildren(n.body, count)
+                case 'MemberExpression':
+                  return searchChildren(n.property, count)
+                case 'ReturnStatement':
+                case 'UnaryExpression':
+                  return searchChildren(n.argument, count)
+                case 'ChainExpression':
+                case 'JSXExpressionContainer':
+                  return searchChildren(n.expression, count)
+                case 'BlockStatement': {
+                  return forInSearchChildren(n.body, count)
+                }
+                case 'ConditionalExpression': {
+                  const conCount = searchChildren(n.consequent, count)
+
+                  if (conCount > 1) {
+                    return conCount
+                  }
+
+                  const altCount = searchChildren(n.alternate, count)
+
+                  return conCount > altCount ? conCount : altCount
+                }
+                case 'CallExpression': {
+                  const nextCount = forInSearchChildren(n.arguments, count)
+
+                  if (nextCount > count && n.callee.property?.name === 'map') {
+                    return Infinity
+                  }
+
+                  return nextCount
+                }
+                case 'JSXFragment':
+                  break
+                case 'JSXElement': {
+                  const name = n.openingElement.name.name || ''
+
+                  if (name.match(FIELDSET_REGEX) || checkAdditionalMultiInputComponents(name)) {
+                    // 複数inputが存在する可能性のあるコンポーネントなので無限カウントとする
+                    return Infinity
+                  }
+
+
+                  let nextCount = forInSearchChildren(n.openingElement.attributes, count)
+
+                  if (nextCount > 1) {
+                    return nextCount
+                  }
+
+                  if (
+                    name.match(FORM_CONTROL_INPUTS_REGEX) ||
+                    name.match(FORM_CONTROL_REGEX) ||
+                    checkAdditionalInputComponents(name)
+                  ) {
+                    nextCount = nextCount + 1
+                  }
+
+                  if (nextCount > count) {
+                    return nextCount
+                  }
+
+                  break
+                }
+              }
+
+              return n.children ? forInSearchChildren(n.children, count) : count
+            }
+
+            const forInSearchChildren = (ary, initCount) => {
+              let r = initCount
+
+              for (const i in ary) {
+                r += searchChildren(ary[i])
+
+                if (r > 1) {
+                  break
+                }
+              }
+
+              return r
+            }
+
+            const result = forInSearchChildren(node.parent.children, 0)
+
+            if (result < 2) {
+              context.report({
+                node,
+                message: `${nodeName}内に入力要素が2個以上存在しないため、'role="group"'を削除してください。'role="group"'は複数の入力要素を一つのグループとして扱うための属性です。
+ - ${nodeName}内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを${FORM_CONTROL_INPUTS_REGEX}、もしくは${FROM_CONTROLS_REGEX}にマッチする名称に変更してください`,
+              });
+            }
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/rules/a11y-prohibit-useless-sectioning-fragment/README.md

@@ -0,0 +1,60 @@
+# smarthr/a11y-prohibit-useless-sectioning-fragment
+
+- Headingレベルの自動計算用のコンポーネントであるSectioningFragmentが不必要に利用されている場合を検知し、修正を促します
+- Sectioninigされるコンポーネントを直接SectioningFragmentで囲んでいる場合エラーになります
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-prohibit-useless-sectioning-fragment': 'error', // 'warn', 'off',
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<SectioninigFragment>
+  <Section>
+    any
+  </Section>
+</SectioninigFragment>
+
+<SectioninigFragment>
+  <Stack as="aside">
+    any
+  </Stack>
+</SectioninigFragment>
+
+<SectioninigFragment>
+  <HogeCenter forwardedas="nav">
+    any
+  </HogeCenter>
+</SectioninigFragment>
+```
+
+## ✅ Correct
+
+```jsx
+<Section>
+  any
+</Section>
+
+<Stack as="aside">
+  any
+</Stack>
+
+<HogeCenter forwardedas="nav">
+  any
+</HogeCenter>
+
+<SectioningFragment>
+  <Any />
+</SectioningFragment>
+
+<Aside>
+  <SectioningFragment>{any}</SectioningFragment>>
+</Aside>
+```

package/rules/a11y-prohibit-useless-sectioning-fragment/index.js

@@ -0,0 +1,74 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  'Article$': '(Article)$',
+  'Aside$': '(Aside)$',
+  'Nav$': '(Nav)$',
+  'Section$': '(Section)$',
+  'Center$': '(Center)$',
+  'Reel$': '(Reel)$',
+  'Sidebar$': '(Sidebar)$',
+  'Stack$': '(Stack)$',
+}
+
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const BARE_SECTIONING_TAG_REGEX = /^(article|aside|nav|section)$/
+const SECTIONING_REGEX = /((A(rticle|side))|Nav|Section)$/
+const SECTIONING_FRAGMENT_REGEX = /^SectioningFragment$/
+const LAYOUT_REGEX = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
+const AS_REGEX = /^(as|forwardedAs)$/
+
+const includeSectioningAsAttr = (a) => a.name?.name?.match(AS_REGEX) && a.value.value?.match(BARE_SECTIONING_TAG_REGEX)
+
+const searchSectioningFragment = (node) => {
+  switch (node.type) {
+    case 'JSXElement':
+      return node.openingElement.name?.name?.match(SECTIONING_FRAGMENT_REGEX) ? node.openingElement : null
+    case 'Program':
+      return null
+  }
+
+  return searchSectioningFragment(node.parent)
+}
+
+const SCHEMA = []
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const name = node.name?.name || ''
+        let hit = null
+        let asAttr = null
+
+        if (name.match(SECTIONING_REGEX)) {
+          hit = true
+        } else {
+          asAttr = name.match(LAYOUT_REGEX) && node.attributes.find(includeSectioningAsAttr)
+
+          if (asAttr) {
+            hit = true
+          }
+        }
+
+        if (hit) {
+          result = searchSectioningFragment(node.parent.parent)
+
+          if (result) {
+            context.report({
+              node: result,
+              message: `無意味なSectioningFragmentが記述されています。子要素である<${name}${asAttr ? ` ${asAttr.name.name}="${asAttr.value.value}"` : ''}>で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
+            })
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/a11y-input-in-form-control.js

@@ -0,0 +1,155 @@
+const rule = require('../rules/a11y-input-in-form-control')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const noLabeledInput = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
+ - FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
+ - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/とマッチするように修正してください
+ - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|RadioButton$|RadioButtonPanel$|Check(B|b)ox$)/とマッチするように修正してください
+ - 上記のいずれの方法も適切では場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
+   - 例: <${name} title="姓を全角カタカナのみで入力してください" />`
+const noLabeledSelect = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
+ - FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
+ - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/とマッチするように修正してください
+ - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|RadioButton$|RadioButtonPanel$|Check(B|b)ox$)/とマッチするように修正してください
+ - 上記のいずれの方法も適切では場合、${name}のtitle属性に "どんな値を選択すれば良いのか" の説明を設定してください
+   - 例: <${name} title="検索対象を選択してください" />`
+const invalidPureCheckboxInFormControl = (name) => `HogeFormControl が ${name} を含んでいます。smarthr-ui/FormControl を smarthr-ui/Fieldset に変更し、正しくグルーピングされるように修正してください。
+ - 可能なら${name}はsmarthr-ui/Checkboxへの変更を検討してください。難しい場合は ${name} と結びつくlabel要素が必ず存在するよう、マークアップする必要があることに注意してください。`
+const invalidCheckboxInFormControl = (name) => `HogeFormControl が ${name} を含んでいます。smarthr-ui/FormControl を smarthr-ui/Fieldset に変更し、正しくグルーピングされるように修正してください。`
+const invalidPureRadioInFormControl = (name) => `HogeFormControl が ${name} を含んでいます。smarthr-ui/FormControl を smarthr-ui/Fieldset に変更し、正しくグルーピングされるように修正してください。
+ - Fieldsetで同じname属性のラジオボタン全てを囲むことで正しくグループ化され、適切なタイトル・説明を追加出来ます
+ - 可能なら${name}はsmarthr-ui/RadioButton、smarthr-ui/RadioButtonPanelへの変更を検討してください。難しい場合は ${name} と結びつくlabel要素が必ず存在するよう、マークアップする必要があることに注意してください。`
+const invalidRadioInFormControl = (name) => `HogeFormControl が ${name} を含んでいます。smarthr-ui/FormControl を smarthr-ui/Fieldset に変更し、正しくグルーピングされるように修正してください。
+ - Fieldsetで同じname属性のラジオボタン全てを囲むことで正しくグループ化され、適切なタイトル・説明を追加出来ます`
+const invalidMultiInputsInFormControl = () => `HogeFormControl が複数の入力要素を含んでいます。ラベルと入力要素の紐づけが正しく行われない可能性があるため、以下の方法のいずれかで修正してください。
+ - 方法1: 入力要素ごとにラベルを設定できる場合、HogeFormControlをsmarthr-ui/Fieldset、もしくはそれを拡張したコンポーネントに変更した上で、入力要素を一つずつsmarthr-ui/FormControlで囲むようにマークアップを変更してください
+ - 方法2: 郵便番号や電話番号など、本来一つの概念の入力要素を分割して複数の入力要素にしている場合、一つの入力要素にまとめることを検討してください
+   - コピーアンドペーストがしやすくなる、ブラウザの自動補完などがより適切に反映されるなど多大なメリットがあります
+ - 方法3: HogeFormControl が smarthr-ui/FormControl、もしくはそれを拡張しているコンポーネントではない場合、名称を /((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/ にマッチしないものに変更してください
+ - 方法4: 上記方法のいずれも対応出来ない場合、HogeFormControl に 'role="group"' 属性を設定してください`
+const noLabeledInputInFieldset = (name) => `HogeFieldset が ラベルを持たない入力要素(${name})を含んでいます。入力要素が何であるかを正しく伝えるため、以下の方法のいずれかで修正してください。
+ - 方法1: HogeFieldset を smarthr-ui/FormControl、もしくはそれを拡張したコンポーネントに変更してください
+ - 方法2: ${name} がlabel要素を含むコンポーネントである場合、名称を/(Form(Control|Group))$/にマッチするものに変更してください
+    - smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
+ - 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton$|RadioButtonPanel$|Check(B|b)ox$)/にマッチするものに変更してください
+    - smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
+ - 方法4: HogeFieldset が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を /Fieldset$/ にマッチしないものに変更してください`
+const useFormControlInsteadOfSection = (name, section) => `${name}は${section}より先に、smarthr-ui/FormControlが入力要素を囲むようマークアップを以下のいずれかの方法で変更してください。
+ - 方法1: ${section} をFormControl、もしくはそれを拡張したコンポーネントに変更してください
+   - ${section} 内のHeading要素はFormControlのtitle属性に変更してください
+ - 方法2: ${section} と ${name} の間に FormControl が存在するようにマークアップを変更してください
+ - 方法3: 上記のいずれの方法も適切では場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
+   - 例: <${name} title="姓を全角カタカナのみで入力してください" />`
+const useFormControlInsteadOfSectionInRadio = (name, section) => `${name}は${section}より先に、smarthr-ui/Fieldsetが入力要素を囲むようマークアップを以下のいずれかの方法で変更してください。
+ - 方法1: ${section} をFieldset、もしくはそれを拡張したコンポーネントに変更してください
+   - ${section} 内のHeading要素はFieldsetのtitle属性に変更してください
+ - 方法2: ${section} と ${name} の間に Fieldset が存在するようにマークアップを変更してください`
+const invalidFieldsetHasRoleGroup = (fieldset, base) => `${fieldset}に 'role="group" が設定されています。${base} をつかってマークアップする場合、'role="group"' は不要です
+ - ${fieldset} が ${base}、もしくはそれを拡張しているコンポーネントではない場合、名称を /((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/ にマッチしないものに変更してください`
+const invalidChildreninFormControl = (children) => `FormControl が、${children} を子要素として持っており、マークアップとして正しくない状態になっています。以下のいずれかの方法で修正を試みてください。
+ - 方法1: 親要素であるFormControlをsmarthr-ui/FormControl、もしくはそれを拡張していないコンポーネントでマークアップしてください
+   - FormControlではなく、smarthr-ui/Fieldset、もしくはsmarthr-ui/Section + smarthr-ui/Heading などでのマークアップを検討してください
+ - 方法2: 親要素であるFormControlがsmarthr-ui/FormControlを拡張したコンポーネントではない場合、コンポーネント名を/(Form(Control|Group))$/と一致しない名称に変更してください`
+const requireMultiInputInFormControlWithRoleGroup = () => `HogeFormControl内に入力要素が2個以上存在しないため、'role=\"group\"'を削除してください。'role=\"group\"'は複数の入力要素を一つのグループとして扱うための属性です。
+ - HogeFormControl内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|RadioButton$|RadioButtonPanel$|Check(B|b)ox$)/、もしくは/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/にマッチする名称に変更してください`
+
+ruleTester.run('a11y-input-in-form-control', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: `import { HogeAInput as FugaInput } from './hoge'` },
+    { code: `import { Textarea as HogeTextarea } from './hoge'` },
+    { code: 'const HogeInput = styled.input``' },
+    { code: 'const HogeTextarea = styled.textarea``' },
+    { code: 'const HogeSelect = styled(Select)``' },
+    { code: 'const HogeRadioButton = styled(FugaRadioButton)``' },
+    { code: 'const HogeRadioButtonPanel = styled(FugaRadioButtonPanel)``' },
+    { code: 'const HogeCheckBox = styled(FugaCheckbox)``' },
+    { code: 'const DatePicker = styled(AnyDatePicker)``' },
+    { code: '<input title="any"/>' },
+    { code: '<HogeInput title="any"/>' },
+    { code: '<textarea title="any"/>' },
+    { code: '<HogeTextarea title="any"/>' },
+    { code: '<select title="any"/>' },
+    { code: '<HogeSelect title="any"/>' },
+    { code: '<HogeInputFile title="any"/>' },
+    { code: '<HogeComboBox title="any"/>' },
+    { code: '<HogeDatePicker title="any"/>' },
+    { code: '<HogeFormGroup />' },
+    { code: '<HogeFormControl />' },
+    { code: '<HogeFieldset />' },
+    { code: '<HogeFormGroup><input /></HogeFormGroup>' },
+    { code: '<HogeFormGroup><input title="any" /></HogeFormGroup>' },
+    { code: '<HogeFormGroup><Input type="checkbox" /></HogeFormGroup>' },
+    { code: '<HogeFormGroup><CheckBox /></HogeFormGroup>' },
+    { code: '<HogeFormControl><HogeSelect /></HogeFormControl>' },
+    { code: '<HogeFormControl><HogeComboBox title="any" /></HogeFormControl>' },
+    { code: '<HogeFieldset><Input type="checkbox" /><Input type="checkbox" /></HogeFieldset>' },
+    { code: '<HogeFieldset><HogeCheckBox /><HogeCheckBox /></HogeFieldset>' },
+    { code: '<HogeFieldset><input type="radio" /></HogeFieldset>' },
+    { code: '<HogeFieldset><RadioButton /></HogeFieldset>' },
+    { code: '<HogeFieldset><HogeRadioButtonPanel /></HogeFieldset>' },
+    { code: '<HogeFormControl role="group"><HogeInput /><HogeSelect /></HogeFormControl>' },
+    { code: '<FugaSection><HogeFormControl><HogeInput /></HogeFormControl></FugaSection>' },
+    { code: '<Stack as="section"><HogeFormControl><HogeInput /></HogeFormControl></Stack>' },
+    { code: `const AnyComboBox = () => <input />` },
+    { code: `<Fieldset><HogeFieldset /><HogeFormControl /></Fieldset>` },
+    { code: '<HogeFieldset><HogeCheckBox /><HogeInput id="any" /></HogeFieldset>' },
+    { code: '<FugaSection><HogeInput id="any" /></FugaSection>' },
+    { code: '<HogeTextarea id="any" />' },
+    { code: '<HogeFieldset><HogeCheckBox /><HogeInput title="any" /></HogeFieldset>' },
+    { code: '<FugaSection><HogeInput title="any" /></FugaSection>' },
+    { code: '<HogeTextarea title="any" />' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { ComboBox as ComboBoxHoge } from './hoge'`, errors: [ { message: `ComboBoxHogeを正規表現 "/(ComboBox)$/" がmatchする名称に変更してください。
+ - ComboBoxが型の場合、'import type { ComboBox as ComboBoxHoge }' もしくは 'import { type ComboBox as ComboBoxHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
+    { code: 'const RadioButton = styled(FugaRadioButtonPanel)``', errors: [
+      { message: `RadioButtonを正規表現 "/(RadioButtonPanel)$/" がmatchする名称に変更してください。` },
+      { message: `RadioButton は /RadioButton$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - RadioButton の名称の末尾が"RadioButton" という文字列ではない状態にしつつ、"FugaRadioButtonPanel"を継承していることをわかる名称に変更してください
+ - もしくは"FugaRadioButtonPanel"を"RadioButton"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
+   - 修正例1: const Xxxx = styled(FugaRadioButtonPanel)
+   - 修正例2: const RadioButtonXxxx = styled(FugaRadioButtonPanel)
+   - 修正例3: const RadioButton = styled(XxxxRadioButton)` } ] },
+    { code: `<input />`, errors: [ { message: noLabeledInput('input') } ] },
+    { code: `<HogeInput />`, errors: [ { message: noLabeledInput('HogeInput') } ] },
+    { code: '<textarea />', errors: [ { message: noLabeledInput('textarea') } ] },
+    { code: '<HogeTextarea />', errors: [ { message: noLabeledInput('HogeTextarea') } ] },
+    { code: '<select />', errors: [ { message: noLabeledSelect('select') } ] },
+    { code: '<HogeSelect />', errors: [ { message: noLabeledSelect('HogeSelect') } ] },
+    { code: '<HogeInputFile />', errors: [ { message: noLabeledInput('HogeInputFile') } ] },
+    { code: '<HogeComboBox />', 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() } ] },
+    { code: '<HogeFormControl><HogeCheckBox /><HogeCheckBox /></HogeFormControl>', errors: [ { message: invalidCheckboxInFormControl('HogeCheckBox') } ] },
+    { code: '<HogeFormControl><input type="radio" /></HogeFormControl>', errors: [ { message: invalidPureRadioInFormControl('input') } ] },
+    { code: '<HogeFormControl><RadioButton /></HogeFormControl>', errors: [ { message: invalidRadioInFormControl('RadioButton') } ] },
+    { code: '<HogeFormControl><HogeRadioButtonPanel /></HogeFormControl>', errors: [ { message: invalidRadioInFormControl('HogeRadioButtonPanel') } ] },
+    { code: '<HogeFieldset><HogeCheckBox /><HogeInput /></HogeFieldset>', errors: [ { message: noLabeledInputInFieldset('HogeInput') } ] },
+    { code: '<FugaSection><HogeInput /></FugaSection>', errors: [ { message: useFormControlInsteadOfSection('HogeInput', 'FugaSection') } ] },
+    { code: '<Stack as="section"><HogeInput /></Stack>', errors: [ { message: useFormControlInsteadOfSection('HogeInput', '<Stack as="section">') } ] },
+    { code: '<Center forwardedAs="aside"><HogeInput /></Center>', errors: [ { message: useFormControlInsteadOfSection('HogeInput', '<Center forwardedAs="aside">') } ] },
+    { code: '<FugaSection><HogeRadioButton /></FugaSection>', errors: [ { message: useFormControlInsteadOfSectionInRadio('HogeRadioButton', 'FugaSection') } ] },
+    { code: `const AnyHoge = () => <input />`, errors: [ { message: noLabeledInput('input') } ] },
+    { code: '<HogeFieldset role="group"><HogeFormControl /><HogeRadioButton /></HogeFieldset>', errors: [ { message: invalidFieldsetHasRoleGroup('HogeFieldset', 'smarthr-ui/Fieldset') } ] },
+    { code: '<fieldset role="group"><HogeFormControl /><HogeRadioButton /></fieldset>', errors: [ { message: invalidFieldsetHasRoleGroup('fieldset', 'fieldset') } ] },
+    { code: '<FormControl><HogeFieldset /></FormControl>', errors: [ { message: invalidChildreninFormControl('HogeFieldset') } ] },
+    { code: '<FormControl><HogeFormControl /></FormControl>', errors: [ { message: invalidChildreninFormControl('HogeFormControl') } ] },
+    { code: '<HogeFormControl role="group"><HogeInput /></HogeFormControl>', errors: [ { message: requireMultiInputInFormControlWithRoleGroup() } ] },
+  ]
+})

package/test/a11y-prohibit-useless-sectioning-fragment.js

@@ -0,0 +1,31 @@
+const rule = require('../rules/a11y-prohibit-useless-sectioning-fragment')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const error = (tag) => `無意味なSectioningFragmentが記述されています。子要素である${tag}で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
+
+ruleTester.run('a11y-prohibit-useless-sectioning-fragment', rule, {
+  valid: [
+    { code: `<SectioningFragment>hoge</SectioningFragment>` },
+    { code: `<Section><SectioningFragment>hoge</SectioningFragment></Section>` },
+    { code: `<AnyAside><SectioningFragment>hoge</SectioningFragment></AnyAside>` },
+    { code: `<AnyNav>hoge</AnyNav>` },
+    { code: `<AnyArticle>hoge</AnyArticle>` },
+  ],
+  invalid: [
+    { code: `<SectioningFragment><AnySection /></SectioningFragment>`, errors: [ { message: error('<AnySection>') } ] },
+    { code: `<SectioningFragment><AnyAside>hoge</AnyAside></SectioningFragment>`, errors: [ { message: error('<AnyAside>') } ] },
+    { code: `<SectioningFragment><HogeStack as="aside">hoge</HogeStack></SectioningFragment>`, errors: [ { message: error('<HogeStack as="aside">') } ] },
+    { code: `<SectioningFragment><HogeReel forwardedAs="nav">hoge</HogeReel></SectioningFragment>`, errors: [ { message: error('<HogeReel forwardedAs="nav">') } ] },
+  ]
+})