diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js index 74221175de5e39..c4cf2074b23807 100644 --- a/Libraries/Components/Slider/Slider.js +++ b/Libraries/Components/Slider/Slider.js @@ -19,6 +19,7 @@ import StyleSheet, { import type {ImageSource} from '../../Image/ImageSource'; import type {ViewProps} from '../View/ViewPropTypes'; import type {SyntheticEvent} from '../../Types/CoreEventTypes'; +import type {AccessibilityState} from '../View/ViewAccessibility'; type Event = SyntheticEvent< $ReadOnly<{| @@ -131,6 +132,11 @@ type Props = $ReadOnly<{| * Used to locate this view in UI automation tests. */ testID?: ?string, + + /** + Indicates to accessibility services that UI Component is in a specific State. + */ + accessibilityState?: ?AccessibilityState, |}>; /** @@ -200,7 +206,6 @@ const Slider = ( const style = StyleSheet.compose(styles.slider, props.style); const { - disabled = false, value = 0.5, minimumValue = 0, maximumValue = 1, @@ -230,9 +235,16 @@ const Slider = ( } : null; + const disabled = + props.disabled === true || props.accessibilityState?.disabled === true; + const accessibilityState = disabled + ? {...props.accessibilityState, disabled: true} + : props.accessibilityState; + return ( ', () => { + it('should render as expected', () => { + expect(ReactTestRenderer.create()).toMatchSnapshot(); + }); + + it('should set disabled as false', () => { + // Slider component should set disabled prop as false by default + expect(ReactTestRenderer.create()).toMatchSnapshot(); + expect( + ReactTestRenderer.create( + , + ), + ).toMatchSnapshot(); + }); + it('should set disabled as true', () => { + expect(ReactTestRenderer.create()).toMatchSnapshot(); + expect( + ReactTestRenderer.create( + , + ), + ).toMatchSnapshot(); + }); +}); diff --git a/Libraries/Components/__tests__/__snapshots__/Slider-test.js.snap b/Libraries/Components/__tests__/__snapshots__/Slider-test.js.snap new file mode 100644 index 00000000000000..63c3e3507a55c7 --- /dev/null +++ b/Libraries/Components/__tests__/__snapshots__/Slider-test.js.snap @@ -0,0 +1,121 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render as expected 1`] = ` + +`; + +exports[` should set disabled as false 1`] = ` + +`; + +exports[` should set disabled as false 2`] = ` + +`; + +exports[` should set disabled as true 1`] = ` + +`; + +exports[` should set disabled as true 2`] = ` + +`; diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index f58cd1a465b485..d4689a75454400 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -22,6 +22,7 @@ const { TouchableWithoutFeedback, Alert, StyleSheet, + Slider, Platform, } = require('react-native'); import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter'; @@ -696,6 +697,38 @@ class AccessibilityActionsExample extends React.Component<{}> { } } +function SliderAccessibilityExample(): React.Node { + return ( + + + + + + + + + + + + ); +} + type FakeSliderExampleState = { current: number, textualValue: 'center' | 'left' | 'right', @@ -970,6 +1003,12 @@ exports.examples = [ return ; }, }, + { + title: 'Slider Accessibility Examples', + render(): React.Element { + return ; + }, + }, { title: 'Fake Slider Example', render(): React.Element {