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