@liedekef/ftable 1.1.50 → 1.1.52

package/ftable.esm.js

@@ -1429,7 +1429,10 @@ class FTableFormBuilder {
         // Create display area
         const display = FTableDOMHelper.create('div', {
             className: 'ftable-multiselect-display',
-            parent: container
+            parent: container,
+            attributes: {
+                tabindex: '0'  // Makes it focusable and in tab order
+            }
         });
 
         const selectedDisplay = FTableDOMHelper.create('div', {
@@ -1449,7 +1452,10 @@ class FTableFormBuilder {
             type: 'button',
             className: 'ftable-multiselect-toggle',
             innerHTML: '▼',
-            parent: display
+            parent: display,
+            attributes: {
+                tabindex: '-1' // this skips regular focus when tabbing
+            }
         });
 
         // Dropdown and overlay will be created on demand and appended to body
@@ -1524,6 +1530,7 @@ class FTableFormBuilder {
 
         // Function to close dropdown
         const closeDropdown = () => {
+            display.focus(); // Return focus to the trigger
             if (dropdown) {
                 dropdown.remove();
                 dropdown = null;
@@ -1558,7 +1565,7 @@ class FTableFormBuilder {
             dropdown.style.zIndex = '10000';
 
             // Adjust horizontal position if needed
-	    const dropdownRect = dropdown.getBoundingClientRect();
+            const dropdownRect = dropdown.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             if (dropdownRect.right > viewportWidth) {
                 left = Math.max(10, viewportWidth - dropdownRect.width - 10);
@@ -1643,7 +1650,12 @@ class FTableFormBuilder {
                 // Create dropdown
                 dropdown = FTableDOMHelper.create('div', {
                     className: 'ftable-multiselect-dropdown',
-                    parent: document.body
+                    parent: document.body,
+                    attributes: {
+                        tabindex: '-1',
+                        role: 'listbox',
+                        'aria-multiselectable': 'true'
+                    }
                 });
 
                 // Populate options
@@ -1652,6 +1664,37 @@ class FTableFormBuilder {
                 // Position dropdown
                 positionDropdown();
 
+                // dropdown focus
+                dropdown.focus();
+
+                // Add keyboard navigation
+                dropdown.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        closeDropdown();
+                    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        // Navigate between options
+                        const checkboxes = Array.from(dropdown.querySelectorAll('.ftable-multiselect-checkbox'));
+                        const current = document.activeElement;
+                        const currentIndex = checkboxes.indexOf(current);
+
+                        let nextIndex;
+                        if (e.key === 'ArrowDown') {
+                            nextIndex = currentIndex < checkboxes.length - 1 ? currentIndex + 1 : 0;
+                        } else {
+                            nextIndex = currentIndex > 0 ? currentIndex - 1 : checkboxes.length - 1;
+                        }
+
+                        checkboxes[nextIndex].focus();
+                    } else if (e.key === ' ' || e.key === 'Enter') {
+                        e.preventDefault();
+                        // Toggle the focused checkbox
+                        if (document.activeElement.classList.contains('ftable-multiselect-checkbox')) {
+                            document.activeElement.click();
+                        }
+                    }
+                });
+
                 // Handle clicks outside
                 dropdownOverlay.addEventListener('click', (event) => {
                     if (event.target === dropdownOverlay) {
@@ -1661,19 +1704,36 @@ class FTableFormBuilder {
 
                 // Reposition on scroll/resize
                 const repositionHandler = () => positionDropdown();
-                window.addEventListener('scroll', repositionHandler, true);
+                const scrollHandler = (e) => {
+                    if (dropdown && dropdown.contains(e.target)) {
+                        return; // Allow scrolling inside dropdown
+                    }
+                    positionDropdown();
+                };
+                const selectedResizeObserver = new ResizeObserver(() => {
+                    positionDropdown();
+                });
+                window.addEventListener('scroll', scrollHandler, true);
                 window.addEventListener('resize', repositionHandler);
+                selectedResizeObserver.observe(selectedDisplay);
 
                 // Store cleanup function
                 container._cleanupHandlers = () => {
-                    window.removeEventListener('scroll', repositionHandler, true);
+                    window.removeEventListener('scroll', scrollHandler, true);
                     window.removeEventListener('resize', repositionHandler);
+                    selectedResizeObserver.disconnect();
                 };
             }
         };
 
         display.addEventListener('click', toggleDropdown);
         toggleBtn.addEventListener('click', toggleDropdown);
+        display.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter') {
+                e.preventDefault();
+                toggleDropdown();
+            }
+        });
 
         // Clean up when container is removed from DOM
         const observer = new MutationObserver((mutations) => {
@@ -2732,7 +2792,10 @@ class FTable extends FTableEventEmitter {
         // Create display area
         const display = FTableDOMHelper.create('div', {
             className: 'ftable-multiselect-display',
-            parent: container
+            parent: container,
+            attributes: {
+                tabindex: '0'  // Makes it focusable and in tab order
+            }
         });
 
         const selectedDisplay = FTableDOMHelper.create('div', {
@@ -2752,7 +2815,10 @@ class FTable extends FTableEventEmitter {
             type: 'button',
             className: 'ftable-multiselect-toggle',
             innerHTML: '▼',
-            parent: display
+            parent: display,
+            attributes: {
+                tabindex: '-1' // this skips regular focus when tabbing
+            }
         });
 
         // Dropdown and overlay will be created on demand and appended to body
@@ -2826,6 +2892,7 @@ class FTable extends FTableEventEmitter {
 
         // Function to close dropdown
         const closeDropdown = () => {
+            display.focus(); // Return focus to the trigger
             if (dropdown) {
                 dropdown.remove();
                 dropdown = null;
@@ -2860,7 +2927,7 @@ class FTable extends FTableEventEmitter {
             dropdown.style.zIndex = '10000';
 
             // Adjust horizontal position if needed
-	    const dropdownRect = dropdown.getBoundingClientRect();
+            const dropdownRect = dropdown.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             if (dropdownRect.right > viewportWidth) {
                 left = Math.max(10, viewportWidth - dropdownRect.width - 10);
@@ -2957,7 +3024,12 @@ class FTable extends FTableEventEmitter {
                 // Create dropdown
                 dropdown = FTableDOMHelper.create('div', {
                     className: 'ftable-multiselect-dropdown',
-                    parent: document.body
+                    parent: document.body,
+                    attributes: {
+                        tabindex: '-1',
+                        role: 'listbox',
+                        'aria-multiselectable': 'true'
+                    }
                 });
 
                 // Populate options
@@ -2966,6 +3038,37 @@ class FTable extends FTableEventEmitter {
                 // Position dropdown
                 positionDropdown();
 
+                // dropdown focus
+                dropdown.focus();
+
+                // Add keyboard navigation
+                dropdown.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        closeDropdown();
+                    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        // Navigate between options
+                        const checkboxes = Array.from(dropdown.querySelectorAll('.ftable-multiselect-checkbox'));
+                        const current = document.activeElement;
+                        const currentIndex = checkboxes.indexOf(current);
+
+                        let nextIndex;
+                        if (e.key === 'ArrowDown') {
+                            nextIndex = currentIndex < checkboxes.length - 1 ? currentIndex + 1 : 0;
+                        } else {
+                            nextIndex = currentIndex > 0 ? currentIndex - 1 : checkboxes.length - 1;
+                        }
+
+                        checkboxes[nextIndex].focus();
+                    } else if (e.key === ' ' || e.key === 'Enter') {
+                        e.preventDefault();
+                        // Toggle the focused checkbox
+                        if (document.activeElement.classList.contains('ftable-multiselect-checkbox')) {
+                            document.activeElement.click();
+                        }
+                    }
+                });
+
                 // Handle clicks outside
                 dropdownOverlay.addEventListener('click', (event) => {
                     if (event.target === dropdownOverlay) {
@@ -2975,19 +3078,36 @@ class FTable extends FTableEventEmitter {
 
                 // Reposition on scroll/resize
                 const repositionHandler = () => positionDropdown();
-                window.addEventListener('scroll', repositionHandler, true);
+                const scrollHandler = (e) => {
+                    if (dropdown && dropdown.contains(e.target)) {
+                        return; // Allow scrolling inside dropdown
+                    }
+                    positionDropdown();
+                };
+                const selectedResizeObserver = new ResizeObserver(() => {
+                    positionDropdown();
+                });
+                window.addEventListener('scroll', scrollHandler, true);
                 window.addEventListener('resize', repositionHandler);
+                selectedResizeObserver.observe(selectedDisplay);
 
                 // Store cleanup function
                 container._cleanupHandlers = () => {
-                    window.removeEventListener('scroll', repositionHandler, true);
+                    window.removeEventListener('scroll', scrollHandler, true);
                     window.removeEventListener('resize', repositionHandler);
+                    selectedResizeObserver.disconnect();
                 };
             }
         };
 
         display.addEventListener('click', toggleDropdown);
         toggleBtn.addEventListener('click', toggleDropdown);
+        display.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter') {
+                e.preventDefault();
+                toggleDropdown();
+            }
+        });
 
         // Add reset method to container
         container.resetMultiSelect = () => {

package/ftable.js

@@ -1430,7 +1430,10 @@ class FTableFormBuilder {
         // Create display area
         const display = FTableDOMHelper.create('div', {
             className: 'ftable-multiselect-display',
-            parent: container
+            parent: container,
+            attributes: {
+                tabindex: '0'  // Makes it focusable and in tab order
+            }
         });
 
         const selectedDisplay = FTableDOMHelper.create('div', {
@@ -1450,7 +1453,10 @@ class FTableFormBuilder {
             type: 'button',
             className: 'ftable-multiselect-toggle',
             innerHTML: '▼',
-            parent: display
+            parent: display,
+            attributes: {
+                tabindex: '-1' // this skips regular focus when tabbing
+            }
         });
 
         // Dropdown and overlay will be created on demand and appended to body
@@ -1525,6 +1531,7 @@ class FTableFormBuilder {
 
         // Function to close dropdown
         const closeDropdown = () => {
+            display.focus(); // Return focus to the trigger
             if (dropdown) {
                 dropdown.remove();
                 dropdown = null;
@@ -1559,7 +1566,7 @@ class FTableFormBuilder {
             dropdown.style.zIndex = '10000';
 
             // Adjust horizontal position if needed
-	    const dropdownRect = dropdown.getBoundingClientRect();
+            const dropdownRect = dropdown.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             if (dropdownRect.right > viewportWidth) {
                 left = Math.max(10, viewportWidth - dropdownRect.width - 10);
@@ -1644,7 +1651,12 @@ class FTableFormBuilder {
                 // Create dropdown
                 dropdown = FTableDOMHelper.create('div', {
                     className: 'ftable-multiselect-dropdown',
-                    parent: document.body
+                    parent: document.body,
+                    attributes: {
+                        tabindex: '-1',
+                        role: 'listbox',
+                        'aria-multiselectable': 'true'
+                    }
                 });
 
                 // Populate options
@@ -1653,6 +1665,37 @@ class FTableFormBuilder {
                 // Position dropdown
                 positionDropdown();
 
+                // dropdown focus
+                dropdown.focus();
+
+                // Add keyboard navigation
+                dropdown.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        closeDropdown();
+                    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        // Navigate between options
+                        const checkboxes = Array.from(dropdown.querySelectorAll('.ftable-multiselect-checkbox'));
+                        const current = document.activeElement;
+                        const currentIndex = checkboxes.indexOf(current);
+
+                        let nextIndex;
+                        if (e.key === 'ArrowDown') {
+                            nextIndex = currentIndex < checkboxes.length - 1 ? currentIndex + 1 : 0;
+                        } else {
+                            nextIndex = currentIndex > 0 ? currentIndex - 1 : checkboxes.length - 1;
+                        }
+
+                        checkboxes[nextIndex].focus();
+                    } else if (e.key === ' ' || e.key === 'Enter') {
+                        e.preventDefault();
+                        // Toggle the focused checkbox
+                        if (document.activeElement.classList.contains('ftable-multiselect-checkbox')) {
+                            document.activeElement.click();
+                        }
+                    }
+                });
+
                 // Handle clicks outside
                 dropdownOverlay.addEventListener('click', (event) => {
                     if (event.target === dropdownOverlay) {
@@ -1662,19 +1705,36 @@ class FTableFormBuilder {
 
                 // Reposition on scroll/resize
                 const repositionHandler = () => positionDropdown();
-                window.addEventListener('scroll', repositionHandler, true);
+                const scrollHandler = (e) => {
+                    if (dropdown && dropdown.contains(e.target)) {
+                        return; // Allow scrolling inside dropdown
+                    }
+                    positionDropdown();
+                };
+                const selectedResizeObserver = new ResizeObserver(() => {
+                    positionDropdown();
+                });
+                window.addEventListener('scroll', scrollHandler, true);
                 window.addEventListener('resize', repositionHandler);
+                selectedResizeObserver.observe(selectedDisplay);
 
                 // Store cleanup function
                 container._cleanupHandlers = () => {
-                    window.removeEventListener('scroll', repositionHandler, true);
+                    window.removeEventListener('scroll', scrollHandler, true);
                     window.removeEventListener('resize', repositionHandler);
+                    selectedResizeObserver.disconnect();
                 };
             }
         };
 
         display.addEventListener('click', toggleDropdown);
         toggleBtn.addEventListener('click', toggleDropdown);
+        display.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter') {
+                e.preventDefault();
+                toggleDropdown();
+            }
+        });
 
         // Clean up when container is removed from DOM
         const observer = new MutationObserver((mutations) => {
@@ -2733,7 +2793,10 @@ class FTable extends FTableEventEmitter {
         // Create display area
         const display = FTableDOMHelper.create('div', {
             className: 'ftable-multiselect-display',
-            parent: container
+            parent: container,
+            attributes: {
+                tabindex: '0'  // Makes it focusable and in tab order
+            }
         });
 
         const selectedDisplay = FTableDOMHelper.create('div', {
@@ -2753,7 +2816,10 @@ class FTable extends FTableEventEmitter {
             type: 'button',
             className: 'ftable-multiselect-toggle',
             innerHTML: '▼',
-            parent: display
+            parent: display,
+            attributes: {
+                tabindex: '-1' // this skips regular focus when tabbing
+            }
         });
 
         // Dropdown and overlay will be created on demand and appended to body
@@ -2827,6 +2893,7 @@ class FTable extends FTableEventEmitter {
 
         // Function to close dropdown
         const closeDropdown = () => {
+            display.focus(); // Return focus to the trigger
             if (dropdown) {
                 dropdown.remove();
                 dropdown = null;
@@ -2861,7 +2928,7 @@ class FTable extends FTableEventEmitter {
             dropdown.style.zIndex = '10000';
 
             // Adjust horizontal position if needed
-	    const dropdownRect = dropdown.getBoundingClientRect();
+            const dropdownRect = dropdown.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             if (dropdownRect.right > viewportWidth) {
                 left = Math.max(10, viewportWidth - dropdownRect.width - 10);
@@ -2958,7 +3025,12 @@ class FTable extends FTableEventEmitter {
                 // Create dropdown
                 dropdown = FTableDOMHelper.create('div', {
                     className: 'ftable-multiselect-dropdown',
-                    parent: document.body
+                    parent: document.body,
+                    attributes: {
+                        tabindex: '-1',
+                        role: 'listbox',
+                        'aria-multiselectable': 'true'
+                    }
                 });
 
                 // Populate options
@@ -2967,6 +3039,37 @@ class FTable extends FTableEventEmitter {
                 // Position dropdown
                 positionDropdown();
 
+                // dropdown focus
+                dropdown.focus();
+
+                // Add keyboard navigation
+                dropdown.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        closeDropdown();
+                    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        // Navigate between options
+                        const checkboxes = Array.from(dropdown.querySelectorAll('.ftable-multiselect-checkbox'));
+                        const current = document.activeElement;
+                        const currentIndex = checkboxes.indexOf(current);
+
+                        let nextIndex;
+                        if (e.key === 'ArrowDown') {
+                            nextIndex = currentIndex < checkboxes.length - 1 ? currentIndex + 1 : 0;
+                        } else {
+                            nextIndex = currentIndex > 0 ? currentIndex - 1 : checkboxes.length - 1;
+                        }
+
+                        checkboxes[nextIndex].focus();
+                    } else if (e.key === ' ' || e.key === 'Enter') {
+                        e.preventDefault();
+                        // Toggle the focused checkbox
+                        if (document.activeElement.classList.contains('ftable-multiselect-checkbox')) {
+                            document.activeElement.click();
+                        }
+                    }
+                });
+
                 // Handle clicks outside
                 dropdownOverlay.addEventListener('click', (event) => {
                     if (event.target === dropdownOverlay) {
@@ -2976,19 +3079,36 @@ class FTable extends FTableEventEmitter {
 
                 // Reposition on scroll/resize
                 const repositionHandler = () => positionDropdown();
-                window.addEventListener('scroll', repositionHandler, true);
+                const scrollHandler = (e) => {
+                    if (dropdown && dropdown.contains(e.target)) {
+                        return; // Allow scrolling inside dropdown
+                    }
+                    positionDropdown();
+                };
+                const selectedResizeObserver = new ResizeObserver(() => {
+                    positionDropdown();
+                });
+                window.addEventListener('scroll', scrollHandler, true);
                 window.addEventListener('resize', repositionHandler);
+                selectedResizeObserver.observe(selectedDisplay);
 
                 // Store cleanup function
                 container._cleanupHandlers = () => {
-                    window.removeEventListener('scroll', repositionHandler, true);
+                    window.removeEventListener('scroll', scrollHandler, true);
                     window.removeEventListener('resize', repositionHandler);
+                    selectedResizeObserver.disconnect();
                 };
             }
         };
 
         display.addEventListener('click', toggleDropdown);
         toggleBtn.addEventListener('click', toggleDropdown);
+        display.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter') {
+                e.preventDefault();
+                toggleDropdown();
+            }
+        });
 
         // Add reset method to container
         container.resetMultiSelect = () => {