fix(v2): unify anchor behavior (#2162)

* fix(v2): unify anchor behavior * fix(v2): use activeElement * fix(v2): add support for sticky header * Fix highlighted anchor if non-hidable navbar enabled
facebook · Jan 23, 2020 · 1555394 · 1555394
1 parent c0c0ad6
commit 1555394
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 28 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Heading/index.js b/packages/docusaurus-theme-classic/src/theme/Heading/index.js
@@ -8,27 +8,45 @@
 /* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
 
 import React from 'react';
+import classnames from 'classnames';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 import './styles.css';
+import styles from './styles.module.css';
 
-const Heading = Tag => ({id, ...props}) => {
-  if (!id) {
-    return <Tag {...props} />;
-  }
-  return (
-    <Tag {...props}>
-      <a aria-hidden="true" tabIndex="-1" className="anchor" id={id} />
-      <a
-        aria-hidden="true"
-        tabIndex="-1"
-        className="hash-link"
-        href={`#${id}`}
-        title="Direct link to heading">
-        #
-      </a>
-      {props.children}
-    </Tag>
-  );
-};
+const Heading = Tag =>
+  function TargetComponent({id, ...props}) {
+    const {
+      siteConfig: {
+        themeConfig: {navbar: {hideOnScroll = false} = {}} = {},
+      } = {},
+    } = useDocusaurusContext();
+
+    if (!id) {
+      return <Tag {...props} />;
+    }
+
+    return (
+      <Tag {...props}>
+        <a
+          aria-hidden="true"
+          tabIndex="-1"
+          className={classnames('anchor', {
+            [styles.enhancedAnchor]: !hideOnScroll,
+          })}
+          id={id}
+        />
+        <a
+          aria-hidden="true"
+          tabIndex="-1"
+          className="hash-link"
+          href={`#${id}`}
+          title="Direct link to heading">
+          #
+        </a>
+        {props.children}
+      </Tag>
+    );
+  };
 
 export default Heading;
diff --git a/packages/docusaurus-theme-classic/src/theme/Heading/styles.css b/packages/docusaurus-theme-classic/src/theme/Heading/styles.css
@@ -8,13 +8,8 @@
 .anchor {
   display: block;
   position: relative;
-  top: -5rem;
-}
-
-@media only screen and (max-width: 735px) {
-  .anchor {
-    top: -10rem;
-  }
+  top: -0.5rem;
+  outline: none;
 }
 
 .hash-link {

diff --git a/packages/docusaurus-theme-classic/src/theme/Heading/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Heading/styles.module.css
@@ -0,0 +1,7 @@
+.enhancedAnchor:target:before {
+  content: '';
+  display: block;
+  height: var(--ifm-navbar-height);
+  margin: calc(var(--ifm-navbar-height) * -1) 0 0;
+  visibility: hidden;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js
@@ -21,13 +21,22 @@ const useHideableNavbar = hideOnScroll => {
 
   const handleScroll = () => {
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const documentHeight = document.documentElement.scrollHeight - navbarHeight;
-    const windowHeight = window.innerHeight;
 
     if (scrollTop < navbarHeight) {
       return;
     }
 
+    const focusedElement = document.activeElement;
+
+    if (focusedElement && /^#/.test(window.location.hash)) {
+      setIsNavbarVisible(false);
+      focusedElement.blur();
+      return;
+    }
+
+    const documentHeight = document.documentElement.scrollHeight - navbarHeight;
+    const windowHeight = window.innerHeight;
+
     if (lastScrollTop && scrollTop > lastScrollTop) {
       setIsNavbarVisible(false);
     } else if (scrollTop + windowHeight < documentHeight) {