eslint-plugin-smarthr 0.5.3 → 0.5.5

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.5.5](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.4...v0.5.5) (2024-03-29)
+
+
+### Bug Fixes
+
+* a11y-heading-in-sectioning-contentでHeadingコンポーネントにtag属性を変数で設定した場合、jsエラーが起きるバグを修正 ([#130](https://github.com/kufu/eslint-plugin-smarthr/issues/130)) ([f927ecd](https://github.com/kufu/eslint-plugin-smarthr/commit/f927ecd80245f6976de9b561c07229cf3038f121))
+
+### [0.5.4](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.3...v0.5.4) (2024-03-29)
+
+
+### Features
+
+* a11y-heading-in-sectioning-contentで title, もしくはheading属性がSectioningContent系コンポーネントに設定されている場合、headingがあると判定するように修正 ([#129](https://github.com/kufu/eslint-plugin-smarthr/issues/129)) ([93bbd19](https://github.com/kufu/eslint-plugin-smarthr/commit/93bbd1907cd7f28510dde1ddc93a16d0c92a2c9b))
+
 ### [0.5.3](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.2...v0.5.3) (2024-03-26)
 
 

package/README.md

@@ -12,7 +12,9 @@
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
 - [a11y-prohibit-useless-sectioning-fragment](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-useless-sectioning-fragment)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
+- [best-practice-for-button-element](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-button-element)
 - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)
+- [best-practice-for-layouts](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-layouts)
 - [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)

package/package.json

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

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

@@ -55,8 +55,10 @@ const asRegex = /^(as|forwardedAs)$/
 const ignoreCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
 const noHeadingTagNamesRegex = /^(span|legend)$/
 const ignoreHeadingCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
+const headingAttributeRegex = /^(heading|title)$/
 
 const includeSectioningAsAttr = (a) => a.name?.name.match(asRegex) && bareTagRegex.test(a.value.value)
+const findHeadingAttribute = (a) => headingAttributeRegex.test(a.name?.name || '')
 
 const headingMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
  - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。
@@ -191,7 +193,7 @@ const searchChildren = (n) => {
       } else if (
         (
           headingRegex.test(name) &&
-          !n.openingElement.attributes.find(findTagAttr)?.value.value.match(noHeadingTagNamesRegex)
+          !n.openingElement.attributes.find(findTagAttr)?.value.value?.match(noHeadingTagNamesRegex)
         ) ||
         forInSearchChildren(n.openingElement.attributes)
       ) {
@@ -251,7 +253,7 @@ module.exports = {
         } else if (headingRegex.test(elementName)) {
           const tagAttr = node.attributes.find(findTagAttr)
 
-          if (!tagAttr?.value.value.match(noHeadingTagNamesRegex)) {
+          if (!tagAttr?.value.value?.match(noHeadingTagNamesRegex)) {
             const result = searchBubbleUp(node.parent)
             let hit = false
 
@@ -298,6 +300,13 @@ module.exports = {
           }
         } else if (!node.selfClosing) {
           const isSection = sectioningRegex.test(elementName)
+
+          // HINT: SectioningContent系コンポーネントの拡張の場合、title, heading属性などにHeadingのテキストが仕込まれている場合がある
+          // 対象属性を持っている場合はcorrectとして扱う
+          if (isSection && node.attributes.some(findHeadingAttribute)) {
+            return
+          }
+
           const layoutSectionAsAttr = !isSection && layoutComponentRegex.test(elementName) ? node.attributes.find(includeSectioningAsAttr) : null
 
           if ((isSection || layoutSectionAsAttr) && !searchBubbleUpSections(node.parent.parent) && !forInSearchChildren(node.parent.children)) {
@@ -305,6 +314,7 @@ module.exports = {
               node,
               message: `${isSection ? elementName : `<${elementName} ${layoutSectionAsAttr.name.name}="${layoutSectionAsAttr.value.value}">`} はHeading要素を含んでいません。
  - SectioningContentはHeadingを含むようにマークアップする必要があります
+ - ${elementName}に設定しているいずれかの属性がHeading，もしくはHeadingのテキストに該当する場合、その属性の名称を ${headingAttributeRegex.toString()} にマッチする名称に変更してください
  - Headingにするべき適切な文字列が存在しない場合、 ${isSection ? `${elementName} は削除するか、SectioningContentではない要素に差し替えてください` : `${layoutSectionAsAttr.name.name}="${layoutSectionAsAttr.value.value}"を削除、もしくは別の要素に変更してください`}`,
             })
           }

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

@@ -24,6 +24,7 @@ const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside
  - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
 const notHaveHeadingMessage = (elementName) => `${elementName} はHeading要素を含んでいません。
  - SectioningContentはHeadingを含むようにマークアップする必要があります
+ - ${elementName}に設定しているいずれかの属性がHeading，もしくはHeadingのテキストに該当する場合、その属性の名称を /^(heading|title)$/ にマッチする名称に変更してください
  - Headingにするべき適切な文字列が存在しない場合、 ${elementName} は削除するか、SectioningContentではない要素に差し替えてください`
 
 ruleTester.run('a11y-heading-in-sectioning-content', rule, {
@@ -55,6 +56,9 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: 'const FugaStack = styled(HogeStack)``' },
     { code: '<PageHeading>hoge</PageHeading>' },
     { code: '<Section><Heading>hoge</Heading></Section>' },
+    { code: '<FugaSection heading={<Heading>hoge</Heading>}>abc</FugaSection>' },
+    { code: '<FugaSection heading="hoge">abc</FugaSection>' },
+    { code: '<FugaSection title="hoge">abc</FugaSection>' },
     { 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>' },
@@ -142,6 +146,6 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<Section><Heading tag="h2">hoge</Heading></Section>', errors: [ { message: noTagAttrMessage } ] },
     { code: '<Section></Section>', errors: [ { message: notHaveHeadingMessage('Section') } ] },
     { code: '<Aside><HogeSection></HogeSection></Aside>', errors: [ { message: notHaveHeadingMessage('Aside') }, { message: notHaveHeadingMessage('HogeSection') } ] },
-    { code: '<Aside><HogeSection><Heading /></HogeSection></Aside>', errors: [ { message: notHaveHeadingMessage('Aside') } ] },
+    { code: '<Aside any="hoge"><HogeSection><Heading /></HogeSection></Aside>', errors: [ { message: notHaveHeadingMessage('Aside') } ] },
   ],
 });