review comments

Author: impirios

docs/components/layout/Documentation/Documentation.js

@@ -27,7 +27,7 @@ const Documentation = ({ title = "", description = "", currentPage = undefined,
     return <div>
         <div>
             <div className='flex items-center space-x-4'>
-                <Heading>{title}</Heading>
+                <BookMarkLink id={title}> <Heading>{title}</Heading> </BookMarkLink>
             </div>
             {description && <Text className="mb-4 text-gray-900 font-light">{description}</Text>}
         </div>

docs/components/layout/Documentation/utils.js

@@ -1,4 +1,13 @@
 export const BookMarkLink = ({ children, id }) => {
-    return <div id={id}><a href={`#${id}`}>{children}</a></div>
-}
-
+    const sanitizedId = id.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+    return (
+        <div id={sanitizedId}>
+            <a
+                href={`#${sanitizedId}`}
+                aria-label={`Direct link to ${id}`}
+            >
+                {children}
+            </a>
+        </div>
+    );
+}