eslint-plugin-smarthr 0.3.19 → 0.3.21

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.21](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.20...v0.3.21) (2024-01-16)
+
+
+### Features
+
+* a11y-heading-in-sectioning-content の Layout[as={sectioningContentTag}] への対応 ([#91](https://github.com/kufu/eslint-plugin-smarthr/issues/91)) ([62bb051](https://github.com/kufu/eslint-plugin-smarthr/commit/62bb0510d0e91db063a9bd09dab4fbeff6a2844e))
+
+
+### Bug Fixes
+
+* a11y-delegate-element-has-role-presentationでインタラクティブな要素のチェック処理を厳密に行う ([#100](https://github.com/kufu/eslint-plugin-smarthr/issues/100)) ([e715bff](https://github.com/kufu/eslint-plugin-smarthr/commit/e715bff6a95ab2cbf3652b44f999ad4c98ccb621))
+* import時のrenameの際、typeの場合はチェックを無視する設定を追加 ([#99](https://github.com/kufu/eslint-plugin-smarthr/issues/99)) ([cae899f](https://github.com/kufu/eslint-plugin-smarthr/commit/cae899ff2b012e93b2651c971034553cefeef10e))
+
+### [0.3.20](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.19...v0.3.20) (2024-01-02)
+
 ### [0.3.19](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.18...v0.3.19) (2024-01-01)
 
 

package/libs/format_styled_components.js

@@ -27,12 +27,13 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
   }) : []
 
 
-  const checkImportedNameToLocalName = (node, base, extended) => {
+  const checkImportedNameToLocalName = (node, base, extended, mode) => {
     entriesesTagNames.forEach(([b, e]) => {
       if (base.match(b) && !extended.match(e)) {
         context.report({
           node,
-          message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください`,
+          message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください。
+ - ${base}が型の場合、'${mode} type { ${base} as ${extended} }' もしくは '${mode} { type ${base} as ${extended} }' のように明示的に型であることを宣言してください。名称変更が不要になります`,
         });
       }
     })
@@ -42,11 +43,13 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
     ImportDeclaration: (node) => {
       checkImportStyledComponents(node, context)
 
-      node.specifiers.forEach((s) => {
-        if (s.imported && s.imported.name !== s.local.name) {
-          checkImportedNameToLocalName(node, s.imported.name, s.local.name)
-        }
-      })
+      if (node.importKind !== 'type') {
+        node.specifiers.forEach((s) => {
+          if (s.importKind !== 'type' && s.imported && s.imported.name !== s.local.name) {
+            checkImportedNameToLocalName(node, s.imported.name, s.local.name, 'import')
+          }
+        })
+      }
     },
     VariableDeclarator: (node) => {
       if (!node.init) {

package/package.json

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

package/rules/a11y-delegate-element-has-role-presentation/index.js

@@ -14,6 +14,9 @@ const EXPECTED_NAMES = {
   'SegmentedControl$': 'SegmentedControl$',
   'RightFixedNote$': 'RightFixedNote$',
   'FieldSet$': 'FieldSet$',
+  'Fieldset$': 'Fieldset$',
+  'FormControl$': 'FormControl$',
+  'FormGroup$': 'FormGroup$',
   '(b|B)utton$': 'Button$',
   'Anchor$': 'Anchor$',
   'Link$': 'Link$',
@@ -36,11 +39,10 @@ const UNEXPECTED_NAMES = {
   '(Link|^a)$': '(Link)$',
 }
 
-const INTERACTIVE_COMPONENT_NAMES = Object.keys(EXPECTED_NAMES)
+const INTERACTIVE_COMPONENT_NAMES = Object.keys(EXPECTED_NAMES).join('|')
 const INTERACTIVE_ON_REGEX = /^on(Change|Input|Focus|Blur|(Double)?Click|Key(Down|Up|Press)|Mouse(Enter|Over|Down|Up|Leave)|Select|Submit)$/
 const MEANED_ROLE_REGEX = /^(combobox|group|slider|toolbar)$/
-
-const INTERACTIVE_NODE_TYPE = ['JSXElement', 'JSXExpressionContainer', 'ConditionalExpression']
+const INTERACTIVE_NODE_TYPE_REGEX = /^(JSXElement|JSXExpressionContainer|ConditionalExpression)$/
 
 const messageNonInteractiveEventHandler = (nodeName, interactiveComponentRegex, onAttrs) => {
   const onAttrsText = onAttrs.join(', ')
@@ -48,13 +50,16 @@ const messageNonInteractiveEventHandler = (nodeName, interactiveComponentRegex,
   return `${nodeName} に${onAttrsText}を設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
  - 方法1:  ${nodeName}がinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
    - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに差し替える、もしくは名称を変更してください
- - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
- - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
- - 方法4: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
+ - 方法2: ${onAttrsText} がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
+   - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
+   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
+ - 方法3: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
+ - 方法4: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
+ - 方法5: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
    - 'role="presentation"' を設定した要素はマークアップとしての意味がなくなるため、div・span などマークアップとしての意味を持たない要素に設定してください
    - 'role="presentation"' を設定する適切な要素が存在しない場合、div、またはspanでイベントが発生する要素を囲んだ上でrole属性を設定してください`
 }
-const messageRolePresentationNotHasInteractive = (nodeName, interactiveComponentRegex, onAttrs) => `${nodeName}に 'role="presentation"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+const messageRolePresentationNotHasInteractive = (nodeName, interactiveComponentRegex, onAttrs, roleMean) => `${nodeName}に 'role="${roleMean}"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
  - 方法1: 子要素にインタラクティブな要素が存在するにも関わらずこのエラーが表示されている場合、子要素の名称を変更してください
    - "${interactiveComponentRegex}" の正規表現にmatchするよう、インタラクティブな子要素全てを差し替える、もしくは名称を変更してください
  - 方法2: ${nodeName}自体がインタラクティブな要素の場合、'role="presentation"'を削除した上で名称を変更してください
@@ -81,27 +86,28 @@ module.exports = {
   },
   create(context) {
     const options = context.options[0]
-    const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES.join('|')}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
+    const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
+    const findInteractiveNode = (ec) => ec && ec.type.match(INTERACTIVE_NODE_TYPE_REGEX) && isHasInteractive(ec)
     const isHasInteractive = (c) => {
       switch (c.type) {
         case 'JSXElement': {
-          if ((c.openingElement.name.name || '').match(interactiveComponentRegex)) {
-            return true
-          }
+          const name = c.openingElement.name.name
 
-          if (c.children.length > 0) {
+          if (name && name.match(interactiveComponentRegex)) {
+            return true
+          } else if (c.children.length > 0) {
             return !!c.children.find(isHasInteractive)
           }
         }
         case 'JSXExpressionContainer':
         case 'ConditionalExpression': {
-          let expression = c
+          let e = c
 
           if (c.expression) {
-            expression = c.expression
+            e = c.expression
           }
 
-          return !![expression.right, expression.consequent, expression.alternate].find((ec) => INTERACTIVE_NODE_TYPE.includes(ec?.type) && isHasInteractive(ec))
+          return !![e.right, e.consequent, e.alternate].find(findInteractiveNode)
         }
       }
 
@@ -114,7 +120,7 @@ module.exports = {
         const nodeName = node.name.name || '';
 
         let onAttrs = []
-        let isMeanedRole = false
+        let roleMean = undefined
         let isRolePresentation = false
 
         node.attributes.forEach((a) => {
@@ -126,37 +132,100 @@ module.exports = {
             const v = a.value?.value || ''
 
             if (v === 'presentation') {
-              isMeanedRole = isRolePresentation = true
-            } else if  (v.match(MEANED_ROLE_REGEX)) {
-              isMeanedRole = true
+              isRolePresentation = true
+              roleMean = v
+            } else if (v.match(MEANED_ROLE_REGEX)) {
+              roleMean = v
             }
           }
         })
 
-        if (!nodeName.match(interactiveComponentRegex)) {
-          if (onAttrs.length > 0) {
-            if (!isRolePresentation) {
-              // HINT: role="presentation"以外で意味があるroleが設定されている場合はエラーにしない
-              // 基本的にsmarthr-uiでroleの設定などは巻き取る &&　そもそもroleを設定するよりタグを適切にマークアップすることが優先されるため
-              // エラーなどには表示しない
-              if (!isMeanedRole) {
-                context.report({
-                  node,
-                  message: messageNonInteractiveEventHandler(nodeName, interactiveComponentRegex, onAttrs),
-                });
+        if (nodeName.match(interactiveComponentRegex)) {
+          if (isRolePresentation) {
+            context.report({
+              node,
+              message: messageInteractiveHasRolePresentation(nodeName, interactiveComponentRegex)
+            })
+          }
+        } else if (onAttrs.length > 0) {
+          // HINT: role="presentation"以外で意味があるroleが設定されている場合はエラーにしない
+          // 基本的にsmarthr-uiでroleの設定などは巻き取る &&　そもそもroleを設定するよりタグを適切にマークアップすることが優先されるため
+          // エラーなどには表示しない
+          if (!roleMean) {
+            context.report({
+              node,
+              message: messageNonInteractiveEventHandler(nodeName, interactiveComponentRegex, onAttrs),
+            });
+          // HINT: role='slider' はインタラクティブな要素扱いとするため除外する
+          } else if (roleMean !== 'slider') {
+            const searchChildren = (n) => {
+              switch (n.type) {
+                case 'BinaryExpression':
+                case 'Identifier':
+                case 'JSXEmptyExpression':
+                case 'JSXText':
+                case 'Literal':
+                case 'VariableDeclaration':
+                  // これ以上childrenが存在しないため終了
+                  return false
+                case 'JSXAttribute':
+                  return n.value ? searchChildren(n.value) : false
+                case 'LogicalExpression':
+                  return searchChildren(n.right)
+                case 'ArrowFunctionExpression':
+                  return searchChildren(n.body)
+                case 'MemberExpression':
+                  return searchChildren(n.property)
+                case 'ReturnStatement':
+                case 'UnaryExpression':
+                  return searchChildren(n.argument)
+                case 'ChainExpression':
+                case 'JSXExpressionContainer':
+                  return searchChildren(n.expression)
+                case 'BlockStatement':
+                  return forInSearchChildren(n.body)
+                case 'ConditionalExpression':
+                  return searchChildren(n.consequent) || searchChildren(n.alternate)
+                case 'CallExpression': {
+                  return forInSearchChildren(n.arguments)
+                }
+                case 'JSXFragment':
+                  break
+                case 'JSXElement': {
+                  const name = n.openingElement.name.name || ''
+
+                  if (name.match(interactiveComponentRegex)) {
+                    return true
+                  }
+
+                  if (forInSearchChildren(n.openingElement.attributes)) {
+                    return true
+                  }
+
+                  break
+                }
+              }
+
+              return n.children ? forInSearchChildren(n.children) : false
+            }
+
+            const forInSearchChildren = (ary) => {
+              for (const i in ary) {
+                if (searchChildren(ary[i])) {
+                  return true
+                }
               }
-            } else if (!node.parent.children.find(isHasInteractive)) {
+
+              return false
+            }
+
+            if (!forInSearchChildren(node.parent.children)) {
               context.report({
                 node,
-                message: messageRolePresentationNotHasInteractive(nodeName, interactiveComponentRegex, onAttrs)
+                message: messageRolePresentationNotHasInteractive(nodeName, interactiveComponentRegex, onAttrs, roleMean)
               })
             }
           }
-        } else if (isRolePresentation) {
-          context.report({
-            node,
-            message: messageInteractiveHasRolePresentation(nodeName, interactiveComponentRegex)
-          })
         }
       },
     };

package/rules/a11y-heading-in-sectioning-content/index.js

@@ -10,6 +10,10 @@ const EXPECTED_NAMES = {
   'Nav$': 'Nav$',
   'Section$': 'Section$',
   'ModelessDialog$': 'ModelessDialog$',
+  'Center$': 'Center$',
+  'Reel$': 'Reel$',
+  'Sidebar$': 'Sidebar$',
+  'Stack$': 'Stack$',
 }
 
 const unexpectedMessageTemplate = `{{extended}} は smarthr-ui/{{expected}} をextendすることを期待する名称になっています
@@ -34,6 +38,10 @@ const UNEXPECTED_NAMES = {
     '(Section)$',
     unexpectedMessageTemplate,
   ],
+  'Center$': '(Center)$',
+  'Reel$': '(Reel)$',
+  'Sidebar$': '(Sidebar)$',
+  'Stack$': '(Stack)$',
 }
 
 const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
@@ -42,6 +50,9 @@ const declaratorHeadingRegex = /Heading$/
 const sectioningRegex = /((A(rticle|side))|Nav|Section|^SectioningFragment)$/
 const bareTagRegex = /^(article|aside|nav|section)$/
 const modelessDialogRegex = /ModelessDialog$/
+const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
+
+const includeSectioningAsAttr = ({name: { name }, value: { value }}) => name === 'as' && value.match(bareTagRegex)
 
 const noHeadingTagNames = ['span', 'legend']
 const ignoreHeadingCheckParentType = ['Program', 'ExportNamedDeclaration']
@@ -89,7 +100,10 @@ const reportMessageBareToSHR = (tagName, visibleExample) => {
 const searchBubbleUp = (node) => {
   if (
     node.type === 'Program' ||
-    node.type === 'JSXElement' && node.openingElement.name.name?.match(sectioningRegex)
+    node.type === 'JSXElement' && node.openingElement.name.name && (
+      node.openingElement.name.name.match(sectioningRegex) ||
+      node.openingElement.name.name.match(layoutComponentRegex) && node.openingElement.attributes.some(includeSectioningAsAttr)
+    )
   ) {
     return node
   }

package/test/a11y-delegate-element-has-role-presantation.js

@@ -12,16 +12,19 @@ const ruleTester = new RuleTester({
   },
 });
 
-const defaultInteractiveRegex = '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$)/'
+const defaultInteractiveRegex = '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|Fieldset$|FormControl$|FormGroup$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$)/'
 const messageNonInteractiveEventHandler = (nodeName, onAttrs, interactiveComponentRegex = defaultInteractiveRegex) => {
   const onAttrsText = onAttrs.join(', ')
 
   return `${nodeName} に${onAttrsText}を設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
  - 方法1:  ${nodeName}がinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
    - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに差し替える、もしくは名称を変更してください
- - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
- - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
- - 方法4: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
+ - 方法2: ${onAttrsText} がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
+   - 属性名を"/^on(Change|Input|Focus|Blur|(Double)?Click|Key(Down|Up|Press)|Mouse(Enter|Over|Down|Up|Leave)|Select|Submit)$/"に一致しないものに変更してください
+   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
+ - 方法3: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
+ - 方法4: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
+ - 方法5: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
    - 'role="presentation"' を設定した要素はマークアップとしての意味がなくなるため、div・span などマークアップとしての意味を持たない要素に設定してください
    - 'role="presentation"' を設定する適切な要素が存在しない場合、div、またはspanでイベントが発生する要素を囲んだ上でrole属性を設定してください`
 }
@@ -52,6 +55,7 @@ ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
     { code: '<Wrapper onClick={any} role="presentation">{any ? <AnyButton /> : null}</Wrapper>' },
     { code: '<Wrapper onClick={any} role="presentation">{any1 ? (any2 ? <HogeLink /> : null) : null}</Wrapper>' },
     { code: '<Wrapper onClick={any} role="presentation">{any ? null : (hoge ? <AnyLink /> : null)}</Wrapper>' },
+    { code: '<Wrapper onClick={any} role="slider">Hoge</Wrapper>' },
   ],
   invalid: [
     { code: '<Input role="presentation" />', errors: [ { message: messageInteractiveHasRolePresentation('Input') } ] },
@@ -61,7 +65,7 @@ ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
     { code: '<div onClick={any} onSubmit={any2} role="presentation"><Hoge /></div>', errors: [ { message: messageRolePresentationNotHasInteractive('div', ['onClick', 'onSubmit']) } ] },
     { code: '<div onClick={any}><Link /></div>', errors: [ { message: messageNonInteractiveEventHandler('div', ['onClick']) } ] },
     { code: '<Wrapper onClick={any}><Link /></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick']) } ] },
-    { code: '<Wrapper onSubmit={any}><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }], errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onSubmit'], '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$|^Hoge$)/') } ] },
+    { code: '<Wrapper onSubmit={any}><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }], errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onSubmit'], '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|Fieldset$|FormControl$|FormGroup$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$|^Hoge$)/') } ] },
     { code: '<Wrapper onClick={any} onChange={anyany}><any><Link /></any></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick', 'onChange']) } ] },
     { code: '<Wrapper onClick={any}>{any ? null : (hoge ? <AnyLink /> : null)}</Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick']) } ] },
   ],

package/test/a11y-heading-in-sectioning-content.js

@@ -46,11 +46,20 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: 'const FugaNav = styled(HogeNav)``' },
     { code: 'const FugaSection = styled(HogeSection)``' },
     { code: "const FugaHeading = styled(Heading).attrs(() => ({ type: 'blockTitle' }))``" },
+    { code: 'const FugaCenter = styled(HogeCenter)``' },
+    { code: 'const FugaReel = styled(HogeReel)``' },
+    { code: 'const FugaSidebar = styled(HogeSidebar)``' },
+    { code: 'const FugaStack = styled(HogeStack)``' },
     { code: '<PageHeading>hoge</PageHeading>' },
     { code: '<Section><Heading>hoge</Heading></Section>' },
     { code: '<><Section><Heading>hoge</Heading></Section><Section><Heading>fuga</Heading></Section></>' },
     { code: 'const HogeHeading = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>' },
     { code: 'export const HogeHeading = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>' },
+    { code: '<Center as="section"><div><Heading>hoge</Heading></div></Center>' },
+    { code: '<Cluster as="section"><div><Heading>hoge</Heading></div></Cluster>' },
+    { code: '<Reel as="aside"><div><Heading>hoge</Heading></div></Reel>' },
+    { code: '<Sidebar as="nav"><div><Heading>hoge</Heading></div></Sidebar>' },
+    { code: '<Stack as="section"><div><Heading>hoge</Heading></div></Stack>' },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
@@ -74,6 +83,10 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: 'const Fuga = styled(HogeAside)``', errors: [ { message: `Fugaを正規表現 "/Aside$/" がmatchする名称に変更してください` } ] },
     { code: 'const Fuga = styled(HogeNav)``', errors: [ { message: `Fugaを正規表現 "/Nav$/" がmatchする名称に変更してください` } ] },
     { code: 'const Fuga = styled(HogeSection)``', errors: [ { message: `Fugaを正規表現 "/Section$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeCenter)``', errors: [ { message: `Fugaを正規表現 "/Center$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeReel)``', errors: [ { message: `Fugaを正規表現 "/Reel$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeSidebar)``', errors: [ { message: `Fugaを正規表現 "/Sidebar$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeStack)``', errors: [ { message: `Fugaを正規表現 "/Stack$/" がmatchする名称に変更してください` } ] },
     { code: 'const StyledArticle = styled.article``', errors: [ { message: `"article"を利用せず、smarthr-ui/Articleを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.article" -> "styled(Article)")` } ] },
     { code: 'const StyledAside = styled.aside``', errors: [ { message: `"aside"を利用せず、smarthr-ui/Asideを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.aside" -> "styled(Aside)")` } ] },
     { code: 'const StyledNav = styled.nav``', errors: [ { message: `"nav"を利用せず、smarthr-ui/Navを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.nav" -> "styled(Nav)")` } ] },