mtrl 0.2.5 → 0.2.6

package/src/components/slider/features/interactions.ts

@@ -42,9 +42,107 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     triggerEvent = () => ({ defaultPrevented: false })
   } = handlers;
   
-  // Event handlers
+  /**
+   * Clear any existing bubble hide timers
+   */
+  const clearBubbleHideTimer = () => {
+    if (state.valueHideTimer) {
+      clearTimeout(state.valueHideTimer);
+      state.valueHideTimer = null;
+    }
+  };
+  
+  /**
+   * Hide all bubbles immediately
+   */
+  const hideAllBubbles = () => {
+    // Clear any pending hide timers
+    clearBubbleHideTimer();
+    
+    // Hide both bubbles immediately
+    if (valueBubble) {
+      showValueBubble(valueBubble, false);
+    }
+    if (secondValueBubble) {
+      showValueBubble(secondValueBubble, false);
+    }
+  };
+  
+  /**
+   * Clear keyboard focus indicators across all sliders in the document
+   * Not just for this instance, but for any slider thumb
+   */
+  const clearGlobalKeyboardFocus = () => {
+    // First clear local focus indicators
+    if (thumb) {
+      thumb.classList.remove(`${state.component.getClass('slider-thumb')}--focused`);
+    }
+    
+    if (secondThumb) {
+      secondThumb.classList.remove(`${state.component.getClass('slider-thumb')}--focused`);
+    }
+    
+    // Now look for all slider thumbs in the document with the focused class
+    // This covers cases where we switch between sliders
+    try {
+      const focusClass = state.component.getClass('slider-thumb--focused');
+      const allFocusedThumbs = document.querySelectorAll(`.${focusClass}`);
+      
+      // Remove focus class from all thumbs
+      allFocusedThumbs.forEach(element => {
+        element.classList.remove(focusClass);
+      });
+      
+      // Also blur the active element if it's a thumb
+      if (document.activeElement && 
+          document.activeElement.classList.contains(state.component.getClass('slider-thumb'))) {
+        (document.activeElement as HTMLElement).blur();
+      }
+    } catch (error) {
+      console.warn('Error clearing global keyboard focus:', error);
+    }
+  };
+  
+  /**
+   * Show the active bubble with consistent behavior
+   * @param bubble Bubble element to show
+   */
+  const showActiveBubble = (bubble) => {
+    // First hide all bubbles
+    hideAllBubbles();
+    
+    // Then show the active bubble if allowed by config
+    if (bubble && config.showValue) {
+      showValueBubble(bubble, true);
+    }
+  };
+  
+  /**
+   * Hide the active bubble with optional delay
+   * @param bubble Bubble element to hide
+   * @param delay Delay in milliseconds before hiding
+   */
+  const hideActiveBubble = (bubble, delay = 0) => {
+    // Clear any existing timers first
+    clearBubbleHideTimer();
+    
+    if (!bubble || !config.showValue) return;
+    
+    if (delay > 0) {
+      // Set delayed hide
+      state.valueHideTimer = setTimeout(() => {
+        showValueBubble(bubble, false);
+      }, delay);
+    } else {
+      // Hide immediately
+      showValueBubble(bubble, false);
+    }
+  };
+  
+  /**
+   * Handle thumb mouse down with improved bubble handling
+   */
   const handleThumbMouseDown = (e, isSecondThumb = false) => {
-    console.log('handleThumbMouseDown', e)
     // Verify component exists and check if disabled
     if (!state.component || (state.component.disabled && state.component.disabled.isDisabled())) {
       return;
@@ -53,6 +151,12 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     e.preventDefault();
     e.stopPropagation();
     
+    // First hide any existing visible bubbles
+    hideAllBubbles();
+    
+    // Clear any keyboard focus indicators globally
+    clearGlobalKeyboardFocus();
+    
     state.dragging = true;
     state.activeThumb = isSecondThumb ? secondThumb : thumb;
     state.activeBubble = isSecondThumb ? secondValueBubble : valueBubble;
@@ -60,10 +164,8 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     // Add dragging class to component element to style the thumb differently
     state.component.element.classList.add(`${state.component.getClass('slider')}--dragging`);
     
-    // Show value bubble if it exists
-    if (state.activeBubble) {
-      showValueBubble(state.activeBubble, true);
-    }
+    // Show active bubble
+    showActiveBubble(state.activeBubble);
     
     // Add global event listeners
     document.addEventListener('mousemove', handleMouseMove);
@@ -79,6 +181,9 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     }
   };
   
+  /**
+   * Handle track mouse down with improved bubble handling
+   */
   const handleTrackMouseDown = (e) => {
     // Verify component exists and check if disabled
     if (!state.component || (state.component.disabled && state.component.disabled.isDisabled()) || !track) {
@@ -87,6 +192,12 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     
     e.preventDefault();
     
+    // Hide any existing visible bubbles
+    hideAllBubbles();
+    
+    // Clear any keyboard focus indicators globally
+    clearGlobalKeyboardFocus();
+    
     // Determine which thumb to move based on click position
     let isSecondThumb = false;
     
@@ -146,6 +257,9 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     handleThumbMouseDown(e, isSecondThumb);
   };
   
+  /**
+   * Handle mouse move with improved thumb and bubble switching
+   */
   const handleMouseMove = (e) => {
     if (!state.dragging || !state.activeThumb) return;
     
@@ -174,30 +288,50 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
       // For range slider, ensure thumbs don't cross
       if (config.range && state.secondValue !== null) {
         if (isSecondThumb) {
+          // Second thumb is active
+          
           // Don't allow second thumb to go below first thumb
-          if (newValue < state.value) {
+          if (newValue >= state.value) {
             state.secondValue = newValue;
           } else {
-            // Thumbs are crossed, swap them
+            // Thumbs are crossed, need to swap them
+            
+            // First hide current bubble
+            hideActiveBubble(state.activeBubble, 0);
+            
+            // Swap values
             state.secondValue = state.value;
             state.value = newValue;
             
-            // Swap active thumb and bubble
+            // Swap active elements
             state.activeThumb = thumb;
             state.activeBubble = valueBubble;
+            
+            // Show new active bubble
+            showActiveBubble(state.activeBubble);
           }
         } else {
+          // First thumb is active
+          
           // Don't allow first thumb to go above second thumb
-          if (newValue > state.secondValue) {
+          if (newValue <= state.secondValue) {
             state.value = newValue;
           } else {
-            // Thumbs are crossed, swap them
+            // Thumbs are crossed, need to swap them
+            
+            // First hide current bubble
+            hideActiveBubble(state.activeBubble, 0);
+            
+            // Swap values
             state.value = state.secondValue;
             state.secondValue = newValue;
             
-            // Swap active thumb and bubble
+            // Swap active elements
             state.activeThumb = secondThumb;
             state.activeBubble = secondValueBubble;
+            
+            // Show new active bubble
+            showActiveBubble(state.activeBubble);
           }
         }
       } else {
@@ -215,6 +349,9 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     }
   };
   
+  /**
+   * Handle mouse up with consistent bubble hiding
+   */
   const handleMouseUp = (e) => {
     if (!state.dragging) return;
     
@@ -225,10 +362,9 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     // Remove dragging class from component element
     state.component.element.classList.remove(`${state.component.getClass('slider')}--dragging`);
     
-    // Hide value bubble
-    if (state.activeBubble) {
-      showValueBubble(state.activeBubble, false);
-    }
+    // Hide bubble with delay
+    const currentBubble = state.activeBubble;
+    hideActiveBubble(currentBubble, 1000); // Hide after 1 second
     
     // Remove global event listeners
     document.removeEventListener('mousemove', handleMouseMove);
@@ -236,9 +372,8 @@ export const createInteractionHandlers = (config: SliderConfig, state, handlers)
     document.removeEventListener('touchmove', handleMouseMove);
     document.removeEventListener('touchend', handleMouseUp);
     
-    // Reset active elements
+    // Reset active thumb
     state.activeThumb = null;
-    state.activeBubble = null;
     
     try {
       // Trigger change event (only when done dragging)

package/src/components/slider/features/keyboard.ts

@@ -21,12 +21,73 @@ export const createKeyboardHandlers = (state, handlers) => {
     triggerEvent
   } = handlers;
   
+  // Last focused thumb tracker to handle tab sequences properly
+  let lastFocusedThumb = null;
+  
+  /**
+   * Clear any existing bubble hide timers
+   */
+  const clearBubbleHideTimer = () => {
+    if (state.valueHideTimer) {
+      clearTimeout(state.valueHideTimer);
+      state.valueHideTimer = null;
+    }
+  };
+  
+  /**
+   * Hide all bubbles immediately
+   */
+  const hideAllBubbles = () => {
+    // Clear any pending hide timers
+    clearBubbleHideTimer();
+    
+    // Hide both bubbles immediately
+    if (valueBubble) {
+      showValueBubble(valueBubble, false);
+    }
+    if (secondValueBubble) {
+      showValueBubble(secondValueBubble, false);
+    }
+  };
+  
+  /**
+   * Shows a bubble element with consistent behavior
+   */
+  const showBubble = (bubble) => {
+    // First hide all bubbles
+    hideAllBubbles();
+    
+    // Then show the active bubble
+    if (bubble) {
+      showValueBubble(bubble, true);
+    }
+  };
+  
+  /**
+   * Hides a bubble element with optional delay
+   */
+  const hideBubble = (bubble, delay = 0) => {
+    // Clear any existing timers
+    clearBubbleHideTimer();
+    
+    if (!bubble) return;
+    
+    if (delay > 0) {
+      state.valueHideTimer = setTimeout(() => {
+        showValueBubble(bubble, false);
+      }, delay);
+    } else {
+      showValueBubble(bubble, false);
+    }
+  };
+  
   // Event handlers
   const handleKeyDown = (e, isSecondThumb = false) => {
     if (state.component.disabled && state.component.disabled.isDisabled()) return;
     
     const step = state.step || 1;
     let newValue;
+    let stepSize = step;
     
     // Determine which value to modify
     if (isSecondThumb) {
@@ -35,41 +96,71 @@ export const createKeyboardHandlers = (state, handlers) => {
       newValue = state.value;
     }
     
+    // Handle tab key specifically for range sliders
+    if (e.key === 'Tab') {
+      // Let the browser handle the tab navigation
+      // We'll deal with showing/hiding bubbles in the focus/blur handlers
+      return;
+    }
+    
+    // Determine step size based on modifier keys
+    if (e.shiftKey) {
+      stepSize = step * 10; // Large step when Shift is pressed
+    }
+    
+    let valueChanged = false;
+    
     switch (e.key) {
       case 'ArrowRight':
+      case 'ArrowUp':
         e.preventDefault();
-        newValue = Math.min(newValue + step, state.max);
+        newValue = Math.min(newValue + stepSize, state.max);
+        valueChanged = true;
         break;
         
       case 'ArrowLeft':
+      case 'ArrowDown':
         e.preventDefault();
-        newValue = Math.max(newValue - step, state.min);
+        newValue = Math.max(newValue - stepSize, state.min);
+        valueChanged = true;
         break;
         
       case 'Home':
         e.preventDefault();
         newValue = state.min;
+        valueChanged = true;
         break;
         
       case 'End':
         e.preventDefault();
         newValue = state.max;
+        valueChanged = true;
         break;
         
       case 'PageUp':
         e.preventDefault();
         newValue = Math.min(newValue + (step * 10), state.max);
+        valueChanged = true;
         break;
         
       case 'PageDown':
         e.preventDefault();
         newValue = Math.max(newValue - (step * 10), state.min);
+        valueChanged = true;
         break;
         
       default:
         return; // Exit if not a handled key
     }
     
+    if (!valueChanged) return;
+    
+    // Update active bubble reference
+    state.activeBubble = isSecondThumb ? secondValueBubble : valueBubble;
+    
+    // Show value bubble during keyboard interaction
+    showBubble(state.activeBubble);
+    
     // Update the value
     if (isSecondThumb) {
       state.secondValue = newValue;
@@ -88,16 +179,46 @@ export const createKeyboardHandlers = (state, handlers) => {
   const handleFocus = (e, isSecondThumb = false) => {
     if (state.component.disabled && state.component.disabled.isDisabled()) return;
     
-    // Show value bubble
-    showValueBubble(isSecondThumb ? secondValueBubble : valueBubble, true);
+    // Track the currently focused thumb for tab sequence handling
+    const currentThumb = isSecondThumb ? secondThumb : state.component.structure.thumb;
+    
+    // If we're tabbing between thumbs, hide the previous bubble immediately
+    if (lastFocusedThumb && lastFocusedThumb !== currentThumb) {
+      hideAllBubbles();
+    }
+    
+    // Update the last focused thumb
+    lastFocusedThumb = currentThumb;
+    
+    // Add a class to indicate keyboard focus
+    currentThumb.classList.add(`${state.component.getClass('slider-thumb')}--focused`);
+    
+    // Show value bubble on focus
+    const bubble = isSecondThumb ? secondValueBubble : valueBubble;
+    showBubble(bubble);
+    
+    // Update active bubble reference
+    state.activeBubble = bubble;
     
     // Trigger focus event
     triggerEvent(SLIDER_EVENTS.FOCUS, e);
   };
   
   const handleBlur = (e, isSecondThumb = false) => {
-    // Hide value bubble
-    showValueBubble(isSecondThumb ? secondValueBubble : valueBubble, false);
+    // Remove keyboard focus class
+    const thumb = isSecondThumb ? secondThumb : state.component.structure.thumb;
+    thumb.classList.remove(`${state.component.getClass('slider-thumb')}--focused`);
+    
+    // Only hide the bubble if we're not tabbing to another thumb
+    // This check prevents the bubble from flickering when tabbing between thumbs
+    const relatedTarget = e.relatedTarget;
+    const otherThumb = isSecondThumb ? state.component.structure.thumb : secondThumb;
+    
+    if (!relatedTarget || relatedTarget !== otherThumb) {
+      // We're not tabbing to the other thumb, so we can hide the bubble
+      const bubble = isSecondThumb ? secondValueBubble : valueBubble;
+      hideBubble(bubble, 200);
+    }
     
     // Trigger blur event
     triggerEvent(SLIDER_EVENTS.BLUR, e);

package/src/components/slider/features/structure.ts

@@ -3,7 +3,7 @@ import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
 import { SliderConfig } from '../types';
 
 /**
- * Creates the slider DOM structure following MD3 principles
+ * Creates the slider DOM structure following MD3 principles with improved accessibility
  * @param config Slider configuration
  * @returns Component enhancer with DOM structure
  */
@@ -15,6 +15,7 @@ export const withStructure = (config: SliderConfig) => component => {
   const value = config.value !== undefined ? config.value : min;
   const secondValue = config.secondValue !== undefined ? config.secondValue : null;
   const isRangeSlider = config.range && secondValue !== null;
+  const isDisabled = config.disabled === true;
   
   // Helper function to calculate percentage
   const getPercentage = (val) => ((val - min) / range) * 100;
@@ -41,10 +42,19 @@ export const withStructure = (config: SliderConfig) => component => {
   const valueBubble = createElement('slider-value');
   valueBubble.textContent = formatter(value);
   
-  // Create thumb element
+  // Create thumb element with improved accessibility attributes
   const thumb = createElement('slider-thumb');
-  thumb.setAttribute('tabindex', '0');
   thumb.setAttribute('role', 'slider');
+  thumb.setAttribute('aria-valuemin', String(min));
+  thumb.setAttribute('aria-valuemax', String(max));
+  thumb.setAttribute('aria-valuenow', String(value));
+  thumb.setAttribute('aria-orientation', 'horizontal');
+  
+  // Set tabindex based on disabled state
+  thumb.setAttribute('tabindex', isDisabled ? '-1' : '0');
+  if (isDisabled) {
+    thumb.setAttribute('aria-disabled', 'true');
+  }
   
   // Set initial thumb position
   thumb.style.left = `${valuePercent}%`;
@@ -60,8 +70,17 @@ export const withStructure = (config: SliderConfig) => component => {
   
   if (isRangeSlider) {
     secondThumb = createElement('slider-thumb');
-    secondThumb.setAttribute('tabindex', '0');
     secondThumb.setAttribute('role', 'slider');
+    secondThumb.setAttribute('aria-valuemin', String(min));
+    secondThumb.setAttribute('aria-valuemax', String(max));
+    secondThumb.setAttribute('aria-valuenow', String(secondValue));
+    secondThumb.setAttribute('aria-orientation', 'horizontal');
+    
+    // Set tabindex based on disabled state
+    secondThumb.setAttribute('tabindex', isDisabled ? '-1' : '0');
+    if (isDisabled) {
+      secondThumb.setAttribute('aria-disabled', 'true');
+    }
     
     const secondPercent = getPercentage(secondValue);
     secondThumb.style.left = `${secondPercent}%`;
@@ -80,6 +99,14 @@ export const withStructure = (config: SliderConfig) => component => {
   
   // Add elements to the slider
   component.element.classList.add(component.getClass('slider'));
+  
+  // Accessibility enhancement: Container is not focusable
+  component.element.setAttribute('tabindex', '-1');
+  
+  // Set container aria attributes
+  component.element.setAttribute('role', 'none');
+  component.element.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
+  
   component.element.appendChild(track);
   component.element.appendChild(ticksContainer); // Add ticks container
   component.element.appendChild(startDot);
@@ -217,7 +244,7 @@ export const withStructure = (config: SliderConfig) => component => {
     }
     
     // Apply disabled class if needed
-    if (config.disabled) {
+    if (isDisabled) {
       component.element.classList.add(`${baseClass}--disabled`);
     }
   }

package/src/components/slider/features/ui.ts

@@ -180,15 +180,25 @@ export const createUiHelpers = (config: SliderConfig, state) => {
       const adjustedLower = mapValueToVisualPercent(lowerPercent, edgeConstraint) + paddingPercent;
       const adjustedHigher = mapValueToVisualPercent(higherPercent, edgeConstraint) - paddingPercent;
       
-      let trackLength = Math.max(0, adjustedHigher - adjustedLower);
-      if (higherPercent - lowerPercent < paddingPercent * 2) {
-        trackLength = Math.max(0, higherPercent - lowerPercent);
-      }
+      // Calculate the actual percentage difference between thumbs
+      const valueDiffPercent = Math.abs(higherPercent - lowerPercent);
       
-      activeTrack.style.display = 'block';
-      activeTrack.style.width = `${trackLength}%`;
-      activeTrack.style.left = `${adjustedLower}%`;
-      activeTrack.style.height = '100%';
+      // Define a threshold below which we'll hide the active track
+      // This threshold is based on the thumb width plus some margin
+      const hideThreshold = (thumbSize / trackSize) * 100;
+      
+      if (valueDiffPercent <= hideThreshold) {
+        // Thumbs are too close together, hide the active track
+        activeTrack.style.display = 'none';
+      } else {
+        // Normal display of active track
+        let trackLength = Math.max(0, adjustedHigher - adjustedLower);
+        
+        activeTrack.style.display = 'block';
+        activeTrack.style.width = `${trackLength}%`;
+        activeTrack.style.left = `${adjustedLower}%`;
+        activeTrack.style.height = '100%';
+      }
     } else {
       // Single thumb slider
       const valuePercent = getPercentage(state.value);