eslint-plugin-smarthr 6.2.0 → 6.2.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.
 
+## [6.2.2](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.2.1...eslint-plugin-smarthr-v6.2.2) (2026-02-05)
+
+
+### Bug Fixes
+
+* **a11y-anchor-has-href-attribute:** href属性に空文字・#が指定されていることをチェックするselectorの記述がinvalidになる場合があるため変更 ([#1049](https://github.com/kufu/tamatebako/issues/1049)) ([fa210cb](https://github.com/kufu/tamatebako/commit/fa210cb4d691bfd402ed86210a7552fe3b001c3a))
+
+## [6.2.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.2.0...eslint-plugin-smarthr-v6.2.1) (2026-02-02)
+
+
+### Bug Fixes
+
+* **best-practice-for-interactive-element:** button要素に対してrole="menuitem"の設定を許容する ([#1038](https://github.com/kufu/tamatebako/issues/1038)) ([022b22f](https://github.com/kufu/tamatebako/commit/022b22f5432cd5cc7afd54525dd66c3e0e5d3d49))
+
 ## [6.2.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.1.0...eslint-plugin-smarthr-v6.2.0) (2026-01-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "aed30ef2313795136134408db0ab4fb88dd49d02"
+  "gitHead": "71497e58907b3eb5e52681f3e6473b3e30902ebf"
 }

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

@@ -45,6 +45,9 @@ const OPTION = (() => {
 
 const ANCHOR_ELEMENT = 'JSXOpeningElement[name.name=/(Anchor|Link|^a)$/]'
 const HREF_ATTRIBUTE = `JSXAttribute[name.name=${OPTION.react_router ? '/^(href|to)$/' : '"href"'}]`
+const NULL_HREF_ATTRIBUTE_VALUES = `${HREF_ATTRIBUTE}:matches(${['#', ''].reduce((prev, v) => {
+  return `${prev},:has(>Literal[value="${v}"]),:has(>JSXExpressionContainer[expression.value="${v}"])`
+}, '[value=null]')})`
 const NEXT_LINK_REGEX = /Link$/
 // HINT: next/link で `Link>a` という構造がありえるので直上のJSXElementを調べる
 const nextCheck = (node) => ((node.parent.parent.openingElement.name.name || '').test(NEXT_LINK_REGEX))
@@ -92,7 +95,7 @@ module.exports = {
           reporter(node)
         }
       },
-      [`${ANCHOR_ELEMENT}:has(${HREF_ATTRIBUTE}:matches([value=null],:has(>Literal[value=/^(|#)$/]),:has(>JSXExpressionContainer[expression.value=/^(|#)$/])))`]: reporter,
+      [`${ANCHOR_ELEMENT}:has(${NULL_HREF_ATTRIBUTE_VALUES})`]: reporter,
     }
   },
 }

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

@@ -1,10 +1,96 @@
 # smarthr/a11y-heading-in-sectioning-content
 
-- Headingコンポーネントをsmarthr-ui/SectioningContent(Article, Aside, Nav, Section) のいずれかで囲むことを促すルールです
-  - article, aside, nav, section で Heading とHeadingの対象となる範囲を囲むとブラウザが正確に解釈できるようになるメリットがあります
-  - またsmarthr-ui/SectioningContentで smarthr-ui/Headingを囲むことで、Headingのレベル(h1~h6)を自動的に計算するメリットもあります
-- このルールではSectiongContentがHeadingを内包しているかもチェックします
-- Headingコンポーネントをsmarthr-ui/Layout(Center, Reel, Sidebar, Stack) のいずれかで囲んでおり、かつas, forwardedAsのいずれかの属性で 'section', 'article', 'aside', 'nav' が指定されている場合、SectioningContentで囲んでいるものとして扱われるようになります
+HeadingコンポーネントをSectioningContent(Article, Aside, Nav, Section) のいずれかで囲むことを促すルールです。<br />
+同時にSectioningContentはHeadingを内包しているか、もチェックします
+
+
+## なぜHeadingとSectioningContentはセットで記述する必要があるのか？
+
+詳細は[SmartHR Tech Blog](https://tech.smarthr.jp/entry/2025/06/19/094801)を参照してください。<br />
+メリットのみを記述すると以下のとおりです。
+
+- article, aside, nav, section で Heading とHeadingの対象となる範囲を囲むとブラウザが正確に解釈できるようになるメリットがあります
+- smarthr-ui/SectioningContentで smarthr-ui/Headingを囲むことで、Headingのレベル(h1~h6)を自動的に計算するメリットもあります
+
+## SectioningContentとして扱うコンポーネントについて
+
+このルールではsmarthr-ui/Layout系コンポーネント(Center, Reel, Sidebar, Stack)にas属性・forwardedAs属性で`section` `article` `aside` `nav` のいずれかの要素が指定されている場合、SectioningContentとして扱います。<br />
+Layout系コンポーネントがSectioningContentとして扱われている場合、smarthr-uiの内部実装レベルでもSectioningContentとして扱われるため、前述のHeadingのレベルの自動計算が有効になります。
+
+## section要素などbuildinのSectiongContentに属する要素の利用について
+
+前述のHeadingレベルの自動計算はsmarthr-ui/SectiongContentとsmarthr-ui/Layoutでas・forwardedAs属性を指定した場合のみ有効になる機能です。<br />
+buildinの `article` `aside` `nav` `section` 要素はheadingの対象となる範囲は正しく表せますが、Headingレベルの自動計算は行えません。
+
+そのため、**`article` `aside` `nav` `section` 要素はsmarthr-uiの `Article` `Aside` `Nav` `Section` コンポーネントに置き換えてください。**
+
+## PageHeadingのチェックについて
+
+PageHeadingはh1要素を表現するコンポーネントです。<br />
+h1要素は基本的に記述されてるhtml全体に対する見出しとなります。<br />
+そのため**SectioningContentでh1要素を囲むと見出しの範囲外として解釈された範囲はどの見出しにも属さないことになる**ため、エラーとしています。
+
+```jsx
+// h1をSectioningContentで囲むと...
+...
+<body>
+  <Section>
+    <PageHeading />
+    {anyContent}
+  </Section>
+  {/* ↓このコンポーネントはどの見出しにも属さないことになる */}
+  <OtherContent />
+</body>
+```
+
+上記例の場合、OtherContentがh1の範囲外になり、htmlのアウトラインが乱れてしまいます。<br />
+PageHeadingをSectioningContentで囲まない場合、html全体の見出しとなるため、アウトラインは乱れません。
+
+```jsx
+// h1をSectioningContentで囲まなければhtml全体のアウトラインが整う
+...
+<body>
+  <PageHeading />
+  {anyContent}
+  {/* ↓このコンポーネントはどの見出しにも属さないことになる */}
+  <OtherContent />
+</body>
+```
+
+また前述の通り、PageHeadingは記述されたhtml全体の見出しのため、基本的に1htmlにつき1つのみ記述出来ます。<br />
+そのためこのルールでは**おなじコンポーネント内で複数のPageHeadingが存在する場合エラー**になります。
+
+```jsx
+<>
+  <HogePageHeading />
+  ...
+  <FugaPageHeading />
+  ...
+</>
+```
+
+このチェックは条件分岐によって結果としては一つしかPageHeadingが出力されない場合でもエラーになるため注意が必要です。
+
+```jsx
+<>
+  {hoge ? (
+    <PageHeading>{hoge}</PageHeading>
+  ) : (
+    <PageHeading>{fuga}</PageHeading>
+  )}
+</>
+```
+
+下記の様にPageHeadingは単一の記述になるようにまとめることを推奨します。
+
+```jsx
+<>
+  <PageHeading>{hoge || fuga}</PageHeading>
+</>
+```
+
+
+
 
 ## rules
 
@@ -19,73 +105,83 @@
 ## ❌ Incorrect
 
 ```jsx
+// Headingがsmarthr-ui/SectioningContent(Article, Aside, Nav, Section)のいずれかで囲まれていないためNG
 <div>
   <Heading>
     hoge
   </Heading>
-  <Heading>
-    fuga
-  </Heading>
 </div>
 ```
+
 ```jsx
-<section> // styled-components の sectionをそのまま利用するとNG
-  <Heading>
-    hoge
-  </Heading>
-</section>
+// Headingに当たる要素がないためNG
+<Aside>
+  <AnyContent />
+</Aside>
+```
+
+```jsx
+// buildinのSectioningContentではなくsmarthr-ui/SectioningContentで囲まなければ
+// Headingレベルの自動計算が有効にならないためNG
 <section>
   <Heading>
-    fuga
+    hoge
   </Heading>
 </section>
 ```
 
 ```jsx
+// PageHeadingはSectiongContentでラップするとoutlineが乱れる可能性があるためNG
 <Section>
-  <PageHeading> // PageHeadingはSectiongContentでラップするとoutlineが狂う可能性があるためNG
+  <PageHeading>
     hoge
   </PageHeading>
 </Section>
 ```
 
 ```jsx
+// 同じファイル内に複数のPageHeadingが存在するとNG
 <>
-  <PageHeading> // 同じファイル内に複数のPageHeadingが存在するとNG
-    hoge
-  </PageHeading>
-  <PageHeading>
-    fuga
-  </PageHeading>
+  {hoge ? (
+    <PageHeading>
+      hoge
+    </PageHeading>
+  ) : (
+    <PageHeading>
+      fuga
+    </PageHeading>
+  )}
 </>
 ```
 
-```jsx
-<Aside> // Headingに当たる要素がないためNG
-  <AnyContent />
-</Aside>
-```
-
 ## ✅ Correct
 
 ```jsx
+// SectioningContentにはHeadingを含む必要がある
 <Section>
-  <Heading>hoge</Heading> // SectioningContentにはHeadingを含む必要がある
+  <Heading>hoge</Heading>
   <Section>
     <Heading>fuga</Heading>
   </Section>
 </Section>
+```
 
+```jsx
+// PageHeadingはSectioningContentで囲まない
 <>
   <PageHeading>Page Name.</PageHeading>
   <Section>
     <Heading>hoge</Heading>
   </Section>
-  <StyledSection>
-    <Heading>fuga</Heading>
-  </StyledSection>
   <Center as="aside">
     <Heading>piyo</Heading>
   </Center>
 </>
 ```
+
+```jsx
+// PageHeadingはコンポーネント内で単一にする
+<>
+  <PageHeading>{hoge || fuga}</PageHeading>
+</>
+```

package/rules/best-practice-for-interactive-element/index.js

@@ -33,11 +33,15 @@ const INTERACTIVE_ON_REGEX = /^on(Change|Input|Focus|Blur|(Double)?Click|Key(Dow
 const DELEGATE_REGEX = /(d|D)elegate/
 
 const ARROW_ROLES = {
-  '((^i|I)nput|(^c|C)heck(b|B)ox)$': 'switch',
-  '(^i|I)nput$': 'combobox',
-  '(^b|B)utton$': 'option',
+  'Check(b|B)ox$': ['switch'],
+  '(^i|I)nput$': ['switch', 'combobox'],
+  '(^b|B)utton$': ['option', 'menuitem'],
 }
-const NOT_ARROW_ROLE_ATTRIBUTES = Object.entries(ARROW_ROLES).reduce((prev, [key, value]) => `${prev}:not([parent.name.name=/${key}/][value.value="${value}"])`, '')
+const NOT_ARROW_ROLE_ATTRIBUTES = Object.entries(ARROW_ROLES).reduce((prev, [key, vs]) => (
+    vs.reduce((p, v) => `${p}:not([parent.name.name=/${key}/][value.value="${v}"])`, prev)
+  ),
+  ''
+)
 
 const ELEMENT_HAS_ROLE_ATTRIBUTE = 'JSXOpeningElement:has(JSXAttribute[name.name="role"])'
 const AS_FORM_PART_ATTRIBUTE = 'JSXAttribute[name.name=/^(as|forwardedAs)$/][value.value=/^f(orm|ieldset)$/]'

package/test/best-practice-for-interactive-element.js

@@ -72,6 +72,7 @@ ruleTester.run('best-practice-for-interactive-element', rule, {
     { code: `<HogeInput role="switch" />` },
     { code: `<input role="combobox" />` },
     { code: `<FugaButton role="option" />` },
+    { code: `<FugaButton role="menuitem" />` },
   ],
   invalid: [
     { code: `<button role="presentation">...</button>`, errors: [{ message: interactiveError('button') }] },