@hortonstudio/main 1.1.29 → 1.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.1.29",
+  "version": "1.1.30",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/styles.css

@@ -16,4 +16,14 @@ body .transition {display: block}
 html, body {
     overscroll-behavior: none;
     scrollbar-gutter: stable;
-  }
+  }
+
+/* TOC focus handling - only show focus outline for keyboard navigation */
+[data-hs-toc] div[id]:focus:not(:focus-visible) {
+    outline: none !important;
+}
+
+[data-hs-toc] div[id]:focus-visible {
+    outline: 2px solid #007bff !important;
+    outline-offset: 2px;
+}

package/utils/toc.js

@@ -44,34 +44,24 @@ export async function init() {
         link.appendChild(number);
         link.appendChild(document.createTextNode(heading.textContent));
 
-        // Add click handler to prevent focus on mouse clicks but allow keyboard focus
+        // Add click handler for smooth scrolling
         link.addEventListener('click', (e) => {
-            // Prevent default to handle scrolling ourselves
             e.preventDefault();
             
             const targetSection = document.getElementById(sectionId);
             if (targetSection) {
-                // Scroll to the section
                 targetSection.scrollIntoView({ behavior: 'smooth' });
-                
-                // Don't focus the target element on mouse clicks (Safari focus issue)
-                // Focus will still work with keyboard navigation (Enter key, etc.)
             }
         });
         
-        // Handle keyboard navigation (Enter/Space) to maintain accessibility
-        link.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                
-                const targetSection = document.getElementById(sectionId);
-                if (targetSection) {
-                    targetSection.scrollIntoView({ behavior: 'smooth' });
-                    // Allow focus for keyboard users
-                    targetSection.focus();
-                }
-            }
-        });
+        // Ensure sections are focusable for keyboard users but use CSS to control focus visibility
+        const targetSection = document.getElementById(sectionId);
+        if (targetSection) {
+            targetSection.setAttribute('tabindex', '-1');
+            // Use focus-visible to only show outline for keyboard focus
+            targetSection.style.outline = 'none';
+            targetSection.style.setProperty('outline', 'none', 'important');
+        }
 
         // Add item to the TOC list
         tocList.appendChild(tocItem);