react-native-slider accessibilityState disabled

[fabOnReact]

Test Cases

1. Slider has disabled and accessibilityState={{disabled: false}}

  <Slider
    disabled
    accessibilityState={{
      disabled: false,
    }}
    onValueChange={value => this.setState({value: value})}
  />

Expected/Actual Result:
The ScreenReader should announce disabled when the focus moves to the Slider.

CLICK TO OPEN TESTS RESULTS

testcase1.mp4

[fabOnReact]

1. Slider has disabled and accessibilityState={{disabled: false}}
2. Slider has disabled
3. Slider has accessibilityState={{disabled: true}}
4. Slider has accessibilityState={{disabled:false}}
5. Slider has disabled={false} and accessibilityState={{disabled:true}}
7. Test Cases on the main branch
7.1. Slider has disabled and accessibilityState={{disabled: false}}
7.3 Slider has accessibilityState={{disabled: true}}
7.5 Slider has disabled={false} and accessibilityState={{disabled:true}}
7.6 Wrong prop type disabled="not a boolean value" with typescript
7.7 Wrong prop type disabled="not a boolean value" with flow on the master branch

[fabOnReact]

Test Cases

2. Slider has disabled

  <Slider
    disabled
    onValueChange={value => this.setState({value: value})}
  />

Expected/Actual Result:

• The Slider is disabled
• The ScreenReader announces disabled.

CLICK TO OPEN TESTS RESULTS

testcase2.mp4

[fabOnReact]

Test Cases

3. Slider has accessibilityState={{disabled: true}}

  <Slider
    accessibilityState={{disabled: true}}
    onValueChange={value => this.setState({value: value})}
  />

Expected/Actual Result:

• The ScreenReader announces disabled when the focus moves to the Slider.
• The Slider is disabled. Users are NOT allowed to interact with the slider.

CLICK TO OPEN TESTS RESULTS

testcase3.mp4

[fabOnReact]

Test Cases

4. Slider has accessibilityState={{disabled:false}}

Expected/Actual Result:

• The ScreenReader does not announce disabled.
• The Slider is not disabled. Users are allowed to interact with the slider.

CLICK TO OPEN TESTS RESULTS

  <Slider
    accessibilityState={{disabled: false}}
    onValueChange={value => this.setState({value: value})}
  />

testcase4.mp4

[fabOnReact]

https://github.com/facebook/react-native/pull/31001/files#r578827409

there is nothing stopping someone from setting disabled="true" accessibilityState={{disabled: false}} or vice-versa.

Test Cases

5. Slider has disabled={false} accessibilityState={{disabled:true}}

  <Slider
    disabled={false}
    accessibilityState={{disabled: true}}
    onValueChange={value => this.setState({value: value})}
  />

Expected/Actual Result:
The Slider is not disabled.

CLICK TO OPEN TESTS RESULTS

testcase5.mp4

[fabOnReact]

Test Cases

6. Wrong prop type disabled="not a boolean value" and accessibilityState={{disabled: "it is not a boolean"}}

CLICK TO OPEN TESTS RESULTS

  <Slider
    disabled="not a boolean value"
    accessibilityState={{disabled: "it is not a boolean"}}
    onValueChange={value => this.setState({value: value})}
  />

2022-01-27.07-12-58.mp4

[fabOnReact]

Summary:

This issue fixes facebook/react-native#30939 (Test Case 7.1, Test Case 7.3, Test Case 7.5) .
The issue is caused by the missing prop accessibilityState in the Slider component.

The solution consists of passing the accessibilityState to the RCTSliderNativeComponent component as previously implemented in other components (for example, Button).

Relevant discussions facebook/react-native#30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.

The solution proposed in this pull request consists of:

1. removing the disabled default prop (related discussions fabOnReact/react-native-slider@fc9f0c4 and fabOnReact/react-native@afb7fc2).
2. If the value of prop accessibilityState.disabled is different from the prop disabled, the prop disabled over-rides the accessibilityState.disabled value.

For example:

<Slider disabled={true} accessibilityState={{disabled: false}} />

becomes:

<Slider disabled={true} accessibilityState={{disabled: true}} />

3. Remove the existing Android java logic

An alternative Solution published in this branch would be:

• not removing the default prop for disabled (false).
• disabled default prop false over-rides accessibilityState.disabled

This alternative solution would not respect the requirement of not having conflicting states for accessibility and non-accessibility users and the approach adopted in react-native Components (for ex. Button).

For example:

<Slider accessibilityState={{disabled: true}} />

would become (as the deafult is disabled={false})

<Slider accessibilityState={{disabled: false}} />

ADDITIONAL NOTES

• <Slider disabled={"true"} /> triggers a wrong type warning with typescript.
• <Slider disabled={"true"} /> does not trigger a wrong type warning with flow.js.

Test Plan:

1. Slider has disabled and accessibilityState={{disabled: false}}
2. Slider has disabled
3. Slider has accessibilityState={{disabled: true}}
4. Slider has accessibilityState={{disabled:false}}
5. Slider has disabled={false} and accessibilityState={{disabled:true}}
7. Test Cases on the main branch
7.1. Slider has disabled and accessibilityState={{disabled: false}}
7.3 Slider has accessibilityState={{disabled: true}}
7.5 Slider has disabled={false} and accessibilityState={{disabled:true}}
7.6 Wrong prop type disabled="not a boolean value" with typescript
7.7 Wrong prop type disabled="not a boolean value" with flow on the master branch

[fabOnReact]

Test Cases

7.7 Wrong prop type disabled="not a boolean value" with flow on the main branch

  <Slider disabled="not a boolean value"  />

Expected Result:
Flow.js displays an error.

Actual Result:
No error displayed.

CLICK TO OPEN TESTS RESULTS

testcase7.7.mp4

[fabOnReact]

Test Cases

7.6 Wrong prop type disabled="not a boolean value" with typescript on the main branch

  <Slider disabled="not a boolean value"  />

Expected/Actual Result:
Typescript displays an error No Overload matches this call.

CLICK TO OPEN TESTS RESULTS

testcase7.6.mp4

[fabOnReact]

https://github.com/facebook/react-native/pull/31001/files#r578827409

there is nothing stopping someone from setting disabled="true" accessibilityState={{disabled: false}} or vice-versa.

Test Cases

7.5 Slider has disabled={false} and accessibilityState={{disabled:true}} (on main branch)

<>
  <Text>This is a Text Component</Text>
  <Slider
    disabled={false}
    accessibilityState={{disabled: true}}
  />
</>

Expected Result:
The Slider is disabled. ScreenReader should announce disabled when the focus moves to the Slider.

Actual Result:
The ScreenReader announces disabled, but the Slider is NOT disabled.

CLICK TO OPEN TESTS RESULTS

testcase7.5.mp4

[fabOnReact]

Test Cases

7.3. Slider has accessibilityState={{disabled: true}} (tested on main branch).

  <Slider
    accessibilityState={{disabled: true}}
    onValueChange={value => this.setState({value: value})}
  />

Expected Result:

• The ScreenReader announces disabled when the focus moves to the Slider.
• The Slider is disabled. Users are NOT allowed to interact with the slider.

Actual Result:

• The ScreenReader announces disabled when the focus moves to the Slider.
• The Slider is NOT disabled.
• Users are allowed to interact with the Slider.
• The ScreenReader announces the interactions but does not announce disabled after onFocus (the first interaction).

CLICK TO OPEN TESTS RESULTS

testCase7.3.mp4

[fabOnReact]

Test Cases

7.1 Slider has disabled set to true and accessibilityState={{disabled: false}} (main branch)

  <Slider
    disabled
    accessibilityState={{
      disabled: false,
    }}
    onValueChange={value => this.setState({value: value})}
  />

Expected Result:
The ScreenReader should announce disabled when the focus moves to the Slider.

Actual Result:
The ScreenReader does not announce disabled when the focus moves to the Slider.

CLICK TO OPEN TESTS RESULTS

testCase7.1.mp4