diff --git a/packages/react-native/Libraries/Components/Switch/Switch.js b/packages/react-native/Libraries/Components/Switch/Switch.js index bf284ba57789..5c296fbcd02b 100644 --- a/packages/react-native/Libraries/Components/Switch/Switch.js +++ b/packages/react-native/Libraries/Components/Switch/Switch.js @@ -177,6 +177,7 @@ const Switch: component( ...SwitchProps, }): React.Node { const { + accessibilityState, disabled, ios_backgroundColor, onChange, @@ -227,16 +228,15 @@ const Switch: component( } }, [value, native]); + const _disabled = disabled != null ? disabled : accessibilityState?.disabled; + + const _accessibilityState: ?AccessibilityState = + _disabled !== accessibilityState?.disabled + ? {...accessibilityState, disabled: _disabled} + : accessibilityState; + if (Platform.OS === 'android') { const {onTintColor, tintColor, ...androidProps} = restProps; - const {accessibilityState} = androidProps; - const _disabled = - disabled != null ? disabled : accessibilityState?.disabled; - - const _accessibilityState: ?AccessibilityState = - _disabled !== accessibilityState?.disabled - ? {...accessibilityState, disabled: _disabled} - : accessibilityState; const platformProps = { accessibilityState: _accessibilityState, @@ -262,6 +262,7 @@ const Switch: component( ); } else { const platformProps = { + accessibilityState: _accessibilityState, disabled, onTintColor: trackColorForTrue, style: StyleSheet.compose( diff --git a/packages/react-native/Libraries/Components/Switch/__tests__/Switch-itest.js b/packages/react-native/Libraries/Components/Switch/__tests__/Switch-itest.js index a97753e4b268..1c37adb76974 100644 --- a/packages/react-native/Libraries/Components/Switch/__tests__/Switch-itest.js +++ b/packages/react-native/Libraries/Components/Switch/__tests__/Switch-itest.js @@ -46,6 +46,30 @@ describe('Switch', () => { ); }); + it('lets disabled override accessibilityState.disabled', () => { + const root = render( + , + ); + + expect( + root.getRenderedOutput({props: ['accessibilityState']}).toJSX(), + ).toEqual( + , + ); + }); + + it('does not set accessibilityState when disabled is not set', () => { + const root = render(); + + expect( + root.getRenderedOutput({props: ['accessibilityState']}).toJSX(), + ).toEqual(); + }); + it('renders with track and thumb color props applied', () => { // Exercises the color-resolution path; the mounted switch still renders as // the native switch host.