eslint-plugin-smarthr 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.2](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.1...v0.3.2) (2023-07-07)
+
+
+### Features
+
+* a11y-heading-in-sectioning-contentを追加 ([#64](https://github.com/kufu/eslint-plugin-smarthr/issues/64)) ([49dc559](https://github.com/kufu/eslint-plugin-smarthr/commit/49dc5591e50ae4b3e496e69faca061c2ca2ca579))
+
+
+### Bug Fixes
+
+* replacePathsの生成時、tsconfigにcompilerOptions.pathsが設定されていなければエラーになるように修正 ([#63](https://github.com/kufu/eslint-plugin-smarthr/issues/63)) ([cbb4306](https://github.com/kufu/eslint-plugin-smarthr/commit/cbb43061482d5f363c20ca1316aae9e62f2359fa))
+
+### [0.3.1](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.0...v0.3.1) (2023-05-12)
+
 ## [0.3.0](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.25...v0.3.0) (2023-04-14)
 
 

package/README.md

@@ -2,6 +2,7 @@
 
 - [a11y-anchor-has-href-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-anchor-has-href-attribute)
 - [a11y-clickable-element-has-text](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-clickable-element-has-text)
+- [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-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)

package/libs/common.js

@@ -6,13 +6,13 @@ const replacePaths = (() => {
   const tsconfig = fs.readFileSync(`${process.cwd()}/tsconfig.json`)
 
   if (!tsconfig) {
-    return null 
+    throw new Error('プロジェクトルートにtsconfig.json を設置してください')
   }
 
   const { compilerOptions } = JSON5.parse(tsconfig)
 
   if (!compilerOptions || !compilerOptions.paths) {
-    return null
+    throw new Error('tsconfig.json の compilerOptions.paths に `"@/*": ["any_path/*"]` 形式でフロントエンドのroot dir を指定してください')
   }
 
   const regexp = /\*$/
@@ -23,6 +23,7 @@ const replacePaths = (() => {
     }
   }, {})
 })()
+
 const rootPath = (() => {
   if (!replacePaths) {
     return ''

package/package.json

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

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

@@ -0,0 +1,70 @@
+# smarthr/a11y-heading-in-sectioning-content
+
+- Headingコンポーネントをsmarthr-ui/SectioningContent(Article, Aside, Nav, Section, SectioningFragment) のいずれかで囲むことを促すルールです
+  - article, aside, nav, section で Heading とHeadingの対象となる範囲を囲むとブラウザが正確に解釈できるようになるメリットがあります
+  - またsmarthr-ui/SectioningContentで smarthr-ui/Headingを囲むことで、Headingのレベル(h1~h6)を自動的に計算するメリットもあります
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-heading-in-sectioning-content': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<div>
+  <Heading>
+    hoge
+  </Heading>
+  <Heading>
+    fuga
+  </Heading>
+</div>
+```
+```jsx
+<section> // styled-components の sectionをそのまま利用するとNG
+  <Heading>
+    hoge
+  </Heading>
+</section>
+<section>
+  <Heading>
+    fuga
+  </Heading>
+</section>
+```
+
+## ✅ Correct
+
+```jsx
+<div>
+  <Heading>hoge</Heading> // コンポーネント内にHeadingが一つのみの場合はOK
+</div>
+```
+
+```jsx
+<Section>
+  <Heading>hoge</Heading>
+  <Section>
+    <Heading>fuga</Heading>
+  </Section>
+</Section>
+```
+
+```jsx
+<Section>
+  <Heading>
+    hoge
+  </Heading>
+</Section>
+<StyledSection>
+  <Heading>
+    fuga
+  </Heading>
+</StyledSection>
+```

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

@@ -0,0 +1,112 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  'Heading$': 'Heading$',
+  '^h(1|2|3|4|5|6)$': 'Heading$',
+  'Article$': 'Article$',
+  'Aside$': 'Aside$',
+  'Nav$': 'Nav$',
+  'Section$': 'Section$',
+}
+
+const headingRegex = /((^h(1|2|3|4|5|6))|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 commonMessage = `${messagePrefix}${messageSuffix}`
+const rootMessage = `${messagePrefix}コンポーネント全体に対するHeadingではない場合、${messageSuffix}コンポーネント全体に対するHeadingの場合、他のHeadingのアウトラインが明確に指定されればエラーにならなくなります。`
+
+const reportMessageBareToSHR = (tagName, visibleExample) => {
+  const matcher = tagName.match(bareTagRegex)
+
+  if (matcher) {
+    const base = matcher[1]
+    const shrComponent = `${base[0].toUpperCase()}${base.slice(1)}`
+
+    return `"${base}"を利用せず、smarthr-ui/${shrComponent}を拡張してください。Headingのレベルが自動計算されるようになります。${visibleExample ? `(例: "styled.${base}" -> "styled(${shrComponent})")` : ''}`
+  }
+}
+
+const searchBubbleUp = (node) => {
+  if (
+    node.type === 'Program' ||
+    node.type === 'JSXElement' && node.openingElement.name.name?.match(sectioningRegex)
+  ) {
+    return node
+  }
+
+  return searchBubbleUp(node.parent)
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    schema: [],
+  },
+  create(context) {
+    let sections = []
+    let { VariableDeclarator, ...formatter } = generateTagFormatter({ context, EXPECTED_NAMES })
+
+    formatter.VariableDeclarator = (node) => {
+      VariableDeclarator(node)
+      if (!node.init) {
+        return
+      }
+
+      const tag = node.init.tag || node.init
+
+      if (tag.object?.name === 'styled') {
+        const message = reportMessageBareToSHR(tag.property.name, true)
+
+        if (message) {
+          context.report({
+            node,
+            message,
+          });
+        }
+      }
+    }
+
+    return {
+      ...formatter,
+      JSXOpeningElement: (node) => {
+        const elementName = node.name.name || ''
+        const message = reportMessageBareToSHR(elementName, false)
+
+        if (message) {
+          context.report({
+            node,
+            message,
+          })
+        } else if (elementName.match(headingRegex)) {
+          const result = searchBubbleUp(node.parent)
+          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
+
+            targets.forEach((n) => {
+              context.report({
+                node: n,
+                message:
+                  section.type === 'Program'
+                  ? rootMessage
+                  : commonMessage,
+              })
+            })
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []

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

@@ -0,0 +1,66 @@
+const rule = require('../rules/a11y-heading-in-sectioning-content');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+});
+
+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コンポーネントを利用してください。'
+
+ruleTester.run('a11y-heading-in-sectioning-content', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: 'const HogeHeading = styled.h1``' },
+    { code: 'const HogeHeading = styled.h2``' },
+    { code: 'const HogeHeading = styled.h3``' },
+    { code: 'const HogeHeading = styled.h4``' },
+    { code: 'const HogeHeading = styled.h5``' },
+    { code: 'const HogeHeading = styled.h6``' },
+    { code: 'const FugaHeading = styled(Heading)``' },
+    { code: 'const FugaHeading = styled(HogeHeading)``' },
+    { code: 'const FugaArticle = styled(HogeArticle)``' },
+    { 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></>' },
+  ],
+  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.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する名称に変更してください` } ] },
+    { code: 'const Hoge = styled.h5``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.h6``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(Heading)``', errors: [ { message: `Fugaを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeHeading)``', errors: [ { message: `Fugaを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeArticle)``', errors: [ { message: `Fugaを正規表現 "/Article$/" がmatchする名称に変更してください` } ] },
+    { 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 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)")` } ] },
+    { 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のレベルが自動計算されるようになります。` } ] },
+  ],
+});