mtrl 0.2.5 → 0.2.7

package/src/components/slider/_styles.scss

@@ -5,18 +5,74 @@
 @use '../../styles/abstract/mixins' as m;
 @use '../../styles/abstract/theme' as t;
 
+// Define the transition properties for smoother animations with absolute positioning
+$track-transition: left 0.2s ease, right 0.2s ease;
+$handle-transition: left 0.2s ease, transform 0.2s ease;
+$bubble-transition: left 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
+$bubble-transition-visible: left 0.2s ease, opacity 0.2s ease, visibility 0s;
+
 $component: '#{base.$prefix}-slider';
 
 .#{$component} {
   // Base styles
   position: relative;
   width: 100%;
-  height: 40px;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   user-select: none;
   touch-action: none;
+  padding: 8px 0;
+  
+  // Container should not have a focus outline
+  &:focus {
+    outline: none;
+  }
+  
+  // Label styles
+  &-label {
+    display: block;
+    font-size: 18px;
+    font-weight: 400;
+    color: t.color('on-surface');
+    margin-bottom: 4px;
+  }
+  
+  // Icon positioning
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: t.color('on-surface-variant');
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    top: 16px;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
   
+  // When slider has icon at end position
+  &--icon {
+    .#{$component}-label {
+      margin-left: 48px;
+    }
+
+    .#{$component}-container {
+      margin-left: 48px;
+    }
+  }
+
+  // Slider container - holds all the slider elements
+  &-container {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
   &-track {
     position: relative;
     width: 100%;
@@ -33,8 +89,127 @@ $component: '#{base.$prefix}-slider';
       cursor: not-allowed;
     }
   }
-  
-  // Start track (new element for range slider - beginning to first thumb)
+ 
+  // Handle - updated with T-shape and proper focus styles
+  &-handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    z-index: 4;
+    padding: 4px 0;
+    transition: $handle-transition;
+    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 handle 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 handle 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,7 +217,7 @@ $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;
+    transition: $track-transition;
     border-radius: 2px;
     opacity: 0.24;
     z-index: 1;
@@ -71,7 +246,7 @@ $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;
+    transition: $track-transition;
     border-radius: 2px;
     z-index: 1;
 
@@ -88,7 +263,7 @@ $component: '#{base.$prefix}-slider';
     }
   }
   
-  // Remaining track (unfilled part) - new for MD3
+  // Remaining track (unfilled part)
   &-remaining-track {
     opacity: .24;
     position: absolute;
@@ -96,9 +271,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;
+    transition: $track-transition;
     border-radius: 2px;
-    width: 100%;
     z-index: 0;
     
     .#{$component}--secondary & {
@@ -118,7 +292,7 @@ $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;
@@ -132,7 +306,6 @@ $component: '#{base.$prefix}-slider';
     // Start dot
     &--start {
       left: 6px;
-      // Color variants
       background-color: t.color('on-primary');
       
       .#{$component}--secondary & {
@@ -147,7 +320,6 @@ $component: '#{base.$prefix}-slider';
     // End dot
     &--end {
       right: 6px;
-      // Color variants
       background-color: t.color('primary');
       
       .#{$component}--secondary & {
@@ -162,136 +334,10 @@ $component: '#{base.$prefix}-slider';
     .#{$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: 4;
-    // 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, 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-elements
-    &::before, &::after {
-      pointer-events: auto;
-    }
-    
-    // Make thumb line slimmer during dragging
-    .#{$component}--dragging & {
-      &::before {
-        width: 3px;
-      }
-    }
-    
-    // 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');
-      
-      .#{$component}--secondary & {
-        background-color: t.color('secondary');
-      }
-      
-      .#{$component}--tertiary & {
-        background-color: t.color('tertiary');
-      }
-      
-      .#{$component}--error & {
-        background-color: t.color('error');
-      }
-    }
-    
-    // Active state
-    &:active::before, &:active::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');
-      }
-    }
-    
-    // Disabled state
-    .#{$component}--disabled & {
-      cursor: not-allowed;
-      
-      &::before, &::after {
-        opacity: 0.38;
-        background-color: t.color('on-surface');
-      }
-    }
-  }
   
-  // Container for ticks in MD3 style
+  // Container for ticks
   &-ticks-container {
     position: absolute;
     width: 100%;
@@ -305,14 +351,14 @@ $component: '#{base.$prefix}-slider';
   // Tick marks
   &-tick {
     position: absolute;
-    width: 2px;
-    height: 2px;
+    width: 4px;
+    height: 4px;
     background-color: t.color('outline');
     border-radius: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
-    opacity: 1;
+    opacity: 0.8;
     
     &:last-child, &:first-child {
       display: none
@@ -320,7 +366,6 @@ $component: '#{base.$prefix}-slider';
 
     // Active tick (filled)
     &--active {
-      // background-color: white;
       background-color: t.color('on-primary');
       
       .#{$component}--secondary & {
@@ -335,6 +380,7 @@ $component: '#{base.$prefix}-slider';
     // Inactive tick (unfilled)
     &--inactive {
       background-color: t.color('primary');
+      opacity: 0.5;
 
       .#{$component}--secondary & {
         background-color: t.color('secondary');
@@ -351,9 +397,9 @@ $component: '#{base.$prefix}-slider';
     }
   }
   
-  // Range slider styles (for two thumbs)
+  // Range slider styles
   &--range {
-    .#{$component}-thumb {
+    .#{$component}-handle {
       &:nth-of-type(1) {
         z-index: 3;
       }
@@ -365,28 +411,28 @@ $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;
+    transition: $bubble-transition;
     pointer-events: none;
     
-    // Show value when dragging
+    // Show value when interacting
     &--visible {
       visibility: visible;
       opacity: 1;
-      transition: opacity 0.2s ease, visibility 0s;
+      transition: $bubble-transition-visible;
     }
   }
   
@@ -400,37 +446,44 @@ $component: '#{base.$prefix}-slider';
   
   // Sizes
   &--small {
-    height: 32px;
+    .#{$component}-container {
+      height: 32px;
+    }
     
-    .#{$component}-thumb {
+    .#{$component}-handle {
       &::before {
         height: 34px;
       }
-      
-      &::after {
-        width: 14px;
-        height: 14px;
-      }
+    }
+  }
+  
+  &--medium {
+    .#{$component}-container {
+      height: 40px;
     }
   }
   
   &--large {
-    height: 48px;
+    .#{$component}-container {
+      height: 48px;
+    }
     
-    .#{$component}-thumb {
+    .#{$component}-handle {
       &::before {
         height: 48px;
       }
-      
-      &::after {
-        width: 18px;
-        height: 18px;
-      }
     }
   }
   
-  // For dragging state
+  // For dragging state - visual feedback
   &--dragging {
-    // Additional styles when dragging will be applied to thumb::before
+    // No transitions during dragging for responsive feel
+    .#{$component}-start-track, 
+    .#{$component}-active-track, 
+    .#{$component}-remaining-track, 
+    .#{$component}-handle,
+    .#{$component}-value {
+      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 Handle Focus**: The initial focus now lands directly on the handle (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
+
+- **Handle Shrinking**: The handle 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 handle
+
+### 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 handle 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 handle 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 |