InternalLink - check href startsWith + forward props to <a/>

To make it more accessible and allow customization.

components/InternalLink.jsx

@@ -1,17 +1,24 @@
 import React from "react";
 
-const InternalLink = ({ hash, title }) => {
-  const handleLink = (event) => {
+/*
+InternalLink should be only used to link to fragment urls placed within a Accordion, in the same page.
+`href` props should only contain a fragment prefixed with "link-" (start with "#link-")
+It allows all the same props as <a/> tag. 
+*/
+const InternalLink = ({ href, className = "navlink", ...otherProps }) => {
+  if (!href.startsWith("#link-")) {
+    throw new TypeError(
+      "InternalLink - href must start with #. It should only be used for same-page fragment links."
+    );
+  }
+
+  const handleLink = () => {
     // manually change hash to trigger hashChange event.
     window.location.hash = "#";
-    window.location.hash = hash;
+    window.location.hash = href;
   };
 
-  return (
-    <a onClick={handleLink} className="navlink">
-      {title}
-    </a>
-  );
+  return <a onClick={handleLink} className={className} href={href} {...otherProps}></a>;
 };
 
 export default InternalLink;

docs/create-modify-element.mdx

@@ -66,7 +66,7 @@ for (let p of paras) {
 }
 ```
 
-`querySelectorAll` is also available on <b>Element</b> and <b>DocumentFragment</b>, in the <InternalLink title = "same way as querySelector" hash = "link-element-has-qs"/>.
+`querySelectorAll` is also available on <b>Element</b> and <b>DocumentFragment</b>, in the <InternalLink href="#link-element-has-qs">same way as querySelector</InternalLink>.
 
 <MDN title="querySelectorAll" url="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll" />