eslint-plugin-smarthr 1.7.0 → 1.8.1

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.
 
+## [1.8.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.8.0...eslint-plugin-smarthr-v1.8.1) (2025-06-12)
+
+
+### Bug Fixes
+
+* a11y-anchor-has-href-attribute での特殊分岐条件を react-router-dom から react-router に変更 ([#678](https://github.com/kufu/tamatebako/issues/678)) ([5941384](https://github.com/kufu/tamatebako/commit/59413842b5b7e5ca6ee88a511792ae6a81be988b))
+* a11y-delegate-element-has-role-presentationでインタラクティブな要素を判定する際、コンポーネント名が複数形でも許容する ([#679](https://github.com/kufu/tamatebako/issues/679)) ([67567bd](https://github.com/kufu/tamatebako/commit/67567bde757624ed46649fb0401e24dc904865ba))
+* a11y-heading-in-sectioning-contentでNavにaria-labelが設定されている場合を許容する ([#680](https://github.com/kufu/tamatebako/issues/680)) ([12f26be](https://github.com/kufu/tamatebako/commit/12f26be9d461d1580711263ae974ed948c74fc1d))
+
+## [1.8.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.7.0...eslint-plugin-smarthr-v1.8.0) (2025-06-09)
+
+
+### Features
+
+* best-practice-for-layoutsで <any>{hoge}</any> など子要素が変数のみの場合を許容する ([#668](https://github.com/kufu/tamatebako/issues/668)) ([7d03ff1](https://github.com/kufu/tamatebako/commit/7d03ff150833f673b9c2afe8e86adfdaee150d72))
+* format-translate-component rule で RangeSeparator を許容する ([#667](https://github.com/kufu/tamatebako/issues/667)) ([951bee2](https://github.com/kufu/tamatebako/commit/951bee2f376ddf48c5e9a0b13eb50b2daeeec7f9))
+
 ## [1.7.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.6.0...eslint-plugin-smarthr-v1.7.0) (2025-06-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.33.0"
+    "typescript-eslint": "^8.33.1"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "12babfba8f3ff1aa9bc9d159136ef15ffce24fe0"
+  "gitHead": "18fc771c7e65e784d224990f2ce857c150cd69e2"
 }

package/rules/a11y-anchor-has-href-attribute/index.js

@@ -31,7 +31,7 @@ const OPTION = (() => {
         }
 
         break
-      case 'react-router-dom':
+      case 'react-router':
         react_router = true
 
         if (nextjs) {

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

@@ -1,27 +1,27 @@
 const INTERACTIVE_COMPONENT_NAMES = `(${[
-  '(B|b)utton',
-  '(Check|Combo)(B|b)ox',
-  '(Date(timeLocal)?|Time|Month|Wareki)Picker',
-  '(I|i)nput(File)?',
-  '(S|s)elect',
-  '(T|t)extarea',
-  '(ActionDialogWith|RemoteDialog)Trigger',
-  'AccordionPanel',
+  '(B|b)utton(s)?',
+  '(Check|Combo)(B|b)ox(es|s)?',
+  '(Date(timeLocal)?|Time|Month|Wareki)Picker(s)?',
+  '(I|i)nput(File)?(s)?',
+  '(S|s)elect(s)?',
+  '(T|t)extarea(s)?',
+  '(ActionDialogWith|RemoteDialog)Trigger(s)?',
+  'AccordionPanel(s)?',
   '^a',
   'Anchor',
-  'Link',
-  'DropZone',
-  'Field(S|s)et',
-  'FilterDropdown',
-  '(F|f)orm(Control|Group|Dialog)?',
-  'Pagination',
-  'RadioButton(Panel)?',
-  'RemoteTrigger(.+)Dialog',
-  'RightFixedNote',
-  'SegmentedControl',
-  'SideNav',
-  'Switch',
-  'TabItem',
+  'Link(s)?',
+  'DropZone(s)?',
+  'Field(S|s)et(s)?',
+  'FilterDropdown(s)?',
+  '(F|f)orm(Control|Group|Dialog)?(s)?',
+  'Pagination(s)?',
+  'RadioButton(Panel)?(s)?',
+  'RemoteTrigger(.+)Dialog(s)?',
+  'RightFixedNote(s)?',
+  'SegmentedControl(s)?',
+  'SideNav(s)?',
+  'Switch(s)?',
+  'TabItem(s)?',
 ].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)$/

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

@@ -10,9 +10,9 @@ const ignoreCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
 const noHeadingTagNamesRegex = /^(span|legend)$/
 const ignoreHeadingCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
 const headingAttributeRegex = /^(heading|title)$/
+const ariaLabelRegex = /^aria-label(ledby)?$/
 
 const includeSectioningAsAttr = (a) => asRegex.test(a.name?.name) && 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に対応する範囲を明確に指定してください。`
@@ -250,23 +250,41 @@ 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 isSection = elementName.match(sectioningRegex)
+          let isNav = false
+
+          if (isSection) {
+            isNav = isSection[1] === 'Nav'
+
+            for (let i = 0; i < node.attributes.length; i++) {
+              const attrName = node.attributes[i].name?.name || ''
+
+              if (
+                // HINT: SectioningContent系コンポーネントの拡張の場合、title, heading属性などにHeadingのテキストが仕込まれている場合がある
+                // 対象属性を持っている場合はcorrectとして扱う
+                headingAttributeRegex.test(attrName) ||
+                // HINT: Navかつaria-labelを持っている場合も許容する
+                isNav && ariaLabelRegex.test(attrName)
+              ) {
+                return
+              }
+            }
           }
 
           const layoutSectionAsAttr = !isSection && layoutComponentRegex.test(elementName) ? node.attributes.find(includeSectioningAsAttr) : null
 
-          if ((isSection || layoutSectionAsAttr) && !searchBubbleUpSections(node.parent.parent) && !forInSearchChildren(node.parent.children)) {
+          if (
+            (isSection || layoutSectionAsAttr) &&
+            !searchBubbleUpSections(node.parent.parent) &&
+            !forInSearchChildren(node.parent.children)
+          ) {
             context.report({
               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}"を削除、もしくは別の要素に変更してください`}`,
+ - Headingにするべき適切な文字列が存在しない場合、 ${isSection ? `${elementName} は削除するか、SectioningContentではない要素に差し替えてください` : `${layoutSectionAsAttr.name.name}="${layoutSectionAsAttr.value.value}"を削除、もしくは別の要素に変更してください`}${isNav ? `
+ - nav要素の場合、aria-label、もしくはaria-labelledby属性を設定し、どんなナビゲーションなのかがわかる名称を設定してください` : ''}`,
             })
           }
         }

package/rules/best-practice-for-layouts/index.js

@@ -24,6 +24,11 @@ const searchChildren = (node) => {
   }
 
   switch(node.type) {
+    case 'MemberExpression':
+      return searchChildren(node.object)
+    // {hoge} や {hoge.fuga} の場合、許容する
+    case 'Identifier':
+      return false
     case 'JSXExpressionContainer':
     case 'ChainExpression':
       return searchChildren(node.expression)
@@ -101,7 +106,6 @@ module.exports = {
                 return
               }
 
-
               if (searchChildren(children[0])) {
                 context.report({
                   node,

package/rules/format-translate-component/index.js

@@ -14,6 +14,10 @@ const SCHEMA = [
 ]
 
 const NOOP = () => {}
+const findDangerouslySetInnerHTMLAttr = (a) => a.name.name === 'dangerouslySetInnerHTML'
+
+const WHITESPACE_REGEX = /(\s|\n)+/g
+const ALLOW_ELM_REGEX = /^(br|RangeSeparator)$/
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
@@ -46,43 +50,39 @@ module.exports = {
         // HINT: 翻訳コンポーネントはテキストとbrのみ許容する
         if (node.name.name === componentName) {
           let existValidChild = false
-          let existNotBrElement = false
 
-          node.parent.children.forEach((c) => {
+          for (let i = 0; i < node.parent.children.length; i++) {
+            const c = node.parent.children[i]
+
             switch (c.type) {
               case 'JSXText':
                 // HINT: 空白と改行のみの場合はテキストが存在する扱いにはしない
-                if (c.value.replace(/(\s|\n)+/g, '')) {
-                  existValidChild = true
+                if (existValidChild || !c.value.replace(WHITESPACE_REGEX, '')) {
+                  break
                 }
 
-                break
+                existValidChild = true
               case 'JSXExpressionContainer':
                 // TODO 変数がstringのみか判定できるなら対応したい
                 existValidChild = true
 
                 break
               case 'JSXElement':
-                if (c.openingElement.name.name !== 'br') {
-                  existNotBrElement = true
+                if (ALLOW_ELM_REGEX.test(c.openingElement.name.name)) {
+                  break
                 }
 
-                break
-            }
-          })
-
-          const message = (() => {
-            if (existNotBrElement) {
-              return `${componentName} 内では <br /> 以外のタグは使えません`
-            } else if (!existValidChild && !node.attributes.some((a) => a.name.name === 'dangerouslySetInnerHTML')) {
-              return `${componentName} 内には必ずテキストを設置してください`
+                return context.report({
+                  node,
+                  message: `${componentName} 内では <br />, <RangeSeparator /> 以外のタグは使えません`,
+                });
             }
-          })()
+          }
 
-          if (message) {
+          if (!existValidChild && !node.attributes.some(findDangerouslySetInnerHTMLAttr)) {
             context.report({
               node,
-              message,
+              message: `${componentName} 内には必ずテキストを設置してください`,
             });
           }
         }

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

@@ -11,7 +11,7 @@ const ruleTester = new RuleTester({
   },
 })
 
-const defaultInteractiveMessage = '((B|b)utton|(Check|Combo)(B|b)ox|(Date(timeLocal)?|Time|Month|Wareki)Picker|(I|i)nput(File)?|(S|s)elect|(T|t)extarea|(ActionDialogWith|RemoteDialog)Trigger|AccordionPanel|^a|Anchor|Link|DropZone|Field(S|s)et|FilterDropdown|(F|f)orm(Control|Group|Dialog)?|Pagination|RadioButton(Panel)?|RemoteTrigger(.+)Dialog|RightFixedNote|SegmentedControl|SideNav|Switch|TabItem)$'
+const defaultInteractiveMessage = '((B|b)utton(s)?|(Check|Combo)(B|b)ox(es|s)?|(Date(timeLocal)?|Time|Month|Wareki)Picker(s)?|(I|i)nput(File)?(s)?|(S|s)elect(s)?|(T|t)extarea(s)?|(ActionDialogWith|RemoteDialog)Trigger(s)?|AccordionPanel(s)?|^a|Anchor|Link(s)?|DropZone(s)?|Field(S|s)et(s)?|FilterDropdown(s)?|(F|f)orm(Control|Group|Dialog)?(s)?|Pagination(s)?|RadioButton(Panel)?(s)?|RemoteTrigger(.+)Dialog(s)?|RightFixedNote(s)?|SegmentedControl(s)?|SideNav(s)?|Switch(s)?|TabItem(s)?)$'
 const defaultInteractiveRegex = `/(${defaultInteractiveMessage})/`
 const messageNonInteractiveEventHandler = (nodeName, onAttrs, interactiveComponentRegex = defaultInteractiveRegex) => {
   const onAttrsText = onAttrs.join(', ')
@@ -50,7 +50,7 @@ ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
     { code: '<Wrapper onClick={any} role="presentation"><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }] },
     { code: '<Wrapper onClick={any} role="presentation"><any><Link /></any></Wrapper>' },
     { code: '<Wrapper onClick={any} role="presentation">{any && <AnyButton />}</Wrapper>' },
-    { code: '<Wrapper onClick={any} role="presentation">{any || <AnyButton />}</Wrapper>' },
+    { code: '<Wrapper onClick={any} role="presentation">{any || <AnyButtons />}</Wrapper>' },
     { code: '<Wrapper onClick={any} role="presentation">{any1 && (any2 || any3) && <AnyButton />}</Wrapper>' },
     { code: '<Wrapper onClick={any} role="presentation">{any ? <AnyButton /> : null}</Wrapper>' },
     { code: '<Wrapper onClick={any} role="presentation">{any1 ? (any2 ? <HogeLink /> : null) : null}</Wrapper>' },

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

@@ -19,10 +19,11 @@ const pageMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存
 const pageInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
 const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Sectionのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
  - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
-const notHaveHeadingMessage = (elementName) => `${elementName} はHeading要素を含んでいません。
+const notHaveHeadingMessage = (elementName, isNav) => `${elementName} はHeading要素を含んでいません。
  - SectioningContentはHeadingを含むようにマークアップする必要があります
  - ${elementName}に設定しているいずれかの属性がHeading，もしくはHeadingのテキストに該当する場合、その属性の名称を /^(heading|title)$/ にマッチする名称に変更してください
- - Headingにするべき適切な文字列が存在しない場合、 ${elementName} は削除するか、SectioningContentではない要素に差し替えてください`
+ - Headingにするべき適切な文字列が存在しない場合、 ${elementName} は削除するか、SectioningContentではない要素に差し替えてください${isNav ? `
+ - nav要素の場合、aria-label、もしくはaria-labelledby属性を設定し、どんなナビゲーションなのかがわかる名称を設定してください` : ''}`
 
 ruleTester.run('a11y-heading-in-sectioning-content', rule, {
   valid: [
@@ -48,6 +49,8 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<HogeStack forwardedAs="section"><div><Heading>hoge</Heading></div></HogeStack>' },
     { code: '<HogeBase as="aside"><Heading>hoge</Heading></HogeBase>' },
     { code: '<HogeBaseColumn forwardedAs="nav"><Heading>hoge</Heading></HogeBaseColumn>' },
+    { code: '<HogeNav aria-label="any"><Any /></HogeNav>' },
+    { code: '<HogeNav aria-labelledby="any"><Any /></HogeNav>' },
   ],
   invalid: [
     { code: 'const StyledArticle = styled.article``', errors: [ { message: `"article"を利用せず、smarthr-ui/Articleを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.article" -> "styled(Article)")` } ] },
@@ -64,5 +67,7 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<Section></Section>', errors: [ { message: notHaveHeadingMessage('Section') } ] },
     { code: '<Aside><HogeSection></HogeSection></Aside>', errors: [ { message: notHaveHeadingMessage('Aside') }, { message: notHaveHeadingMessage('HogeSection') } ] },
     { code: '<Aside any="hoge"><HogeSection><Heading /></HogeSection></Aside>', errors: [ { message: notHaveHeadingMessage('Aside') } ] },
+    { code: '<HogeNav><Any /></HogeNav>', errors: [ { message: notHaveHeadingMessage('HogeNav', true) } ] },
+    { code: '<HogeNav aria-diabled="true"><Any /></HogeNav>', errors: [ { message: notHaveHeadingMessage('HogeNav', true) } ] },
   ],
 });

package/test/best-practice-for-layouts.js

@@ -55,10 +55,12 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<HogeCluster justify="end" gap={0}>{a}</HogeCluster>` },
     { code: `<Stack align="flex-end">{a}</Stack>` },
     { code: `<HogeStack align="end">{a}</HogeStack>` },
+    { code: `<Cluster>{a}</Cluster>` },
+    { code: `<Cluster>{a.b}</Cluster>` },
+    { code: `<Cluster>{a ? b : c}</Cluster>` },
   ],
   invalid: [
     { code: `<Stack><Hoge /></Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
-    { code: `<Stack>{a}</Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
     { code: `<AnyStack>{a.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<AnyStack>{a && <><Hoge /></>}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<AnyStack>{a && a.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
@@ -70,7 +72,6 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyStack>{a ? <Hoge /> : a.b.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<AnyStack>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<Cluster><Hoge /></Cluster>`, errors: [ { message: errorMessage('Cluster', 'Cluster') } ] },
-    { code: `<Cluster>{a}</Cluster>`, errors: [ { message: errorMessage('Cluster', 'Cluster') } ] },
     { code: `<AnyCluster>{a.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a && <><Hoge /></>}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a && a.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
@@ -81,8 +82,6 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? a.b.hoge(action) : <Hoge />}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
-    { code: `<HogeCluster justify="center">{a}</HogeCluster>`, errors: [ { message: 'HogeCluster は smarthr-ui/Cluster ではなく smarthr-ui/Center でマークアップしてください' } ] },
-    { code: `<HogeStack align="center">{a}</HogeStack>`, errors: [ { message: 'HogeStack は smarthr-ui/Stack ではなく smarthr-ui/Center でマークアップしてください' } ] },
     { code: `<HogeStack gap={0}>{a}{b}</HogeStack>`, errors: [ { message: `HogeStack に "gap={0}" が指定されており、smarthr-ui/Stack の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
  - 方法1: 子要素を一つにまとめられないか検討してください
    - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど

package/test/format-translate-component.js

@@ -23,13 +23,14 @@ ruleTester.run('format-translate-component', rule, {
     { code: '<Any data-wovn-enable="true">ほげ</Any>', options },
     { code: '<Translate>ほげ</Translate>', options },
     { code: '<Translate>ほげ<br />ふが</Translate>', options },
+    { code: '<Translate>1<RangeSeparator />100</Translate>', options },
     { code: '<Translate>{any}</Translate>', options },
     { code: '<Translate dangerouslySetInnerHTML={{ __html: "ほげ" }} />', options },
   ],
   invalid: [
     { code: '<Any data-translate="true">ほげ</Any>', options, errors: [ { message: 'data-translate 属性は使用せず、 @/any/path/Translate コンポーネントを利用してください' } ] },
-    { code: '<Translate><Any>ほげ</Any></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
-    { code: '<Translate><Any /></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
+    { code: '<Translate><Any>ほげ</Any></Translate>', options, errors: [ { message: 'Translate 内では <br />, <RangeSeparator /> 以外のタグは使えません' } ] },
+    { code: '<Translate><Any /></Translate>', options, errors: [ { message: 'Translate 内では <br />, <RangeSeparator /> 以外のタグは使えません' } ] },
     { code: '<Translate></Translate>', options, errors: [ { message: 'Translate 内には必ずテキストを設置してください' } ] },
   ]
 })