fix: a11y-heading-in-sectioning-content で Heading系コンポーネントの拡張をexportして…

…いる場合、正しく除外されないバグを修正 (#67)
kufu · Jul 28, 2023 · a4b8e6d · a4b8e6d
1 parent a9ea0cf
commit a4b8e6d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/rules/a11y-heading-in-sectioning-content/index.js b/rules/a11y-heading-in-sectioning-content/index.js
@@ -19,6 +19,7 @@ const bareTagRegex = /^(article|aside|nav|section)$/
 const modelessDialogRegex = /ModelessDialog$/
 
 const noHeadingTagNames = ['span', 'legend']
+const ignoreHeadingCheckParentType = ['Program', 'ExportNamedDeclaration']
 
 const headingMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
  - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。`
@@ -48,7 +49,7 @@ const searchBubbleUp = (node) => {
 
   if (
     // Headingコンポーネントの拡張なので対象外
-    node.type === 'VariableDeclarator' && node.parent.parent?.type === 'Program' && node.id.name.match(declaratorHeadingRegex) ||
+    node.type === 'VariableDeclarator' && ignoreHeadingCheckParentType.includes(node.parent.parent?.type) && node.id.name.match(declaratorHeadingRegex) ||
     // ModelessDialogのheaderにHeadingを設定している場合も対象外
     node.type === 'JSXAttribute' && node.name.name === 'header' && node.parent.name.name.match(modelessDialogRegex)
   ) {

diff --git a/test/a11y-heading-in-sectioning-content.js b/test/a11y-heading-in-sectioning-content.js
@@ -38,6 +38,7 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { 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>' },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },