From 0a70e2ee284c1fbca2efb169be77de8634451506 Mon Sep 17 00:00:00 2001
From: ivan <ravestar@yandex-team.ru>
Date: Wed, 22 Nov 2023 15:24:48 +0300
Subject: [PATCH] fix: use hr instead of a tag

---
 src/transform/plugins/block-anchor/block-anchor.ts |  2 +-
 test/block-anchor.test.ts                          | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/transform/plugins/block-anchor/block-anchor.ts b/src/transform/plugins/block-anchor/block-anchor.ts
index db2e09aa..4b8fdab9 100644
--- a/src/transform/plugins/block-anchor/block-anchor.ts
+++ b/src/transform/plugins/block-anchor/block-anchor.ts
@@ -45,5 +45,5 @@ export function replaceTokens(state: StateCore) {
 export function renderTokens(tokens: Token[], idx: number) {
     const token = tokens[idx];
     const id = token.content;
-    return `<a id=${id}></a>`;
+    return `<hr id=${id} class="visually-hidden"/>`;
 }
diff --git a/test/block-anchor.test.ts b/test/block-anchor.test.ts
index e3b189c4..76c0ca9e 100644
--- a/test/block-anchor.test.ts
+++ b/test/block-anchor.test.ts
@@ -13,14 +13,16 @@ let transformYfm = (text: string) => {
 
 describe('block-anchor', function () {
     describe('simple rendering', () => {
-        it('should render an a tag', () => {
-            expect(transformYfm('{%anchor my-anchor%}')).toBe('<a id="my-anchor"></a>');
+        it('should render an hr tag', () => {
+            expect(transformYfm('{%anchor my-anchor%}')).toBe(
+                '<hr id="my-anchor" class="visually-hidden" />',
+            );
         });
         it('does not consume things it should not', () => {
             expect(transformYfm('# Heading \n {%anchor my-anchor%} \n # Other heading')).toEqual(
                 '<h1 id="heading"><a href="#heading" class="yfm-anchor" aria-hidden="true">' +
                     '<span class="visually-hidden">Heading</span></a>Heading</h1>\n' +
-                    '<a id="my-anchor"></a><h1 id="other-heading">' +
+                    '<hr id="my-anchor" class="visually-hidden" /><h1 id="other-heading">' +
                     '<a href="#other-heading" class="yfm-anchor" aria-hidden="true">' +
                     '<span class="visually-hidden">Other heading</span></a>Other heading</h1>\n',
             );
@@ -44,7 +46,7 @@ describe('block-anchor', function () {
                 '<h1 id="heading-anchor">' +
                     '<a href="#heading-anchor" class="yfm-anchor" aria-hidden="true">' +
                     '<span class="visually-hidden">Heading</span></a>Heading</h1>\n' +
-                    '<a id="my-anchor"></a>',
+                    '<hr id="my-anchor" class="visually-hidden" />',
             );
         });
     });