fix: use hr instead of a tag

diplodoc-platform · Nov 30, 2023 · 0a70e2e · 0a70e2e
1 parent 8d9712e
commit 0a70e2e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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" />',
             );
         });
     });