fix: inline class visually-hidden

src/scss/_common.scss

@@ -366,31 +366,6 @@
         line-height: 0;
     }
 
-    /*
-        Hides element visually, but leaves it visible for search crawlers and screen readers
-
-        https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
-        https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
-    */
-    .visually-hidden {
-        position: absolute;
-
-        overflow: hidden;
-        clip: rect(0 0 0 0);
-
-        width: 1px;
-        height: 1px;
-        margin: -1px;
-
-        padding: 0;
-
-        white-space: nowrap;
-
-        border: 0;
-
-        clip-path: inset(100%);
-    }
-
     // highlight.js colors
     --yfm-color-hljs-background: #{$codeBackgroundColor};
     --yfm-color-hljs-subst: #444;

src/transform/plugins/anchors/index.ts

@@ -7,6 +7,7 @@ import StateCore from 'markdown-it/lib/rules_core/state_core';
 import Token from 'markdown-it/lib/token';
 import {escapeHtml} from 'markdown-it/lib/common/utils';
 import {MarkdownItPluginCb} from '../typings';
+import {visuallyHiddenInline} from '../utils';
 
 const slugify: (str: string, opts: {}) => string = require('slugify');
 
@@ -159,7 +160,11 @@ const index: MarkdownItPluginCb<Options> = (
     }
 
     md.renderer.rules.anchor_hidden_desc = function (tokens, index) {
-        return '<span class="visually-hidden">' + escapeHtml(tokens[index].content) + '</span>';
+        return (
+            `<span style="${visuallyHiddenInline()}">` +
+            escapeHtml(tokens[index].content) +
+            '</span>'
+        );
     };
 };
 

src/transform/plugins/utils.ts

@@ -36,3 +36,36 @@ export const сarriage = platform === 'win32' ? '\r\n' : '\n';
 export function generateID() {
     return Math.random().toString(36).substr(2, 8);
 }
+
+export function visuallyHiddenInline() {
+    /*
+        Hides element visually, but leaves it visible for search crawlers and screen readers
+
+        https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+        https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+    */
+
+    let inline = `
+        position: absolute;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+
+        padding: 0;
+
+        white-space: nowrap;
+
+        border: 0;
+
+        clip-path: inset(100%);
+    `;
+    // replace line breaks with spaces, remove multiple consequent spaces
+    inline = inline.replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ');
+    // remove first and last characters which are spaces
+    inline = inline.trim();
+
+    return inline;
+}