Bladeren bron

Fix collapsible menus not working in Firefox on settings page

Replace inline onclick handlers with addEventListener for cross-browser
compatibility. Firefox has issues with inline onclick when combined with
user-select: none and flexbox layouts. Also adds keyboard accessibility
(Enter/Space keys) for section headers.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
tuanchris 4 weken geleden
bovenliggende
commit
eee97ddfce
1 gewijzigde bestanden met toevoegingen van 31 en 0 verwijderingen
  1. 31 0
      static/js/settings.js

+ 31 - 0
static/js/settings.js

@@ -16,6 +16,37 @@ function toggleSection(headerElement) {
     }
 }
 
+// Initialize section headers with proper event listeners for cross-browser compatibility
+// This fixes Firefox issues where inline onclick handlers may not work reliably
+// with user-select: none and flexbox layouts
+function initializeSectionHeaders() {
+    const sectionHeaders = document.querySelectorAll('.section-header');
+    sectionHeaders.forEach(header => {
+        // Remove inline onclick to prevent double-firing
+        header.removeAttribute('onclick');
+
+        // Add click event listener (more reliable than inline onclick in Firefox)
+        header.addEventListener('click', function(e) {
+            // Prevent text selection on double-click
+            e.preventDefault();
+            toggleSection(this);
+        });
+
+        // Also handle keyboard accessibility
+        header.setAttribute('role', 'button');
+        header.setAttribute('tabindex', '0');
+        header.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                toggleSection(this);
+            }
+        });
+    });
+}
+
+// Initialize on DOM ready
+document.addEventListener('DOMContentLoaded', initializeSectionHeaders);
+
 // ============================================================================
 // Constants and Utilities
 // ============================================================================