mtrl 0.2.4 → 0.2.6

package/src/components/slider/_styles.scss

@@ -5,6 +5,9 @@
 @use '../../styles/abstract/mixins' as m;
 @use '../../styles/abstract/theme' as t;
 
+// $transform: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
+$transform: none;
+
 $component: '#{base.$prefix}-slider';
 
 .#{$component} {
@@ -17,6 +20,11 @@ $component: '#{base.$prefix}-slider';
   user-select: none;
   touch-action: none;
   
+  // Container should not have a focus outline
+  &:focus {
+    outline: none;
+  }
+  
   &-track {
     position: relative;
     width: 100%;
@@ -33,8 +41,127 @@ $component: '#{base.$prefix}-slider';
       cursor: not-allowed;
     }
   }
-  
-  // Start track (new element for range slider - beginning to first thumb)
+ 
+  // Thumb - updated with T-shape and proper focus styles
+  &-thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    z-index: 4;
+    padding: 4px 0;
+    transition: $transform;
+    width: 16px;
+    height: 50px;
+    border-radius: 16px;
+    background-color: rgba(red, .0);
+
+    // Focus styles for keyboard navigation
+    &:focus {
+      outline: 2px solid t.color('outline');
+    }
+    
+    // Class added when focused via keyboard
+    &--focused {
+      // Additional styling when focused
+    }
+
+    // Create a T-shaped thumb using pseudo-elements
+    &::before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      width: 4px;
+      height: 40px;
+      background-color: t.color('primary');
+      border-radius: 2px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      transition: background-color 0.15s ease, width 0.15s ease;
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+      
+      .#{$component}--disabled & {
+        background-color: t.color('on-surface');
+        opacity: 0.38;
+      }
+    }
+    
+    // Enable pointer events on the pseudo-element
+    &::before {
+      pointer-events: auto;
+    }
+    
+    // Make thumb line slimmer during dragging (feedback)
+    .#{$component}--dragging & {
+      &::before {
+        width: 3px;
+      }
+    }
+    
+    // Hover state
+    &:hover::before {
+      background-color: t.color('primary');
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+      
+      .#{$component}--disabled & {
+        background-color: t.color('on-surface');
+        opacity: 0.38;
+      }
+    }
+    
+    // Active state
+    &:active::before {
+      background-color: t.color('primary');
+      width: 3px; // Shrink width when active for visual feedback
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+    }
+    
+    // Disabled state
+    .#{$component}--disabled & {
+      cursor: not-allowed;
+      
+      &::before {
+        opacity: 0.38;
+        background-color: t.color('on-surface');
+      }
+    }
+  }
+
+  // Start track (for range slider)
   &-start-track {
     position: absolute;
     top: 0;
@@ -42,8 +169,8 @@ $component: '#{base.$prefix}-slider';
     height: 100%;
     background-color: t.color('primary');
     transform-origin: left center;
-    // transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease;
-    border-radius: 5px;
+    transition: $transform;
+    border-radius: 2px;
     opacity: 0.24;
     z-index: 1;
     
@@ -71,8 +198,8 @@ $component: '#{base.$prefix}-slider';
     height: 100%;
     background-color: t.color('primary');
     transform-origin: left center;
-    // transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease, left 0.1s ease, bottom 0.1s ease;
-    border-radius: 5px;
+    transition: $transform;
+    border-radius: 2px;
     z-index: 1;
 
     .#{$component}--secondary & {
@@ -88,7 +215,7 @@ $component: '#{base.$prefix}-slider';
     }
   }
   
-  // Remaining track (unfilled part) - new for MD3
+  // Remaining track (unfilled part)
   &-remaining-track {
     opacity: .24;
     position: absolute;
@@ -96,8 +223,8 @@ $component: '#{base.$prefix}-slider';
     height: 100%;
     background-color: t.color('primary');
     transform-origin: left center;
-    // transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease, left 0.1s ease, bottom 0.1s ease;
-    border-radius: 5px;
+    transition: $transform;
+    border-radius: 2px;
     width: 100%;
     z-index: 0;
     
@@ -118,140 +245,34 @@ $component: '#{base.$prefix}-slider';
     }
   }
   
-  // Dot elements for track ends (separate from thumbs)
+  // Dot elements for track ends (visual anchors for accessibility)
   &-dot {
     pointer-events: none;
     position: absolute;
     width: 4px;
     height: 4px;
     border-radius: 50%;
-    background-color: t.color('primary');
     top: 50%;
     transform: translateY(-50%);
     z-index: 1;
     
     // Start dot
     &--start {
-      left: 4px;
-    }
-    
-    // End dot
-    &--end {
-      right: 4px;
-    }
-    
-    // Color variants
-    .#{$component}--secondary & {
-      background-color: t.color('secondary');
-    }
-    
-    .#{$component}--tertiary & {
-      background-color: t.color('tertiary');
-    }
-    
-    .#{$component}--error & {
-      background-color: t.color('error');
-    }
-    
-    // Disabled state
-    .#{$component}--disabled & {
-      opacity: 0.38;
-    }
-  }
-  
-  // Thumb - updated to MD3 style with T-shape
-  &-thumb {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
-    z-index: 2;
-    // transition: left 0.1s ease, bottom 0.1s ease;
-    width: 16px;
-    height: 100%;
-
-    // Create a T-shaped thumb using pseudo-elements
-    &::before {
-      pointer-events: none;
-      content: '';
-      position: absolute;
-      width: 4px;
-      height: 40px;
-      background-color: t.color('primary');
-      border-radius: 2px;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      transition: background-color 0.15s ease;
-      
-      .#{$component}--secondary & {
-        background-color: t.color('secondary');
-      }
-      
-      .#{$component}--tertiary & {
-        background-color: t.color('tertiary');
-      }
-      
-      .#{$component}--error & {
-        background-color: t.color('error');
-      }
-      
-      .#{$component}--disabled & {
-        background-color: t.color('on-surface');
-        opacity: 0.38;
-      }
-    }
-    
-    // Enable pointer events on the pseudo-elements
-    &::before, &::after {
-      pointer-events: auto;
-    }
-    
-    // Hover state
-    &:hover::before, &:hover::after {
-      background-color: t.color('primary');
-      
-      .#{$component}--secondary & {
-        background-color: t.color('secondary');
-      }
-      
-      .#{$component}--tertiary & {
-        background-color: t.color('tertiary');
-      }
-      
-      .#{$component}--error & {
-        background-color: t.color('error');
-      }
-      
-      .#{$component}--disabled & {
-        background-color: t.color('on-surface');
-        opacity: 0.38;
-      }
-    }
-    
-    // Focus state
-    &:focus {
-      outline: none;
-    }
-    
-    &:focus::before, &:focus::after {
-      background-color: t.color('primary');
+      left: 6px;
+      background-color: t.color('on-primary');
       
       .#{$component}--secondary & {
-        background-color: t.color('secondary');
+        background-color: t.color('on-secondary');
       }
       
       .#{$component}--tertiary & {
-        background-color: t.color('tertiary');
-      }
-      
-      .#{$component}--error & {
-        background-color: t.color('error');
+        background-color: t.color('on-tertiary');
       }
     }
     
-    // Active state
-    &:active::before, &:active::after {
+    // End dot
+    &--end {
+      right: 6px;
       background-color: t.color('primary');
       
       .#{$component}--secondary & {
@@ -261,23 +282,25 @@ $component: '#{base.$prefix}-slider';
       .#{$component}--tertiary & {
         background-color: t.color('tertiary');
       }
-      
-      .#{$component}--error & {
-        background-color: t.color('error');
-      }
     }
     
-    // Disabled state
     .#{$component}--disabled & {
-      cursor: not-allowed;
-      
-      &::before, &::after {
-        opacity: 0.38;
-        background-color: t.color('on-surface');
-      }
+      opacity: 0.38;
     }
   }
   
+  
+  // Container for ticks
+  &-ticks-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: 3;
+  }
+  
   // Tick marks
   &-tick {
     position: absolute;
@@ -288,7 +311,7 @@ $component: '#{base.$prefix}-slider';
     top: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
-    opacity: 0.6;
+    opacity: 1;
     
     &:last-child, &:first-child {
       display: none
@@ -296,35 +319,37 @@ $component: '#{base.$prefix}-slider';
 
     // Active tick (filled)
     &--active {
-      background-color: t.alpha('on-primary', 0.38);
+      background-color: t.color('on-primary');
       
       .#{$component}--secondary & {
-        background-color: t.alpha('on-secondary', 0.38);
+        background-color: t.color('on-secondary');
       }
       
       .#{$component}--tertiary & {
-        background-color: t.alpha('on-tertiary', 0.38);
+        background-color: t.color('on-tertiary');
+      }
+    }
+    
+    // Inactive tick (unfilled)
+    &--inactive {
+      background-color: t.color('primary');
+
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
       }
       
-      .#{$component}--error & {
-        background-color: t.alpha('on-error', 0.38);
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
       }
     }
+
+     // Hidden tick
+    &--hidden {
+      opacity: 0
+    }
   }
   
-  // Labels for tick marks
-  &-label {
-    position: absolute;
-    font-size: 12px;
-    color: t.color('on-surface-variant');
-    top: 45px;
-    transform: translateX(-50%);
-    white-space: nowrap;
-    pointer-events: none;
-    font-weight: 500;
-  }
-  
-  // Range slider styles (for two thumbs)
+  // Range slider styles
   &--range {
     .#{$component}-thumb {
       &:nth-of-type(1) {
@@ -338,24 +363,24 @@ $component: '#{base.$prefix}-slider';
     }
   }
   
-  // Value bubble (shows current value when dragging)
+  // Value bubble - shows current value during interaction
   &-value {
     position: absolute;
     top: -40px;
     left: 0;
     background-color: t.color('on-surface');
     color: t.color('surface-container-highest');
-    padding: 6px 10px;
+    padding: 6px 12px;
     border-radius: 21px;
-    font-size: 12px;
-    font-weight: 500;
+    font-size: 14px;
+    font-weight: 600;
     transform: translateX(-50%);
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.2s ease, visibility 0s linear 0.2s;
     pointer-events: none;
     
-    // Show value when dragging
+    // Show value when interacting
     &--visible {
       visibility: visible;
       opacity: 1;
@@ -363,88 +388,6 @@ $component: '#{base.$prefix}-slider';
     }
   }
   
-  // Vertical orientation
-  &--vertical {
-    width: 40px;
-    height: 200px;
-    flex-direction: column;
-    
-    .#{$component}-track {
-      width: 16px;
-      height: 100%;
-      padding: 0;
-    }
-    
-    .#{$component}-active-track {
-      width: 100%;
-      height: auto;
-      transform-origin: bottom center;
-    }
-    
-    .#{$component}-start-track {
-      width: 100%;
-      height: auto;
-      transform-origin: bottom center;
-    }
-    
-    .#{$component}-remaining-track {
-      width: 100%;
-      bottom: auto;
-      top: 0;
-      transform-origin: bottom center;
-    }
-    
-    // Reorient thumb for vertical slider
-    .#{$component}-thumb {
-      &::before {
-        width: 40px;
-        height: 4px;
-      }
-      
-      &::after {
-        width: 16px;
-        height: 16px;
-        top: 50%;
-        left: 0;
-        transform: translate(0, -50%);
-      }
-      
-      transform: translate(-50%, 50%);
-    }
-    
-    // Dots for vertical orientation
-    .#{$component}-dot {
-      left: 50%;
-      top: auto;
-      transform: translateX(-50%);
-      
-      &--start {
-        bottom: 0;
-      }
-      
-      &--end {
-        top: 0;
-      }
-    }
-    
-    .#{$component}-tick {
-      left: 50%;
-      transform: translate(-50%, 50%);
-    }
-    
-    .#{$component}-label {
-      top: auto;
-      left: 35px;
-      transform: translateY(50%);
-    }
-    
-    .#{$component}-value {
-      top: auto;
-      left: -55px;
-      transform: translateY(50%);
-    }
-  }
-  
   // Discrete slider with steps
   &--discrete {
     .#{$component}-tick {
@@ -461,27 +404,6 @@ $component: '#{base.$prefix}-slider';
       &::before {
         height: 34px;
       }
-      
-      &::after {
-        width: 14px;
-        height: 14px;
-      }
-    }
-    
-    &.#{$component}--vertical {
-      width: 32px;
-      
-      .#{$component}-thumb {
-        &::before {
-          width: 34px;
-          height: 3px;
-        }
-        
-        &::after {
-          width: 14px;
-          height: 14px;
-        }
-      }
     }
   }
   
@@ -492,27 +414,17 @@ $component: '#{base.$prefix}-slider';
       &::before {
         height: 48px;
       }
-      
-      &::after {
-        width: 18px;
-        height: 18px;
-      }
     }
-    
-    &.#{$component}--vertical {
-      width: 48px;
-      
-      .#{$component}-thumb {
-        &::before {
-          width: 48px;
-          height: 4px;
-        }
-        
-        &::after {
-          width: 18px;
-          height: 18px;
-        }
-      }
+  }
+  
+  // For dragging state - visual feedback
+  &--dragging {
+    // No transitions during dragging for responsive feel
+    .#{$component}-start-track, 
+    .#{$component}-active-track, 
+    .#{$component}-remaining-track, 
+    .#{$component}-thumb {
+      transition: none;
     }
   }
 }

package/src/components/slider/accessibility.md

@@ -0,0 +1,59 @@
+# Slider Accessibility Enhancements
+
+## Overview
+
+Based on the provided accessibility requirements, the slider component has been enhanced to provide better keyboard navigation, visual feedback, and overall accessibility. The changes focus on ensuring that the slider meets Material Design accessibility standards and provides appropriate feedback based on input type.
+
+## Key Enhancements
+
+### Focus and Keyboard Navigation
+
+- **Direct Thumb Focus**: The initial focus now lands directly on the thumb (not the container)
+- **Visual Feedback**: Added a clear outline on focus to provide visual cues for keyboard users
+- **Arrow Key Navigation**:
+  - Left/Right arrows change the value by one step
+  - Up/Down arrows also change the value (for consistency with other controls)
+  - Home/End keys jump to minimum/maximum values
+  - Page Up/Down for larger step increments
+  - Shift + arrows for faster navigation (10x step size)
+
+### Visual Feedback During Interaction
+
+- **Thumb Shrinking**: The thumb width shrinks slightly during interaction to provide feedback
+- **Value Display**:
+  - Value appears during interaction (touch, drag, mouse click, keyboard navigation)
+  - Value remains visible briefly after interaction ends (1.5 seconds)
+  - Value position updates to follow the thumb
+
+### Visual Anchors for Contrast
+
+- **Track End Indicators**: Added dot elements at both ends of the track
+- **Color Contrast**: Ensured sufficient contrast for all elements
+- **Disabled State**: Properly indicated visually and via ARIA attributes
+
+## Implementation Details
+
+1. **Keyboard Handling**:
+   - Enhanced keyboard navigation with proper step calculations
+   - Added support for modifier keys (Shift)
+   - Set appropriate ARIA attributes for screen readers
+
+2. **Interaction Feedback**:
+   - Modified CSS to shrink thumb width during active states
+   - Enhanced value bubble display timing
+   - Improved touch and mouse event handling
+
+3. **Focus Management**:
+   - Set clear focus styles that work cross-browser
+   - Applied focus directly to interactive thumb elements
+   - Ensured focus outline is visible against various backgrounds
+
+## Keyboard Navigation Map
+
+| Keys | Actions |
+|------|---------|
+| Tab | Moves focus to the slider handle |
+| Arrows | Increase and decrease the value by one step |
+| Shift + Arrows | Increase and decrease by 10x step size |
+| Home / End | Set to minimum or maximum value |
+| Page Up / Down | Increase/decrease by larger increments |