Skip to content

fix: remove dead single-preset button semantics #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ngocdevv merged 1 commit into from
Sep 4, 2026
Merged

fix: remove dead single-preset button semantics #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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
Expand Down
2 changes: 0 additions & 2 deletions packages/dial-slider/src/components/dial-slider/preset/DialPresetViewport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -113,7 +112,6 @@ export function DialPresetViewport({
selected
accentColor={accentColor}
adjustedColor={adjustedColor}
onPress={NOOP}
/>
</View>
)}
Expand Down
42 changes: 31 additions & 11 deletions packages/dial-slider/src/components/dial-slider/preset/PresetButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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
Expand All @@ -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>
);
}
Expand Down