TouchableWithoutFeedback Component doesn't disable click functionality when disabled #30953

amarlette · 2021-02-10T19:15:14Z

Description

When using a screen reader the TouchableWithoutFeedback component doesn't disable click functionality.

This issue is covered in-depth by parent issue #30840, please check there for more details.

React Native version:

0.63

saurabhkacholiya · 2021-03-12T07:08:09Z

Hi, @amarlette I am new to opensource can I pick up this issue?

amarlette · 2021-03-15T11:44:28Z

Yes you can! I would recommend checking out our contribution guide (https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md) to help get you started.

saurabhkacholiya · 2021-03-15T18:41:35Z

I have tested TouchableWithoutFeedback is working fine this commit Here solve the issue

amarlette · 2021-03-15T23:33:05Z

@saurabhkacholiya can you attach the test that you used to confirm this?

fabOnReact · 2021-03-16T17:07:41Z

I have tested TouchableWithoutFeedback is working fine this commit Here solve the issue

I would say no

react-native/Libraries/Components/Pressable/Pressable.js

Line 142 in 1c7d9c8

function Pressable(props: Props, forwardedRef): React.Node {

react-native/Libraries/Components/Pressable/Pressable.js

Lines 171 to 174 in 1c7d9c8

    
           const accessibilityState = 
        
             disabled != null 
        
               ? {...props.accessibilityState, disabled} 
        
               : props.accessibilityState;

those changes are in the Pressable component and I could not find any usage of Pressable in TouchableWithoutFeedback.
This makes sense as TouchableWithoutFeedback was built before Pressable, but I don't know well those .js libraries...
Tomorrow I will further investigate and try to add the props in

react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js

Line 118 in e04fa92

accessible: this.props.accessible !== false,

☮️ 🙏

saurabhkacholiya · 2021-03-16T18:58:18Z

@amarlette I am adding snapshots and test cases please validate.
Test Cases

describe('<TouchableWithoutFeedback />', () => {
  it('should render as expected', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );

    expect(instance.toJSON()).toMatchSnapshot();
  });
});

describe('<TouchableWithoutFeedback disabled={true} />', () => {
  it('should be disabled when disabled is true', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback disabled={true}>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );
    expect(instance.toJSON()).toMatchSnapshot();
  });
});

describe('<TouchableWithoutFeedback disabled={true} accessibilityState={{}} />', () => {
  it('should be disabled when disabled is true and accessibilityState is empty', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback disabled={true} accessibilityState={{}}>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );
    expect(instance.toJSON()).toMatchSnapshot();
  });
});

describe('<TouchableWithoutFeedback disabled={true} accessibilityState={{checked: true}} />', () => {
  it('should keep accessibilityState when disabled is true', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback
        disabled={true}
        accessibilityState={{checked: true}}>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );
    expect(instance.toJSON()).toMatchSnapshot();
  });
});

describe('<TouchableWithoutFeedback disabled={true} accessibilityState={{disabled: false}} />', () => {
  it('should overwrite accessibilityState with value of disabled prop', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback
        disabled={true}
        accessibilityState={{disabled: false}}>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );
    expect(instance.toJSON()).toMatchSnapshot();
  });
});

SnapShot

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<TouchableWithoutFeedback /> should render as expected 1`] = `
<Text
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback /> should render as expected: should deep render when mocked (please verify output manually) 1`] = `
<Text
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback /> should render as expected: should deep render when not mocked (please verify output manually) 1`] = `
<Text
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback /> should render as expected: should shallow render as <TouchableWithoutFeedback /> when mocked 1`] = `
<TouchableWithoutFeedback>
  <Text>
    Touchable
  </Text>
</TouchableWithoutFeedback>
`;

exports[`<TouchableWithoutFeedback /> should render as expected: should shallow render as <TouchableWithoutFeedback /> when not mocked 1`] = `
<TouchableWithoutFeedback>
  <Text>
    Touchable
  </Text>
</TouchableWithoutFeedback>
`;

exports[`<TouchableWithoutFeedback disabled={true} /> should be disabled when disabled is true 1`] = `
<Text
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{}} /> should be disabled when disabled is true and accessibilityState is empty 1`] = `
<Text
  accessibilityState={Object {}}
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{checked: true}} /> should keep accessibilityState when disabled is true 1`] = `
<Text
  accessibilityState={
    Object {
      "checked": true,
    }
  }
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{disabled: false}} /> should overwrite accessibilityState with value of disabled prop 1`] = `
<Text
  accessibilityState={
    Object {
      "disabled": false,
    }
  }
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`TouchableHighlight renders correctly 1`] = `
<View
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={Object {}}
>
  <Text>
    Touchable
  </Text>
</View>
`;

saurabhkacholiya · 2021-03-16T19:07:10Z

@fabriziobertoglio1987 Pressability is being used in TouchableWithoutFeedback

react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js

Lines 11 to 13 in 3ff7e86

import Pressability, {

type PressabilityConfig,

} from '../../Pressability/Pressability';

react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js

Lines 92 to 95 in 3ff7e86

class TouchableWithoutFeedback extends React.Component<Props, State> {

state: State = {

pressability: new Pressability(createPressabilityConfig(this.props)),

};

fabOnReact · 2021-03-16T19:38:57Z

thanks @saurabhkacholiya but sorry, I think you are wrong.
I would like to prepare a Pull Request for this issue tomorrow.

Your snapshot #30953 (comment) is wrong accessibilityState={ disabled: false}

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{disabled: false}} /> should overwrite accessibilityState >with value of disabled prop 1`] = `
<Text
 accessibilityState={
   Object {
     "disabled": false,
   }
 }

while the commit 1c7d9c8 has the correct snapshot with accessibilityState={ disabled: true}

react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap

Lines 283 to 289 in 1c7d9c8

    
           exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> should overwrite accessibilityState with value of disabled prop: should deep render when not mocked (please verify output manually) 1`] = ` 
        
           <View 
        
             accessibilityState={ 
        
               Object { 
        
                 "disabled": true, 
        
               } 
        
             }

Facebook Team requested us to build this feature in accessability and change accessabilityState.disabled based on disabled prop.

fabOnReact · 2021-03-18T16:41:23Z

@saurabhkacholiya as you have already wrote test for this fix, you can check my solution, test it and verify it actually works and then publish a pull request with your github account fabOnReact@153a37c

I did not test it, so you should investigate in details. If you don't want to publish the pull request, I'll be happy to do it myself.
thanks a lot. Bye

saurabhkacholiya · 2021-03-18T18:41:18Z

@fabriziobertoglio1987 Sure I would like to give a pull request Thanks a lot. can you just validate the snapshot

exports[`<TouchableWithoutFeedback /> should render as expected 1`] = `
<Text
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} /> should be disabled when disabled is true 1`] = `
<Text
  accessibilityState={
    Object {
      "disabled": true,
    }
  }
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{}} /> should be disabled when disabled is true and accessibilityState is empty 1`] = `
<Text
  accessibilityState={Object {}}
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{checked: true}} /> should keep accessibilityState when disabled is true 1`] = `
<Text
  accessibilityState={
    Object {
      "checked": true,
    }
  }
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{disabled: false}} /> should overwrite accessibilityState with value of disabled prop 1`] = `
<Text
  accessibilityState={
    Object {
      "disabled": false,
    }
  }
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

fabOnReact · 2021-03-19T15:05:53Z

I notice just now

1c7d9c8#diff-466095fa96dd3e4ad5dffc7f31d8da5084c8a0acd3396a8b65b45cd99c48dd4bR320-R330

when you run the test in shallow render, the test output is not correct .. but seems to be ok for the Facebook team ... so I would not worry about that

The important thing is that they work when deep rendering the output

1c7d9c8#diff-466095fa96dd3e4ad5dffc7f31d8da5084c8a0acd3396a8b65b45cd99c48dd4bR283-R304

Results in snapshot are similar to commit facebook@1c7d9c8 facebook#30953 (comment)

amarlette · 2021-04-05T22:28:50Z

@carloscuesta thank you for opening up a PR for this issue!

amarlette added Platform: Android Android applications. Component: TouchableWithoutFeedback Accessibility Needs: Triage 🔍 labels Feb 10, 2021

amarlette mentioned this issue Feb 10, 2021

Android: Disabled States does not announce or disable function for some components #30840

Closed

19 tasks

amarlette added Good first issue Interested in collaborating? Take a stab at fixing one of these issues. and removed Needs: Triage 🔍 labels Mar 5, 2021

fabOnReact added a commit to fabOnReact/react-native that referenced this issue Mar 19, 2021

switch test case with snapshot (verified manually)

eb410cd

Results in snapshot are similar to commit facebook@1c7d9c8 facebook#30953 (comment)

carloscuesta mentioned this issue Apr 4, 2021

Disable accessibilityState when TouchableWithoutFeedback is disabled #31297

Closed

facebook-github-bot closed this as completed in 6971640 Apr 16, 2021

facebook locked as resolved and limited conversation to collaborators Apr 16, 2022

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TouchableWithoutFeedback Component doesn't disable click functionality when disabled #30953

TouchableWithoutFeedback Component doesn't disable click functionality when disabled #30953

amarlette commented Feb 10, 2021 •

edited

Loading

saurabhkacholiya commented Mar 12, 2021

amarlette commented Mar 15, 2021

saurabhkacholiya commented Mar 15, 2021

amarlette commented Mar 15, 2021

fabOnReact commented Mar 16, 2021

saurabhkacholiya commented Mar 16, 2021

saurabhkacholiya commented Mar 16, 2021

fabOnReact commented Mar 16, 2021 •

edited

Loading

fabOnReact commented Mar 18, 2021 •

edited

Loading

saurabhkacholiya commented Mar 18, 2021

fabOnReact commented Mar 19, 2021

amarlette commented Apr 5, 2021

TouchableWithoutFeedback Component doesn't disable click functionality when disabled #30953

TouchableWithoutFeedback Component doesn't disable click functionality when disabled #30953

Comments

amarlette commented Feb 10, 2021 • edited Loading

Description

React Native version:

saurabhkacholiya commented Mar 12, 2021

amarlette commented Mar 15, 2021

saurabhkacholiya commented Mar 15, 2021

amarlette commented Mar 15, 2021

fabOnReact commented Mar 16, 2021

saurabhkacholiya commented Mar 16, 2021

saurabhkacholiya commented Mar 16, 2021

fabOnReact commented Mar 16, 2021 • edited Loading

fabOnReact commented Mar 18, 2021 • edited Loading

saurabhkacholiya commented Mar 18, 2021

fabOnReact commented Mar 19, 2021

amarlette commented Apr 5, 2021

amarlette commented Feb 10, 2021 •

edited

Loading

fabOnReact commented Mar 16, 2021 •

edited

Loading

fabOnReact commented Mar 18, 2021 •

edited

Loading