eslint-plugin-smarthr 1.8.0 → 1.8.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "baf2b489f2397ac050c0c699e186b8356a8775cb"
+  "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/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) } ] },
   ],
 });