From 35dd86180ba730425b97592ef6e5c4d449caee06 Mon Sep 17 00:00:00 2001
From: Sladyn Nunes <sladynnunes98@gmail.com>
Date: Fri, 21 May 2021 13:34:49 -0700
Subject: [PATCH] Fix/30842 - Add accessibilityState prop in slider (#31145)

Summary:
Accessibility service does not announce "selected" on accessibilityState = {selected: true} of the Button Component.
Issue link - https://github.com/facebook/react-native/issues/30956

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Added] - Add accessibilityState prop to Slider component

Pull Request resolved: https://github.com/facebook/react-native/pull/31145

Test Plan:
Verified accessibility states are read by voiceover and talkback. Some state values aren't handled by iOS and have been identified.

Added snapshot tests to test accessibilityState.disabled = disabled values

`js1 test Slider-test`

Reviewed By: yungsters

Differential Revision: D28337723

Pulled By: lunaleaps

fbshipit-source-id: 72a54d8d9dcf1fafb9785c81da99f32a21f3df00
---
 Libraries/Components/Slider/Slider.js         |  14 +-
 Libraries/Components/__tests__/Slider-test.js |  37 ++++++
 .../__snapshots__/Slider-test.js.snap         | 121 ++++++++++++++++++
 .../Accessibility/AccessibilityExample.js     |  39 ++++++
 4 files changed, 210 insertions(+), 1 deletion(-)
 create mode 100644 Libraries/Components/__tests__/Slider-test.js
 create mode 100644 Libraries/Components/__tests__/__snapshots__/Slider-test.js.snap

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 (
     <SliderNativeComponent
       {...localProps}
+      accessibilityState={accessibilityState}
       // TODO: Reconcile these across the two platforms.
       enabled={!disabled}
       disabled={disabled}
diff --git a/Libraries/Components/__tests__/Slider-test.js b/Libraries/Components/__tests__/Slider-test.js
new file mode 100644
index 00000000000000..5e3a9f47f86b77
--- /dev/null
+++ b/Libraries/Components/__tests__/Slider-test.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import * as React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
+import Slider from '../Slider/Slider';
+
+describe('<Slider />', () => {
+  it('should render as expected', () => {
+    expect(ReactTestRenderer.create(<Slider />)).toMatchSnapshot();
+  });
+
+  it('should set disabled as false', () => {
+    // Slider component should set disabled prop as false by default
+    expect(ReactTestRenderer.create(<Slider />)).toMatchSnapshot();
+    expect(
+      ReactTestRenderer.create(
+        <Slider accessibilityState={{disabled: false}} />,
+      ),
+    ).toMatchSnapshot();
+  });
+  it('should set disabled as true', () => {
+    expect(ReactTestRenderer.create(<Slider disabled />)).toMatchSnapshot();
+    expect(
+      ReactTestRenderer.create(
+        <Slider accessibilityState={{disabled: true}} />,
+      ),
+    ).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[`<Slider /> should render as expected 1`] = `
+<RCTSlider
+  disabled={false}
+  enabled={true}
+  maximumValue={1}
+  minimumValue={0}
+  onChange={null}
+  onResponderTerminationRequest={[Function]}
+  onSlidingComplete={null}
+  onStartShouldSetResponder={[Function]}
+  onValueChange={null}
+  step={0}
+  style={
+    Object {
+      "height": 40,
+    }
+  }
+  value={0.5}
+/>
+`;
+
+exports[`<Slider /> should set disabled as false 1`] = `
+<RCTSlider
+  disabled={false}
+  enabled={true}
+  maximumValue={1}
+  minimumValue={0}
+  onChange={null}
+  onResponderTerminationRequest={[Function]}
+  onSlidingComplete={null}
+  onStartShouldSetResponder={[Function]}
+  onValueChange={null}
+  step={0}
+  style={
+    Object {
+      "height": 40,
+    }
+  }
+  value={0.5}
+/>
+`;
+
+exports[`<Slider /> should set disabled as false 2`] = `
+<RCTSlider
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  disabled={false}
+  enabled={true}
+  maximumValue={1}
+  minimumValue={0}
+  onChange={null}
+  onResponderTerminationRequest={[Function]}
+  onSlidingComplete={null}
+  onStartShouldSetResponder={[Function]}
+  onValueChange={null}
+  step={0}
+  style={
+    Object {
+      "height": 40,
+    }
+  }
+  value={0.5}
+/>
+`;
+
+exports[`<Slider /> should set disabled as true 1`] = `
+<RCTSlider
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  disabled={true}
+  enabled={false}
+  maximumValue={1}
+  minimumValue={0}
+  onChange={null}
+  onResponderTerminationRequest={[Function]}
+  onSlidingComplete={null}
+  onStartShouldSetResponder={[Function]}
+  onValueChange={null}
+  step={0}
+  style={
+    Object {
+      "height": 40,
+    }
+  }
+  value={0.5}
+/>
+`;
+
+exports[`<Slider /> should set disabled as true 2`] = `
+<RCTSlider
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  disabled={true}
+  enabled={false}
+  maximumValue={1}
+  minimumValue={0}
+  onChange={null}
+  onResponderTerminationRequest={[Function]}
+  onSlidingComplete={null}
+  onStartShouldSetResponder={[Function]}
+  onValueChange={null}
+  step={0}
+  style={
+    Object {
+      "height": 40,
+    }
+  }
+  value={0.5}
+/>
+`;
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 (
+    <View>
+      <RNTesterBlock
+        title="Disabled Slider via disabled"
+        description="Verify with TalkBack/VoiceOver announces Slider as disabled">
+        <Slider value={25} maximumValue={100} minimumValue={0} disabled />
+      </RNTesterBlock>
+      <RNTesterBlock
+        title="Disabled Slider via accessibiltyState"
+        description="Verify with TalkBack/VoiceOver announces Slider as disabled">
+        <Slider
+          value={75}
+          maximumValue={100}
+          minimumValue={0}
+          accessibilityState={{disabled: true}}
+        />
+      </RNTesterBlock>
+      <RNTesterBlock
+        title="Selected Slider"
+        description="Verify with TalkBack/VoiceOver announces Slider as selected">
+        <Slider
+          value={75}
+          maximumValue={100}
+          minimumValue={0}
+          accessibilityState={{selected: true}}
+        />
+      </RNTesterBlock>
+    </View>
+  );
+}
+
 type FakeSliderExampleState = {
   current: number,
   textualValue: 'center' | 'left' | 'right',
@@ -970,6 +1003,12 @@ exports.examples = [
       return <AccessibilityActionsExample />;
     },
   },
+  {
+    title: 'Slider Accessibility Examples',
+    render(): React.Element<typeof SliderAccessibilityExample> {
+      return <SliderAccessibilityExample />;
+    },
+  },
   {
     title: 'Fake Slider Example',
     render(): React.Element<typeof FakeSliderExample> {