eslint-plugin-smarthr 0.3.3 → 0.3.4

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.4](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.3...v0.3.4) (2023-07-18)
+
+
+### Features
+
+* a11y-heading-in-sectioning-content を smarthr-ui/PageHeading に対応させる ([#66](https://github.com/kufu/eslint-plugin-smarthr/issues/66)) ([5abc13c](https://github.com/kufu/eslint-plugin-smarthr/commit/5abc13c73f57242fbe8b6016bc6e598fd0403f1c))
+
 ### [0.3.3](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.2...v0.3.3) (2023-07-10)
 
 

package/package.json

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

package/rules/a11y-heading-in-sectioning-content/README.md

@@ -39,14 +39,19 @@
 </section>
 ```
 
-## ✅ Correct
-
 ```jsx
-<div>
-  <Heading>hoge</Heading> // コンポーネント内にHeadingが一つのみの場合はOK
-</div>
+<>
+  <PageHeading> // 同じファイル内に複数のPageHeadingが存在するとNG
+    hoge
+  </PageHeading>
+  <PageHeading>
+    fuga
+  </PageHeading>
+</>
 ```
 
+## ✅ Correct
+
 ```jsx
 <Section>
   <Heading>hoge</Heading>
@@ -57,14 +62,17 @@
 ```
 
 ```jsx
-<Section>
-  <Heading>
-    hoge
-  </Heading>
-</Section>
-<StyledSection>
-  <Heading>
-    fuga
-  </Heading>
-</StyledSection>
+<>
+  <PageHeading>Page Name.</PageHeading>
+  <Section>
+    <Heading>
+      hoge
+    </Heading>
+  </Section>
+  <StyledSection>
+    <Heading>
+      fuga
+    </Heading>
+  </StyledSection>
+</>
 ```

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

@@ -1,23 +1,31 @@
 const { generateTagFormatter } = require('../../libs/format_styled_components')
 
 const EXPECTED_NAMES = {
+  'PageHeading$': 'PageHeading$',
   'Heading$': 'Heading$',
-  '^h(1|2|3|4|5|6)$': 'Heading$',
+  '^h1$': 'PageHeading$',
+  '^h(|2|3|4|5|6)$': 'Heading$',
   'Article$': 'Article$',
   'Aside$': 'Aside$',
   'Nav$': 'Nav$',
   'Section$': 'Section$',
+  'ModelessDialog$': 'ModelessDialog$',
 }
 
 const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
 const declaratorHeadingRegex = /Heading$/
 const sectioningRegex = /((A(rticle|side))|Nav|Section|^SectioningFragment)$/
 const bareTagRegex = /^(article|aside|nav|section)$/
-const messagePrefix = 'Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。'
-const messageSuffix = 'Sectioning Content(Article, Aside, Nav, Section)でHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。現在のマークアップの構造を変更したくない場合はSectioningFragmentコンポーネントを利用してください。'
+const modelessDialogRegex = /ModelessDialog$/
 
-const commonMessage = `${messagePrefix}${messageSuffix}`
-const rootMessage = `${messagePrefix}コンポーネント全体に対するHeadingではない場合、${messageSuffix}コンポーネント全体に対するHeadingの場合、他のHeadingのアウトラインが明確に指定されればエラーにならなくなります。`
+const noHeadingTagNames = ['span', 'legend']
+
+const headingMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
+ - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。`
+const rootHeadingMessage = `${headingMessage}
+ - Headingをh1にしたい場合(機能名、ページ名などこのページ内でもっとも重要な見出しの場合)、smarthr-ui/PageHeadingを利用してください。その場合はSectionなどでアウトラインを示す必要はありません。`
+const pageHeadingMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存在しています。PageHeadingはh1タグを出力するため最も重要な見出しにのみ利用してください。'
+const pageHeadingInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
 
 const reportMessageBareToSHR = (tagName, visibleExample) => {
   const matcher = tagName.match(bareTagRegex)
@@ -38,8 +46,12 @@ const searchBubbleUp = (node) => {
     return node
   }
 
-  // Headingコンポーネントの拡張なので対象外
-  if (node.type === 'VariableDeclarator' && node.id.name.match(declaratorHeadingRegex)) {
+  if (
+    // Headingコンポーネントの拡張なので対象外
+    node.type === 'VariableDeclarator' && node.parent.parent?.type === 'Program' && node.id.name.match(declaratorHeadingRegex) ||
+    // ModelessDialogのheaderにHeadingを設定している場合も対象外
+    node.type === 'JSXAttribute' && node.name.name === 'header' && node.parent.name.name.match(modelessDialogRegex)
+  ) {
     return null
   }
 
@@ -52,6 +64,7 @@ module.exports = {
     schema: [],
   },
   create(context) {
+    let h1s = []
     let sections = []
     let { VariableDeclarator, ...formatter } = generateTagFormatter({ context, EXPECTED_NAMES })
 
@@ -86,31 +99,42 @@ module.exports = {
             node,
             message,
           })
-        } else if (elementName.match(headingRegex)) {
+        // Headingに明示的にtag属性が設定されており、それらが span or legend の場合はHeading扱いしない
+        } else if (
+          elementName.match(headingRegex) &&
+          !noHeadingTagNames.includes(node.attributes.find((a) => a.name?.name == 'tag')?.value.value)
+        ) {
           const result = searchBubbleUp(node.parent)
 
           if (result) {
-            const saved = sections.find((s) => s[0] === result)
-
-            // HINT: 最初の1つ目は通知しない（）
-            if (!saved) {
-              sections.push([result, node])
-            } else {
-              // HINT: 同じファイルで同じSectioningContent or トップノードを持つ場合
-              const [section, unreport] = saved
-              const targets = unreport ? [unreport, node] : [node]
-
-              saved[1] = undefined
+            if (elementName.match(/PageHeading$/)) {
+              h1s.push(node)
 
-              targets.forEach((n) => {
+              if (h1s.length > 1) {
                 context.report({
-                  node: n,
-                  message:
-                    section.type === 'Program'
-                    ? rootMessage
-                    : commonMessage,
+                  node,
+                  message: pageHeadingMessage,
                 })
+              } else if (result.type !== 'Program') {
+                context.report({
+                  node,
+                  message: pageHeadingInSectionMessage,
+                })
+              }
+            } else if (result.type === 'Program') {
+              context.report({
+                node,
+                message: rootHeadingMessage,
               })
+            } else {
+              if (sections.find((s) => s === result)) {
+                context.report({
+                  node,
+                  message: headingMessage,
+                })
+              } else {
+                sections.push(result)
+              }
             }
           }
         }

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

@@ -12,13 +12,17 @@ const ruleTester = new RuleTester({
   },
 });
 
-const rootMessage = 'Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。コンポーネント全体に対するHeadingではない場合、Sectioning Content(Article, Aside, Nav, Section)でHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。現在のマークアップの構造を変更したくない場合はSectioningFragmentコンポーネントを利用してください。コンポーネント全体に対するHeadingの場合、他のHeadingのアウトラインが明確に指定されればエラーにならなくなります。'
-const message = 'Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。Sectioning Content(Article, Aside, Nav, Section)でHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。現在のマークアップの構造を変更したくない場合はSectioningFragmentコンポーネントを利用してください。'
+const lowerMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
+ - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。`
+const message = `${lowerMessage}
+ - Headingをh1にしたい場合(機能名、ページ名などこのページ内でもっとも重要な見出しの場合)、smarthr-ui/PageHeadingを利用してください。その場合はSectionなどでアウトラインを示す必要はありません。`
+const pageMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存在しています。PageHeadingはh1タグを出力するため最も重要な見出しにのみ利用してください。'
+const pageInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
 
 ruleTester.run('a11y-heading-in-sectioning-content', rule, {
   valid: [
     { code: `import styled from 'styled-components'` },
-    { code: 'const HogeHeading = styled.h1``' },
+    { code: 'const HogePageHeading = styled.h1``' },
     { code: 'const HogeHeading = styled.h2``' },
     { code: 'const HogeHeading = styled.h3``' },
     { code: 'const HogeHeading = styled.h4``' },
@@ -30,18 +34,14 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: 'const FugaAside = styled(HogeAside)``' },
     { code: 'const FugaNav = styled(HogeNav)``' },
     { code: 'const FugaSection = styled(HogeSection)``' },
-    { code: '<Heading>hoge</Heading>' },
-    { code: '<HogeHeading>hoge</HogeHeading>' },
-    { code: '<><Heading>hoge</Heading><Section><Heading>hoge</Heading></Section></>' },
-    { code: '<><Heading>hoge</Heading><Aside><Heading>hoge</Heading></Aside></>' },
-    { code: '<><Heading>hoge</Heading><Article><Heading>hoge</Heading></Article></>' },
-    { code: '<><Heading>hoge</Heading><Nav><Heading>hoge</Heading></Nav></>' },
-    { code: '<><Heading>hoge</Heading><SectioningFragment><Heading>hoge</Heading></SectioningFragment></>' },
-    { code: 'const HogeHeading = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>;const FugaHeading = () => <AbcHeading anyArg={abc}>hoge</AbcHeading>' },
+    { 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>' },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
-    { code: 'const Hoge = styled.h1``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.h1``', errors: [ { message: `Hogeを正規表現 "/PageHeading$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.h2``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.h3``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.h4``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
@@ -57,12 +57,11 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { 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)")` } ] },
     { code: 'const StyledSection = styled.section``', errors: [ { message: `"section"を利用せず、smarthr-ui/Sectionを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.section" -> "styled(Section)")` } ] },
-    { code: '<><Heading>hoge</Heading><Heading>hoge</Heading></>', errors: [ { message: rootMessage }, { message: rootMessage } ] },
-    { code: '<><Heading>hoge</Heading><Section><Heading>hoge</Heading><Heading>hoge</Heading></Section></>', errors: [ { message }, { message } ] },
-    { code: '<article>hoge</article>', errors: [ { message: `"article"を利用せず、smarthr-ui/Articleを拡張してください。Headingのレベルが自動計算されるようになります。` } ] },
-    { code: '<aside>hoge</aside>', errors: [ { message: `"aside"を利用せず、smarthr-ui/Asideを拡張してください。Headingのレベルが自動計算されるようになります。` } ] },
-    { code: '<nav>hoge</nav>', errors: [ { message: `"nav"を利用せず、smarthr-ui/Navを拡張してください。Headingのレベルが自動計算されるようになります。` } ] },
-    { code: '<section>hoge</section>', errors: [ { message: `"section"を利用せず、smarthr-ui/Sectionを拡張してください。Headingのレベルが自動計算されるようになります。` } ] },
-    { code: 'const Hoge = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>;const Fuga = () => <AbcHeading anyArg={abc}>hoge</AbcHeading>', errors: [ { message: rootMessage }, { message: rootMessage } ] },
+    { code: '<><PageHeading>hoge</PageHeading><PageHeading>fuga</PageHeading></>', errors: [ { message: pageMessage } ] },
+    { code: '<Heading>hoge</Heading>', errors: [ { message } ] },
+    { code: '<><Heading>hoge</Heading><Heading>fuga</Heading></>', errors: [ { message }, { message } ] },
+    { code: 'const Hoge = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>', errors: [ { message } ] },
+    { code: '<Section><Heading>hoge</Heading><Heading>fuga</Heading></Section>', errors: [ { message: lowerMessage } ] },
+    { code: '<Section><PageHeading>hoge</PageHeading></Section>', errors: [ { message: pageInSectionMessage } ] },
   ],
 });