fix: add missing id & role to heading elements

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.1.0] - 2023-0927
+## 0.2.0 - 2023-09-27
+
+### Bug Fixes
+
+- Add missing `id` & `role` to heading elements
+
+
+## 0.1.0 - 2023-09-27
 
 - initial release

README.md

@@ -102,7 +102,7 @@ console.log(value)
 
 ```html
 <section id="heading-21-section">
-  <h2>
+  <h2 id="heading-21" role="presentation">
     <a href="#heading-21" class="heading-anchor">
       <button type="button" class="heading-anchor__btn">#</button>
     </a>
@@ -112,15 +112,15 @@ console.log(value)
 </section>
 
 <section id="heading-22-section">
-  <h2>
+  <h2 id="heading-22" role="presentation">
     <a href="#heading-22" class="heading-anchor">
       <button type="button" class="heading-anchor__btn">#</button>
     </a>
     <span role="heading" aria-level="2">Heading 2.2</span>
   </h2>
   <p>Paragraph 2</p>
   <section id="heading-31-section">
-    <h3>
+    <h3 id="heading-31" role="presentation">
       <a href="#heading-31" class="heading-anchor">
         <button type="button" class="heading-anchor__btn">#</button>
       </a>
@@ -131,7 +131,7 @@ console.log(value)
 </section>
 
 <section id="heading-23-section">
-  <h2>
+  <h2 id="heading-23" role="presentation">
     <a href="#heading-23" class="heading-anchor">
       <button type="button" class="heading-anchor__btn">#</button>
     </a>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rehype-slug-anchor-sectionize",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "rehype plugin which wraps headings and their descendants in nested <section> elements and applies slugged anchor links to them.",
   "keywords": [
     "anchor",

src/index.ts

@@ -76,7 +76,7 @@ const rehypeSlugAnchorSectionize: Plugin<
             endIndex > 0 ? endIndex : undefined
           )
 
-          const slugId = node.properties.id || slug(hastToString(node)) || null
+          const slugId = slug(hastToString(node)) || null
 
           const linkProps = {
             href: `#${slugId}`,
@@ -95,12 +95,12 @@ const rehypeSlugAnchorSectionize: Plugin<
             }),
           }
 
-          const section = {
-            type: 'element',
-            tagName: options.wrapperTagName,
-            properties: sectionProps,
-            children: between,
-          } as Element
+          node.properties = {
+            ...(slugId && {
+              id: slugId,
+            }),
+            role: 'presentation',
+          }
 
           node.children = [
             {
@@ -120,19 +120,17 @@ const rehypeSlugAnchorSectionize: Plugin<
               type: 'element',
               tagName: 'span',
               properties: { role: 'heading', ariaLevel: depthTag.slice(1) },
-              children: [
-                Object.assign({}, ...node.children, {
-                  properties: {
-                    ...(slugId && {
-                      id: slugId,
-                    }),
-                    role: 'presentation',
-                  },
-                }),
-              ],
+              children: node.children,
             },
           ]
 
+          const section = {
+            type: 'element',
+            tagName: options.wrapperTagName,
+            properties: sectionProps,
+            children: between,
+          } as Element
+
           parent.children.splice(startIndex, section.children.length, section)
         }
       )

test/__snapshots__/plugin.test.ts.snap

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`should ... 1`] = `
-"<section id=\\"heading-21-section\\"><h2><a href=\\"#heading-21\\" class=\\"heading-anchor\\"><button type=\\"button\\" class=\\"heading-anchor__btn\\">#</button></a><span role=\\"heading\\" aria-level=\\"2\\">Heading 2.1</span></h2>
+"<section id=\\"heading-21-section\\"><h2 id=\\"heading-21\\" role=\\"presentation\\"><a href=\\"#heading-21\\" class=\\"heading-anchor\\"><button type=\\"button\\" class=\\"heading-anchor__btn\\">#</button></a><span role=\\"heading\\" aria-level=\\"2\\">Heading 2.1</span></h2>
 <p>Paragraph 1</p>
-</section><section id=\\"heading-22-section\\"><h2><a href=\\"#heading-22\\" class=\\"heading-anchor\\"><button type=\\"button\\" class=\\"heading-anchor__btn\\">#</button></a><span role=\\"heading\\" aria-level=\\"2\\">Heading 2.2</span></h2>
+</section><section id=\\"heading-22-section\\"><h2 id=\\"heading-22\\" role=\\"presentation\\"><a href=\\"#heading-22\\" class=\\"heading-anchor\\"><button type=\\"button\\" class=\\"heading-anchor__btn\\">#</button></a><span role=\\"heading\\" aria-level=\\"2\\">Heading 2.2</span></h2>
 <p>Paragraph 2</p>
-<section id=\\"heading-31-section\\"><h3><a href=\\"#heading-31\\" class=\\"heading-anchor\\"><button type=\\"button\\" class=\\"heading-anchor__btn\\">#</button></a><span role=\\"heading\\" aria-level=\\"3\\">Heading 3.1</span></h3>
+<section id=\\"heading-31-section\\"><h3 id=\\"heading-31\\" role=\\"presentation\\"><a href=\\"#heading-31\\" class=\\"heading-anchor\\"><button type=\\"button\\" class=\\"heading-anchor__btn\\">#</button></a><span role=\\"heading\\" aria-level=\\"3\\">Heading 3.1</span></h3>
 <p>Paragraph 3</p>
-</section></section><section id=\\"heading-23-section\\"><h2><a href=\\"#heading-23\\" class=\\"heading-anchor\\"><button type=\\"button\\" class=\\"heading-anchor__btn\\">#</button></a><span role=\\"heading\\" aria-level=\\"2\\">Heading 2.3</span></h2>
+</section></section><section id=\\"heading-23-section\\"><h2 id=\\"heading-23\\" role=\\"presentation\\"><a href=\\"#heading-23\\" class=\\"heading-anchor\\"><button type=\\"button\\" class=\\"heading-anchor__btn\\">#</button></a><span role=\\"heading\\" aria-level=\\"2\\">Heading 2.3</span></h2>
 <p>Paragraph 4</p></section>"
 `;