@lodev09/react-native-true-sheet 3.9.9 → 3.10.0-beta.0

package/android/src/main/java/com/lodev09/truesheet/core/TrueSheetGrabberView.kt

@@ -5,8 +5,10 @@ import android.content.Context
 import android.content.res.Configuration
 import android.graphics.Color
 import android.graphics.drawable.GradientDrawable
+import android.os.Bundle
 import android.view.Gravity
 import android.view.View
+import android.view.accessibility.AccessibilityNodeInfo
 import android.widget.FrameLayout
 import androidx.core.graphics.ColorUtils
 import com.facebook.react.uimanager.PixelUtil.dpToPx
@@ -58,6 +60,9 @@ class TrueSheetGrabberView(context: Context, private val options: GrabberOptions
   private val grabberColor: Int
     get() = if (isAdaptive) getAdaptiveColor(options?.color) else options?.color ?: DEFAULT_COLOR
 
+  var onAccessibilityIncrement: (() -> Unit)? = null
+  var onAccessibilityDecrement: (() -> Unit)? = null
+
   init {
     val hitboxWidth = grabberWidth + (HITBOX_PADDING_HORIZONTAL * 2)
     val hitboxHeight = grabberHeight + (HITBOX_PADDING_VERTICAL * 2)
@@ -86,6 +91,52 @@ class TrueSheetGrabberView(context: Context, private val options: GrabberOptions
     }
 
     addView(pillView)
+
+    isFocusable = true
+    contentDescription = "Sheet Grabber"
+
+    accessibilityDelegate = object : View.AccessibilityDelegate() {
+      override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfo) {
+        super.onInitializeAccessibilityNodeInfo(host, info)
+        info.addAction(
+          AccessibilityNodeInfo.AccessibilityAction(
+            AccessibilityNodeInfo.ACTION_SCROLL_FORWARD,
+            "Expand"
+          )
+        )
+        info.addAction(
+          AccessibilityNodeInfo.AccessibilityAction(
+            AccessibilityNodeInfo.ACTION_SCROLL_BACKWARD,
+            "Collapse"
+          )
+        )
+        info.className = "android.widget.SeekBar"
+      }
+
+      override fun performAccessibilityAction(host: View, action: Int, args: Bundle?): Boolean =
+        when (action) {
+          AccessibilityNodeInfo.ACTION_SCROLL_FORWARD -> {
+            onAccessibilityIncrement?.invoke()
+            true
+          }
+
+          AccessibilityNodeInfo.ACTION_SCROLL_BACKWARD -> {
+            onAccessibilityDecrement?.invoke()
+            true
+          }
+
+          else -> super.performAccessibilityAction(host, action, args)
+        }
+    }
+  }
+
+  fun updateAccessibilityValue(index: Int, detentCount: Int) {
+    stateDescription = when {
+      index < 0 || detentCount <= 0 -> null
+      index >= detentCount - 1 -> "Expanded"
+      index == 0 -> "Collapsed"
+      else -> "Detent ${index + 1} of $detentCount"
+    }
   }
 
   private fun getAdaptiveColor(baseColor: Int? = null): Int {

package/android/src/main/java/com/lodev09/truesheet/events/TrueSheetLifecycleEvents.kt

@@ -94,16 +94,19 @@ class DidDismissEvent(surfaceId: Int, viewId: Int) : Event<DidDismissEvent>(surf
 }
 
 /**
- * Fired when the hardware back button is pressed (Android only)
+ * Fired when the sheet visibility changes due to screen transitions
  */
-class BackPressEvent(surfaceId: Int, viewId: Int) : Event<BackPressEvent>(surfaceId, viewId) {
+class VisibilityChangeEvent(surfaceId: Int, viewId: Int, private val visible: Boolean) : Event<VisibilityChangeEvent>(surfaceId, viewId) {
 
   override fun getEventName(): String = EVENT_NAME
 
-  override fun getEventData(): WritableMap = Arguments.createMap()
+  override fun getEventData(): WritableMap =
+    Arguments.createMap().apply {
+      putBoolean("visible", visible)
+    }
 
   companion object {
-    const val EVENT_NAME = "topBackPress"
-    const val REGISTRATION_NAME = "onBackPress"
+    const val EVENT_NAME = "topVisibilityChange"
+    const val REGISTRATION_NAME = "onVisibilityChange"
   }
 }

package/android/src/main/java/com/lodev09/truesheet/utils/ViewUtils.kt

@@ -1,6 +1,9 @@
 package com.lodev09.truesheet.utils
 
 import android.view.View
+import android.view.ViewGroup
+import android.widget.ScrollView
+import androidx.core.widget.NestedScrollView
 
 fun View.isDescendantOf(ancestor: View): Boolean {
   if (!isAttachedToWindow) return false
@@ -11,3 +14,17 @@ fun View.isDescendantOf(ancestor: View): Boolean {
   }
   return false
 }
+
+fun ViewGroup.smoothScrollBy(dx: Int, dy: Int) {
+  when (this) {
+    is ScrollView -> smoothScrollBy(dx, dy)
+    is NestedScrollView -> smoothScrollBy(dx, dy)
+  }
+}
+
+fun ViewGroup.smoothScrollTo(x: Int, y: Int) {
+  when (this) {
+    is ScrollView -> smoothScrollTo(x, y)
+    is NestedScrollView -> smoothScrollTo(x, y)
+  }
+}

package/ios/TrueSheetContainerView.h

@@ -13,6 +13,13 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
+@interface ScrollableOptions : NSObject
+
+@property (nonatomic, assign) CGFloat keyboardScrollOffset;
+@property (nonatomic, assign) BOOL scrollingExpandsSheet;
+
+@end
+
 @protocol TrueSheetContainerViewDelegate <NSObject>
 
 - (void)containerViewContentDidChangeSize:(CGSize)newSize;
@@ -44,7 +51,7 @@ NS_ASSUME_NONNULL_BEGIN
 /**
  * Options for scrollable behavior
  */
-@property (nonatomic, strong, nullable) NSDictionary *scrollableOptions;
+@property (nonatomic, strong, nullable) ScrollableOptions *scrollableOptions;
 
 /**
  * Returns the current content height

package/ios/TrueSheetContainerView.mm

@@ -27,6 +27,18 @@
 
 using namespace facebook::react;
 
+@implementation ScrollableOptions
+
+- (instancetype)init {
+  if (self = [super init]) {
+    _keyboardScrollOffset = 0;
+    _scrollingExpandsSheet = YES;
+  }
+  return self;
+}
+
+@end
+
 @interface TrueSheetContainerView () <TrueSheetContentViewDelegate, TrueSheetHeaderViewDelegate>
 @end
 
@@ -87,14 +99,9 @@ using namespace facebook::react;
   _scrollableSet = YES;
 }
 
-- (void)setScrollableOptions:(NSDictionary *)scrollableOptions {
+- (void)setScrollableOptions:(ScrollableOptions *)scrollableOptions {
   _scrollableOptions = scrollableOptions;
-  if (scrollableOptions) {
-    NSNumber *offset = scrollableOptions[@"keyboardScrollOffset"];
-    _contentView.keyboardScrollOffset = offset ? [offset floatValue] : 0;
-  } else {
-    _contentView.keyboardScrollOffset = 0;
-  }
+  _contentView.keyboardScrollOffset = scrollableOptions ? scrollableOptions.keyboardScrollOffset : 0;
 }
 
 - (void)setupScrollable {

package/ios/TrueSheetModule.mm

@@ -140,6 +140,11 @@ RCT_EXPORT_MODULE(TrueSheetModule)
   });
 }
 
+- (void)handleBackPress:(double)viewTag resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
+  // No-op on iOS — no hardware back button
+  resolve(nil);
+}
+
 - (void)dismissAll:(BOOL)animated resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
   RCTExecuteOnMainQueue(^{
     @synchronized(viewRegistry) {

package/ios/TrueSheetView.mm

@@ -53,7 +53,7 @@ using namespace facebook::react;
   NSInteger _initialDetentIndex;
   NSInteger _insetAdjustment;
   BOOL _scrollable;
-  NSDictionary *_scrollableOptions;
+  ScrollableOptions *_scrollableOptions;
   BOOL _initialDetentAnimated;
   BOOL _isSheetUpdatePending;
   BOOL _pendingLayoutUpdate;
@@ -213,25 +213,18 @@ using namespace facebook::react;
                            grabberOpts.cornerRadius >= 0 || grabberColor != nil || !grabberOpts.adaptive;
 
   if (hasGrabberOptions) {
-    NSMutableDictionary *options = [NSMutableDictionary dictionary];
-
-    if (grabberOpts.width > 0) {
-      options[@"width"] = @(grabberOpts.width);
-    }
-    if (grabberOpts.height > 0) {
-      options[@"height"] = @(grabberOpts.height);
-    }
-    if (grabberOpts.topMargin > 0) {
-      options[@"topMargin"] = @(grabberOpts.topMargin);
-    }
-    if (grabberOpts.cornerRadius >= 0) {
-      options[@"cornerRadius"] = @(grabberOpts.cornerRadius);
-    }
-    if (grabberColor) {
-      options[@"color"] = grabberColor;
-    }
-    options[@"adaptive"] = @(grabberOpts.adaptive);
-
+    GrabberOptions *options = [[GrabberOptions alloc] init];
+    if (grabberOpts.width > 0)
+      options.width = @(grabberOpts.width);
+    if (grabberOpts.height > 0)
+      options.height = @(grabberOpts.height);
+    if (grabberOpts.topMargin > 0)
+      options.topMargin = @(grabberOpts.topMargin);
+    if (grabberOpts.cornerRadius >= 0)
+      options.cornerRadius = @(grabberOpts.cornerRadius);
+    if (grabberColor)
+      options.color = grabberColor;
+    options.adaptive = grabberOpts.adaptive;
     _controller.grabberOptions = options;
   } else {
     _controller.grabberOptions = nil;
@@ -251,18 +244,20 @@ using namespace facebook::react;
   _scrollable = newProps.scrollable;
 
   const auto &scrollableOpts = newProps.scrollableOptions;
-  BOOL hasScrollableOptions = scrollableOpts.keyboardScrollOffset > 0;
+  BOOL scrollingExpandsSheet = scrollableOpts.scrollingExpandsSheet;
+  BOOL hasScrollableOptions = scrollableOpts.keyboardScrollOffset > 0 || !scrollingExpandsSheet;
 
   if (hasScrollableOptions) {
-    NSMutableDictionary *options = [NSMutableDictionary dictionary];
-    if (scrollableOpts.keyboardScrollOffset > 0) {
-      options[@"keyboardScrollOffset"] = @(scrollableOpts.keyboardScrollOffset);
-    }
+    ScrollableOptions *options = [[ScrollableOptions alloc] init];
+    options.keyboardScrollOffset = scrollableOpts.keyboardScrollOffset;
+    options.scrollingExpandsSheet = scrollingExpandsSheet;
     _scrollableOptions = options;
   } else {
     _scrollableOptions = nil;
   }
 
+  _controller.scrollingExpandsSheet = scrollingExpandsSheet;
+
   _insetAdjustment = (NSInteger)newProps.insetAdjustment;
   _controller.insetAdjustment = _insetAdjustment;
 
@@ -489,7 +484,11 @@ using namespace facebook::react;
 }
 
 - (void)emitDismissedPosition {
-  [self viewControllerDidChangePosition:-1 position:_controller.screenHeight detent:0 realtime:NO];
+  [TrueSheetStateEvents emitPositionChange:_eventEmitter
+                                     index:-1
+                                  position:_controller.screenHeight
+                                    detent:0
+                                  realtime:NO];
 }
 
 - (void)dismissAnimated:(BOOL)animated completion:(nullable TrueSheetCompletionBlock)completion {

package/ios/TrueSheetViewController.h

@@ -8,6 +8,7 @@
 
 #import <UIKit/UIKit.h>
 #import "core/TrueSheetDetentCalculator.h"
+#import "core/TrueSheetGrabberView.h"
 
 #if __has_include(<RNScreens/RNSDismissibleModalProtocol.h>)
 #import <RNScreens/RNSDismissibleModalProtocol.h>
@@ -58,7 +59,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, strong, nullable) UIColor *backgroundColor;
 @property (nonatomic, strong, nullable) NSNumber *cornerRadius;
 @property (nonatomic, assign) BOOL grabber;
-@property (nonatomic, strong, nullable) NSDictionary *grabberOptions;
+@property (nonatomic, strong, nullable) GrabberOptions *grabberOptions;
 @property (nonatomic, assign) BOOL draggable;
 @property (nonatomic, assign) BOOL dimmed;
 @property (nonatomic, strong, nullable) NSNumber *dimmedDetentIndex;
@@ -68,6 +69,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) BOOL pageSizing;
 @property (nonatomic, assign) NSInteger anchor;
 @property (nonatomic, assign) NSInteger insetAdjustment;
+@property (nonatomic, assign) BOOL scrollingExpandsSheet;
 @property (nonatomic, assign) BOOL dismissible;
 @property (nonatomic, assign) BOOL isPresented;
 @property (nonatomic, assign) NSInteger activeDetentIndex;

package/ios/TrueSheetViewController.mm

@@ -22,12 +22,22 @@
 
 using namespace facebook::react;
 
+typedef struct {
+  CGFloat position;
+  CGFloat detent;
+  CGFloat index;
+} TrueSheetPositionState;
+
+static BOOL TrueSheetPositionStateEquals(TrueSheetPositionState a, TrueSheetPositionState b) {
+  return fabs(a.position - b.position) <= 0.01 && fabs(a.detent - b.detent) <= 0.01 && fabs(a.index - b.index) <= 0.01;
+}
+
 @interface TrueSheetViewController ()
 
 @end
 
 @implementation TrueSheetViewController {
-  CGFloat _lastPosition;
+  TrueSheetPositionState _lastEmittedPositionState;
   CGFloat _lastWidth;
   NSInteger _pendingDetentIndex;
   BOOL _pendingContentSizeChange;
@@ -59,11 +69,12 @@ using namespace facebook::react;
     _headerHeight = @(0);
     _grabber = YES;
     _draggable = YES;
+    _scrollingExpandsSheet = YES;
     _dismissible = YES;
     _dimmed = YES;
     _dimmedDetentIndex = @(0);
     _pageSizing = YES;
-    _lastPosition = 0;
+    _lastEmittedPositionState = (TrueSheetPositionState){0, 0, 0};
     _isDragging = NO;
     _isPresented = NO;
     _isTransitioning = NO;
@@ -223,6 +234,7 @@ using namespace facebook::react;
       [self.delegate viewControllerDidPresentAtIndex:index position:self.currentPosition detent:detent];
       [self.delegate viewControllerDidFocus];
 
+      [_grabberView updateAccessibilityValueWithIndex:index detentCount:_detents.count];
       [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:NO debug:@"did present"];
     });
 
@@ -315,6 +327,7 @@ using namespace facebook::react;
       [self learnOffsetForDetentIndex:pendingIndex];
       CGFloat detent = [self detentValueForIndex:pendingIndex];
       [self.delegate viewControllerDidChangeDetent:pendingIndex position:self.currentPosition detent:detent];
+      [self->_grabberView updateAccessibilityValueWithIndex:pendingIndex detentCount:self->_detents.count];
       [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:NO debug:@"pending detent change"];
     });
   }
@@ -389,7 +402,9 @@ using namespace facebook::react;
     case UIGestureRecognizerStateCancelled: {
       if (!_isTransitioning) {
         dispatch_async(dispatch_get_main_queue(), ^{
-          [self learnOffsetForDetentIndex:self.currentDetentIndex];
+          NSInteger index = self.currentDetentIndex;
+          [self learnOffsetForDetentIndex:index];
+          [self->_grabberView updateAccessibilityValueWithIndex:index detentCount:self->_detents.count];
           [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:NO debug:@"drag end"];
         });
       }
@@ -458,7 +473,7 @@ using namespace facebook::react;
     CGFloat layerPosition = layer.presentationLayer.frame.origin.y;
 
     if (self.currentPosition >= self.screenHeight) {
-      CGFloat position = fmax(_lastPosition, layerPosition);
+      CGFloat position = fmax(_lastEmittedPositionState.position, layerPosition);
 
       [self emitWillDismissEvents];
       [self emitChangePositionDelegateWithPosition:position realtime:YES debug:@"transition out"];
@@ -466,7 +481,8 @@ using namespace facebook::react;
     } else {
       CGFloat position = fmax(self.currentPosition, layerPosition);
       // Detect drag → snap transition jump; stay non-realtime for the rest of the animation
-      if (!_isTransitionSnapping && _isPresented && _lastPosition > 0 && fabs(_lastPosition - position) > 20) {
+      if (!_isTransitionSnapping && _isPresented && _lastEmittedPositionState.position > 0 &&
+          fabs(_lastEmittedPositionState.position - position) > 20) {
         _isTransitionSnapping = YES;
       }
       BOOL realtime = !_isTransitionSnapping;
@@ -485,13 +501,19 @@ using namespace facebook::react;
     }
   }
 
-  if (fabs(_lastPosition - position) > 0.01) {
-    _lastPosition = position;
+  TrueSheetPositionState state = {
+    .position = position,
+    .detent = [self interpolatedDetentForPosition:position],
+    .index = [self interpolatedIndexForPosition:position],
+  };
 
-    CGFloat index = [self interpolatedIndexForPosition:position];
-    CGFloat detent = [self interpolatedDetentForPosition:position];
+  if (!TrueSheetPositionStateEquals(_lastEmittedPositionState, state)) {
+    _lastEmittedPositionState = state;
 
-    [self.delegate viewControllerDidChangePosition:index position:position detent:detent realtime:realtime];
+    [self.delegate viewControllerDidChangePosition:state.index
+                                          position:state.position
+                                            detent:state.detent
+                                          realtime:realtime];
   }
 }
 
@@ -733,13 +755,13 @@ using namespace facebook::react;
   if (self.grabberOptions) {
     self.sheet.prefersGrabberVisible = NO;
 
-    NSDictionary *options = self.grabberOptions;
-    _grabberView.grabberWidth = options[@"width"];
-    _grabberView.grabberHeight = options[@"height"];
-    _grabberView.topMargin = options[@"topMargin"];
-    _grabberView.cornerRadius = options[@"cornerRadius"];
-    _grabberView.color = options[@"color"];
-    _grabberView.adaptive = options[@"adaptive"];
+    GrabberOptions *options = self.grabberOptions;
+    _grabberView.grabberWidth = options.width;
+    _grabberView.grabberHeight = options.height;
+    _grabberView.topMargin = options.topMargin;
+    _grabberView.cornerRadius = options.cornerRadius;
+    _grabberView.color = options.color;
+    _grabberView.adaptive = @(options.adaptive);
     [_grabberView applyConfiguration];
     _grabberView.hidden = !showGrabber;
 
@@ -747,12 +769,39 @@ using namespace facebook::react;
     _grabberView.onTap = ^{
       [weakSelf handleGrabberTap];
     };
+    _grabberView.onIncrement = ^{
+      __strong __typeof(weakSelf) strongSelf = weakSelf;
+      if (!strongSelf)
+        return;
+      NSInteger current = strongSelf.currentDetentIndex;
+      NSInteger count = strongSelf->_detents.count;
+      if (current >= 0 && current < count - 1) {
+        [strongSelf.sheet animateChanges:^{
+          [strongSelf resizeToDetentIndex:current + 1];
+        }];
+      }
+    };
+    _grabberView.onDecrement = ^{
+      __strong __typeof(weakSelf) strongSelf = weakSelf;
+      if (!strongSelf)
+        return;
+      NSInteger current = strongSelf.currentDetentIndex;
+      if (current > 0) {
+        [strongSelf.sheet animateChanges:^{
+          [strongSelf resizeToDetentIndex:current - 1];
+        }];
+      } else if (strongSelf.dismissible) {
+        [strongSelf.presentingViewController dismissViewControllerAnimated:YES completion:nil];
+      }
+    };
 
     [self.view bringSubviewToFront:_grabberView];
   } else {
     self.sheet.prefersGrabberVisible = showGrabber;
     _grabberView.hidden = YES;
     _grabberView.onTap = nil;
+    _grabberView.onIncrement = nil;
+    _grabberView.onDecrement = nil;
   }
 }
 
@@ -835,7 +884,7 @@ using namespace facebook::react;
 
   sheet.delegate = self;
   sheet.prefersEdgeAttachedInCompactHeight = YES;
-  sheet.prefersScrollingExpandsWhenScrolledToEdge = self.draggable;
+  sheet.prefersScrollingExpandsWhenScrolledToEdge = self.draggable && self.scrollingExpandsSheet;
 
   if (self.cornerRadius) {
     sheet.preferredCornerRadius = [self.cornerRadius floatValue];

package/ios/core/TrueSheetGrabberView.h

@@ -10,6 +10,17 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
+@interface GrabberOptions : NSObject
+
+@property (nonatomic, strong, nullable) NSNumber *width;
+@property (nonatomic, strong, nullable) NSNumber *height;
+@property (nonatomic, strong, nullable) NSNumber *topMargin;
+@property (nonatomic, strong, nullable) NSNumber *cornerRadius;
+@property (nonatomic, strong, nullable) UIColor *color;
+@property (nonatomic, assign) BOOL adaptive;
+
+@end
+
 /**
  * Native grabber (drag handle) view for the bottom sheet.
  * Uses UIVibrancyEffect to adapt color based on the background.
@@ -37,12 +48,21 @@ NS_ASSUME_NONNULL_BEGIN
 /// Called when the grabber is tapped
 @property (nonatomic, copy, nullable) void (^onTap)(void);
 
+/// Called when VoiceOver user swipes up (expand)
+@property (nonatomic, copy, nullable) void (^onIncrement)(void);
+
+/// Called when VoiceOver user swipes down (collapse)
+@property (nonatomic, copy, nullable) void (^onDecrement)(void);
+
 /// Adds the grabber view to a parent view with proper constraints
 - (void)addToView:(UIView *)parentView;
 
 /// Applies the current configuration to the grabber view
 - (void)applyConfiguration;
 
+/// Updates the accessibility value based on the current detent position
+- (void)updateAccessibilityValueWithIndex:(NSInteger)index detentCount:(NSInteger)count;
+
 @end
 
 NS_ASSUME_NONNULL_END

package/ios/core/TrueSheetGrabberView.mm

@@ -8,9 +8,22 @@
 
 #import "TrueSheetGrabberView.h"
 
+@implementation GrabberOptions
+
+- (instancetype)init {
+  if (self = [super init]) {
+    _adaptive = YES;
+  }
+  return self;
+}
+
+@end
+
 static const CGFloat kDefaultGrabberWidth = 36.0;
 static const CGFloat kDefaultGrabberHeight = 5.0;
 static const CGFloat kDefaultGrabberTopMargin = 5.0;
+static const CGFloat kHitPaddingHorizontal = 20.0;
+static const CGFloat kHitPaddingVertical = 10.0;
 
 @implementation TrueSheetGrabberView {
   UIVisualEffectView *_vibrancyView;
@@ -51,17 +64,19 @@ static const CGFloat kDefaultGrabberTopMargin = 5.0;
 #pragma mark - Setup
 
 - (void)setupView {
-  self.clipsToBounds = YES;
+  self.clipsToBounds = NO;
+  self.isAccessibilityElement = YES;
+  self.accessibilityLabel = @"Sheet Grabber";
+  self.accessibilityTraits = UIAccessibilityTraitAdjustable | UIAccessibilityTraitButton;
+  self.accessibilityHint = @"Double-tap to expand. Swipe up or down to resize the sheet";
 
   UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap)];
   [self addGestureRecognizer:tap];
 
   _vibrancyView = [[UIVisualEffectView alloc] initWithEffect:nil];
-  _vibrancyView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
   [self addSubview:_vibrancyView];
 
   _fillView = [[UIView alloc] init];
-  _fillView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
   _fillView.backgroundColor = [UIColor.darkGrayColor colorWithAlphaComponent:0.7];
   [_vibrancyView.contentView addSubview:_fillView];
 }
@@ -74,8 +89,35 @@ static const CGFloat kDefaultGrabberTopMargin = 5.0;
   }
 }
 
+- (void)accessibilityIncrement {
+  if (_onIncrement) {
+    _onIncrement();
+  }
+}
+
+- (void)accessibilityDecrement {
+  if (_onDecrement) {
+    _onDecrement();
+  }
+}
+
 #pragma mark - Public
 
+- (void)updateAccessibilityValueWithIndex:(NSInteger)index detentCount:(NSInteger)count {
+  if (index < 0 || count <= 0) {
+    self.accessibilityValue = nil;
+    return;
+  }
+
+  if (index >= count - 1) {
+    self.accessibilityValue = @"Expanded";
+  } else if (index == 0) {
+    self.accessibilityValue = @"Collapsed";
+  } else {
+    self.accessibilityValue = [NSString stringWithFormat:@"Detent %ld of %ld", (long)(index + 1), (long)count];
+  }
+}
+
 - (void)addToView:(UIView *)parentView {
   if (self.superview == parentView) {
     return;
@@ -87,17 +129,22 @@ static const CGFloat kDefaultGrabberTopMargin = 5.0;
 }
 
 - (void)applyConfiguration {
-  CGFloat width = [self effectiveWidth];
-  CGFloat height = [self effectiveHeight];
+  CGFloat pillWidth = [self effectiveWidth];
+  CGFloat pillHeight = [self effectiveHeight];
   CGFloat topMargin = [self effectiveTopMargin];
   CGFloat parentWidth = self.superview ? self.superview.bounds.size.width : UIScreen.mainScreen.bounds.size.width;
 
-  // Position the grabber: centered horizontally, with top margin
-  self.frame = CGRectMake((parentWidth - width) / 2.0, topMargin, width, height);
-  self.layer.cornerRadius = [self effectiveCornerRadius];
+  CGFloat frameWidth = pillWidth + kHitPaddingHorizontal * 2;
+  CGFloat frameHeight = pillHeight + kHitPaddingVertical * 2;
+  CGFloat frameY = topMargin - kHitPaddingVertical;
+
+  self.frame = CGRectMake((parentWidth - frameWidth) / 2.0, frameY, frameWidth, frameHeight);
+  self.backgroundColor = UIColor.clearColor;
 
-  // Update vibrancy and fill view frames
-  _vibrancyView.frame = self.bounds;
+  CGRect pillRect = CGRectMake(kHitPaddingHorizontal, kHitPaddingVertical, pillWidth, pillHeight);
+  _vibrancyView.frame = pillRect;
+  _vibrancyView.layer.cornerRadius = [self effectiveCornerRadius];
+  _vibrancyView.clipsToBounds = YES;
   _fillView.frame = _vibrancyView.contentView.bounds;
 
   if (self.isAdaptive) {
@@ -108,9 +155,8 @@ static const CGFloat kDefaultGrabberTopMargin = 5.0;
     _fillView.hidden = NO;
   } else {
     _vibrancyView.effect = nil;
-    _vibrancyView.backgroundColor = nil;
     _fillView.hidden = YES;
-    self.backgroundColor = _color ?: [UIColor.darkGrayColor colorWithAlphaComponent:0.7];
+    _vibrancyView.backgroundColor = _color ?: [UIColor.darkGrayColor colorWithAlphaComponent:0.7];
   }
 }