From 1154223e3e8c3fd3572e8ef0c86374506ff918a0 Mon Sep 17 00:00:00 2001
From: Lucas Lee <135578805+gooddev97@users.noreply.github.com>
Date: Fri, 4 Sep 2026 16:46:36 +0700
Subject: [PATCH] fix: remove dead single-preset button semantics

---
 README.md                                     | 11 ++---
 .../dial-slider/preset/DialPresetViewport.tsx |  2 -
 .../dial-slider/preset/PresetButton.tsx       | 42 ++++++++++++++-----
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 202a8ab..543047e 100644
--- a/README.md
+++ b/README.md
@@ -86,7 +86,6 @@ the only Expo module used by the component itself.
 ## Single preset
 
 ```tsx
-import { useState } from 'react';
 import { Text } from 'react-native';
 import { DialSlider, type DialPreset } from '@ngocdevv/dial-slider';
 
@@ -100,23 +99,25 @@ const EXPOSURE: readonly DialPreset[] = [
     minValue: -100,
     maxValue: 100,
     initialValue: 0,
+    formatValue: (value) => `${value}%`,
   },
 ];
 
 export function ExposureControl() {
-  const [value, setValue] = useState(0);
-
   return (
     <DialSlider
       presets={EXPOSURE}
       defaultValues={{ exposure: 0 }}
-      onValueChange={(_presetId, nextValue) => setValue(nextValue)}
-      accessibilityLabel={`Exposure, ${value}`}
+      accessibilityLabel="Exposure"
     />
   );
 }
 ```
 
+Keep `accessibilityLabel` stable. The active value is exposed separately through
+the adjustable control's accessibility value and uses the preset's
+`formatValue` output.
+
 ## Multiple presets
 
 The example below is fully controlled. Update `selectedPresetId` and `values` in
diff --git a/packages/dial-slider/src/components/dial-slider/preset/DialPresetViewport.tsx b/packages/dial-slider/src/components/dial-slider/preset/DialPresetViewport.tsx
index 399594c..d38aae8 100644
--- a/packages/dial-slider/src/components/dial-slider/preset/DialPresetViewport.tsx
+++ b/packages/dial-slider/src/components/dial-slider/preset/DialPresetViewport.tsx
@@ -22,7 +22,6 @@ import { PresetButton } from './PresetButton';
 import { PresetRing } from './PresetRing';
 
 const { ITEM_SIZE, ITEM_GAP } = DIAL_CONFIG;
-const NOOP = () => {};
 
 interface DialPresetViewportProps {
   presets: readonly DialPreset[];
@@ -113,7 +112,6 @@ export function DialPresetViewport({
             selected
             accentColor={accentColor}
             adjustedColor={adjustedColor}
-            onPress={NOOP}
           />
         </View>
       )}
diff --git a/packages/dial-slider/src/components/dial-slider/preset/PresetButton.tsx b/packages/dial-slider/src/components/dial-slider/preset/PresetButton.tsx
index 9a7c020..4c864e8 100644
--- a/packages/dial-slider/src/components/dial-slider/preset/PresetButton.tsx
+++ b/packages/dial-slider/src/components/dial-slider/preset/PresetButton.tsx
@@ -17,7 +17,8 @@ interface PresetButtonProps {
   selected: boolean;
   accentColor: string;
   adjustedColor: string;
-  onPress: () => void;
+  /** Omit for a visual-only indicator that should not receive accessibility focus. */
+  onPress?: () => void;
 }
 
 export function PresetButton({
@@ -40,6 +41,34 @@ export function PresetButton({
     positiveProgressColor,
     COLORS.NEGATIVE
   );
+  const content = (
+    <>
+      <PresetRing
+        value={value}
+        minValue={min}
+        maxValue={max}
+        color={progressColor}
+        backgroundColor={selected ? '#5C5C60' : '#4A4A4D'}
+      />
+      <View style={[styles.iconSlot, !selected && styles.inactiveIcon]}>
+        {icon}
+      </View>
+    </>
+  );
+
+  if (!onPress) {
+    return (
+      <View
+        accessible={false}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        style={[styles.presetButton, preset.disabled && styles.disabledPreset]}
+      >
+        {content}
+      </View>
+    );
+  }
 
   return (
     <Pressable
@@ -60,16 +89,7 @@ export function PresetButton({
         pressed && styles.pressedPreset,
       ]}
     >
-      <PresetRing
-        value={value}
-        minValue={min}
-        maxValue={max}
-        color={progressColor}
-        backgroundColor={selected ? '#5C5C60' : '#4A4A4D'}
-      />
-      <View style={[styles.iconSlot, !selected && styles.inactiveIcon]}>
-        {icon}
-      </View>
+      {content}
     </Pressable>
   );
 }