useHeadingContent (since v12.1.0)
Enforce that heading elements (h1, h2, etc.) have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the aria-hidden prop.
Examples
Invalid
<h1 />nursery/useHeadingContent.js:1:1 lint/nursery/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Provide screen reader accessible content when using heading elements.
> 1 │ <h1 />
│ ^^^^^^
2 │
ℹ All headings on a page should have content that is accessible to screen readers.
<h1><div aria-hidden /></h1>nursery/useHeadingContent.js:1:1 lint/nursery/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Provide screen reader accessible content when using heading elements.
> 1 │ <h1><div aria-hidden /></h1>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ All headings on a page should have content that is accessible to screen readers.
<h1></h1>nursery/useHeadingContent.js:1:1 lint/nursery/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Provide screen reader accessible content when using heading elements.
> 1 │ <h1></h1>
│ ^^^^^^^^^
2 │
ℹ All headings on a page should have content that is accessible to screen readers.
Valid
<h1>heading</h1><h1><div aria-hidden="true"></div>visible content</h1><h1 dangerouslySetInnerHTML={{ __html: "heading" }} /><h1><div aria-hidden />visible content</h1>