added coderabbit js and css suggestions

docs/javascripts/directory-tree.js

@@ -1,13 +1,45 @@
-function toggleFolder(folderId) {
+function toggleFolder(folderId, event) {
+  if (!folderId) {
+    console.error('Folder ID is required');
+    return;
+  }
+
   const content = document.getElementById(folderId);
+  if (!content) {
+    console.error(`Element with ID ${folderId} not found`);
+    return;
+  }
+
   const folderItem = content.previousElementSibling;
+  if (!folderItem) {
+    console.error(`No folder item found for content ${folderId}`);
+    return;
+  }
+
+  const isExpanded = folderItem.classList.contains('active');
+
+  // Update ARIA attributes
+  folderItem.setAttribute('role', 'button');
+  folderItem.setAttribute('aria-expanded', !isExpanded);
+  folderItem.setAttribute('aria-controls', folderId);
+  content.setAttribute('role', 'region');
 
   // Toggle active state on folder item
   folderItem.classList.toggle('active');
 
   // Toggle visibility of content
   content.classList.toggle('visible');
 
-  // Prevent event bubbling
-  event.stopPropagation();
+  if (event) {
+    event.stopPropagation();
+  }
 }
+
+// Add keyboard support
+document.addEventListener('keydown', (event) => {
+  if (event.target.hasAttribute('aria-controls') &&
+      (event.key === 'Enter' || event.key === ' ')) {
+    event.preventDefault();
+    toggleFolder(event.target.getAttribute('aria-controls'), event);
+  }
+});

docs/stylesheets/directory-tree.css

@@ -5,9 +5,9 @@
 .md-typeset .admonition.folder,
 .md-typeset details.folder {
   border: none;
-  border-left: 3px solid rgb(40, 72, 214);
+  border-left: 3px solid var(--md-primary-fg-color);
   box-shadow: none;
-  background: none;
+  background: var(--md-default-bg-color--light);
 }
 
 .md-typeset .folder > .admonition-title,
@@ -18,8 +18,9 @@
   font-weight: normal;
   display: flex;
   align-items: center;
-  min-height: 24px; /* Ensure consistent height */
+  min-height: 40px; /* Better touch target size */
   gap: 0.5rem; /* Add space between icon and text */
+  color: var(--md-typeset-color); /* Ensure sufficient contrast */
 }
 
 .md-typeset .folder > .admonition-title::before,