fix: enhance focus handling (#2595)

Author: sy-records

docs/_coverpage.md

@@ -2,7 +2,7 @@
 
 ![logo](_media/icon.svg)
 
-# docsify <small>5.0.0-rc.1</small>
+# docsify <small>5.0.0-rc.1</small> :id=docsify
 
 > A magical documentation site generator
 

src/core/event/index.js

@@ -416,9 +416,16 @@ export function Events(Base) {
 
       // Move focus to content area
       if (focusEl) {
-        focusEl.focus(settings);
+        if (!focusEl.hasAttribute('tabindex')) {
+          focusEl.setAttribute('tabindex', '-1');
+          focusEl.setAttribute('data-added-tabindex', 'true');
+        }
 
-        focusEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        if (focusEl.hasAttribute('data-added-tabindex')) {
+          focusEl.scrollIntoView({ behavior: 'smooth' });
+        }
+
+        focusEl.focus(settings);
       }
 
       return focusEl;

test/integration/__snapshots__/docs.test.js.snap

@@ -5,7 +5,7 @@ exports[`Docs Site coverpage renders and is unchanged 1`] = `
       <div class="mask"></div>
       <div class="cover-main"><!-- markdownlint-disable first-line-h1 -->
 
-<p><img src="http://127.0.0.1:4000/_media/icon.svg" data-origin="_media/icon.svg" alt="logo"></p><h1 id="docsify-500-rc1" tabindex="-1"><a href="#/?id=docsify-500-rc1" data-id="docsify-500-rc1" class="anchor"><span>docsify <small>5.0.0-rc.1</small></span></a></h1><blockquote>
+<p><img src="http://127.0.0.1:4000/_media/icon.svg" data-origin="_media/icon.svg" alt="logo"></p><h1 id="docsify" tabindex="-1"><a href="#/?id=docsify" data-id="docsify" class="anchor"><span>docsify <small>5.0.0-rc.1</small></span></a></h1><blockquote>
 <p>A magical documentation site generator</p></blockquote>
 <ul><li>Simple and lightweight</li><li>No statically built HTML files</li><li>Multiple themes</li></ul><p><a href="#/?id=docsify" class="button primary">Get Started</a>
 <a href="https://github.com/docsifyjs/docsify/" target="_blank" rel="noopener" class="button secondary">GitHub</a></p><!-- ![color](#f0f0f0) -->