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 {