Commit Graph

13 Commits

Author SHA1 Message Date
Luna Wei 572deaebd9 Remove usage of Picker from Accessibility Example
Summary: Changelog: [Internal] - Remove Picker from accessibility example as a first step to deprecate Picker from react-native

Reviewed By: kacieb

Differential Revision: D29082453

fbshipit-source-id: d1d6eb0514453126351b41c2ca5d72d2c81f5dc9
2021-06-14 21:54:16 -07:00
Dennis Urtubia 44717152ca Adds accessiblity actions on core components (#31532)
Summary:
Android: Adding custom actions (https://github.com/facebook/react-native/issues/30854).
Adds accessiblity actions on core components (Button, TextInput, Text, and Picker).

## Changelog
[General] [Added] - Adds accessiblity actions on core components

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

Test Plan:
- `npm test`
- Rendering of components on `RNTesterApp` using talkback:
    - Check if accessibility actions were available;
    ![image](https://user-images.githubusercontent.com/33161939/118381843-a668c180-b5c5-11eb-9ce4-016a49157dc5.png)
    - Trigger `activate` action for all components;
    ![image](https://user-images.githubusercontent.com/33161939/118381736-7bca3900-b5c4-11eb-82fb-32e824e1b38c.png)

## Notes
- For `TextInput` an unexpected error is raised:
![image](https://user-images.githubusercontent.com/33161939/118381603-d1054b00-b5c2-11eb-93f2-1d5730ee2d24.png)

Reviewed By: kacieb

Differential Revision: D28654294

Pulled By: lunaleaps

fbshipit-source-id: 80dd3f3c7aa27bbaf16ef12997e8f55952a02eb2
2021-05-26 16:49:11 -07:00
Sladyn Nunes 35dd86180b 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
2021-05-21 13:35:56 -07:00
Subramanya Chakravarthy ea609defe8 Disable TouchableOpacity when accessibility disabled is set (#31108)
Summary:
When using a screen reader the TouchableOpacity component disables click functionality.
Fixes Issue https://github.com/facebook/react-native/issues/30951

## 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
-->

[Android] [Changed] - Message

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

Test Plan: Added Exmple to Accessibility

Reviewed By: yungsters

Differential Revision: D28334356

Pulled By: kacieb

fbshipit-source-id: 3a3e8efaf57272d2091392f6d7d3e0ba0f2a9adc
2021-05-18 13:35:21 -07:00
fabriziobertoglio1987 333b46c4b0 Fix Image does not announce "disabled" (#31252)
Summary:
This issue fixes https://github.com/facebook/react-native/issues/30935 screenreader does not announce Image disabled accessibilityState.

As stated in AOSP View.java, the framework will handle routine focus movement, views indicate their willingness to take focus through the `isFocusable` method https://bit.ly/3dCnyHb

```
* <p>The framework will handle routine focus movement in response to user input. This includes
* changing the focus as views are removed or hidden, or as new views become available. Views
* indicate their willingness to take focus through the {link #isFocusable} method. To change
* whether a view can take focus, call {link #setFocusable(boolean)}.
```

The property is updated through its shadow node `ReactImageManager` method `setAccessible` https://bit.ly/3dDuK5L

```java
 * <p>Instances of this class receive property updates from JS via @{link UIManagerModule}.
 * Subclasses may use {link #updateShadowNode} to persist some of the updated fields in the node
 * instance that corresponds to a particular view type.
```

## 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
-->

[Android] [Fixed] - adding setAccessible to ReactImageManager to allow screenreader announce Image accessibilityState of "disabled"

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

Test Plan:
**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

Enable audio to hear the screenreader

TEST SCENARIO
- The user moves the screenreader focus to an image and the screenreader reads the Image accessibilityLabel "plain network image"

RESULT
- The screenreader announces the accessibilityState disabled after reading the Image accessibilityLabel "plain network image"

```javascript
<Image
  accessible={true}
  accessibilityLabel="plain network image"
  accessibilityState={{disabled: true}}
  source={fullImage}
  style={styles.base}
/>
```

<video src="https://user-images.githubusercontent.com/24992535/112670432-2f366d00-8e61-11eb-843f-4b56f4a06a91.mp4" width="700" />

</p>
</details>

Reviewed By: kacieb

Differential Revision: D28194597

Pulled By: lunaleaps

fbshipit-source-id: 5f89ce5c714405506261885ac6fea2c15c2e1f23
2021-05-04 14:29:58 -07:00
ananta 2b49664cb8 Add flow types to AccessibilityExample.js (#31384)
Summary:
[AccessibilityExample.js](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js) does not have proper Flow types. Without Flow typing enforced, it is easy for bugs to be introduced when making changes to this file. This pull request enforces Flow typing in this file.

## Changelog
[General] [Fixed] - Fixed return type of `AccessibilityRoleAndStateExample`
[General] [Added] - Added Flow Types to AccessibilityExample.js

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

Test Plan:
Before:
![Screen Shot 2021-04-19 at 7 39 58 PM](https://user-images.githubusercontent.com/12180395/115248265-42c6b200-a147-11eb-8dad-058f646a1550.png)

After:
![Screen Shot 2021-04-19 at 7 40 10 PM](https://user-images.githubusercontent.com/12180395/115248284-465a3900-a147-11eb-8bff-4050ce6bd806.png)

Reviewed By: yungsters, nadiia

Differential Revision: D28004170

Pulled By: kacieb

fbshipit-source-id: 77bc44bbaf7a19c034a92a2daef302d5dc6078fa
2021-04-28 15:29:54 -07:00
Tim Yung ebdf36c198 RN: Upgrade AccessibilityInfo.removeEventListener Call Sites
Summary:
Upgrades all users of `AccessibilityInfo.removeEventListener` to instead use the return value of `AccessibilityInfo.addEventListener`. This will avoid soft errors from being fired for Facebook products.

Changelog:
[Internal]

Reviewed By: kacieb

Differential Revision: D27595097

fbshipit-source-id: 7133db83c6313ae04e43fc0cc8667f562ba1af2b
2021-04-08 17:37:08 -07:00
fabriziobertoglio1987 7ee2acc6c8 Selected State does not annonce when TextInput Component selected (#31144)
Summary:
This issue fixes https://github.com/facebook/react-native/issues/30955 and is a follow up to pr https://github.com/facebook/react-native/pull/24608 which added the basic Accessibility functionalities to React Native.

TextInput should announce "selected" to the user when screenreader focused.
The focus is moved to the TextInput by navigating with the screenreader to the TextInput.

This PR adds call to View#setSelected in BaseViewManager https://developer.android.com/reference/android/view/View#setSelected(boolean)
The View#setSelected method definition https://github.com/aosp-mirror/platform_frameworks_base/blob/master/core/java/android/view/View.java
```java
/**
 * Changes the selection state of this view. A view can be selected or not.
 * Note that selection is not the same as focus. Views are typically
 * selected in the context of an AdapterView like ListView or GridView;
 * the selected view is the view that is highlighted.
 *
 * param selected true if the view must be selected, false otherwise
 */
public void setSelected(boolean selected) {
  if (((mPrivateFlags & PFLAG_SELECTED) != 0) != selected) {
    // ... hidden logic
    if (selected) {
      sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_SELECTED);
    } // ... hidden logic
  }
}
```

VoiceOver and TalkBack was tested with video samples included below.

## 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
-->

[Android] [Fixed] - Fix Selected State does not announce when TextInput Component selected on Android

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

Test Plan:
**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

**ENABLE THE AUDIO** to hear the TalkBack announcing **SELECTED** when the user taps on the TextInput

```javascript
        <TextInput
          accessibilityLabel="element 20"
          accessibilityState={{
            selected: true,
          }} />
```

| selected is true |
|:-------------------------:|
| <video src="https://user-images.githubusercontent.com/24992535/111652826-afc4f000-8807-11eb-9c79-8c51d7bf455b.mp4" width="700" height="" /> |

```javascript
        <TextInput
          accessibilityLabel="element 20"
          accessibilityState={{
            selected: false,
          }} />
```

| selected is false |
|:-------------------------:|
| <video src="https://user-images.githubusercontent.com/24992535/111652919-c10dfc80-8807-11eb-8244-83db6c327bcd.mp4" width="700" height="" /> |

The functionality does not present issues on iOS

| iOS testing |
|:-------------------------:|
| <video src="https://user-images.githubusercontent.com/24992535/111647656-f401c180-8802-11eb-9fa9-a4c211cf1665.mp4" width="400" height="" /> |

</p>
</details>

</p>
</details>

Reviewed By: blavalla

Differential Revision: D27306166

Pulled By: kacieb

fbshipit-source-id: 1b3cb37b2d0875cf53f6f1bff4bf095a877b2f0e
2021-04-05 11:51:12 -07:00
Kacie Bawiec feebfe1ef6 Fix typo in sendAccessibilityEvent in AccessibilityExample.js
Summary:
Changelog:
[Fixed] Fix typo in sendAccessibilityEvent in AccessibilityExample.js

Reviewed By: mdvacca

Differential Revision: D27160274

fbshipit-source-id: eee0a6cefa559b29ed73890abff3a44dacb19b62
2021-03-18 12:23:35 -07:00
Joshua Gross 99b7052248 Implement sendAccessibilityEvent in the React(Fabric/non-Fabric) renderer
Summary:
`sendAccessibilityEvent_unstable` is a cross-platform, Fabric/non-Fabric replacement for previous APIs (which went through UIManager directly on Android, and a native module on iOS).

Changelog: [Added] sendAccessibilityEvent_unstable API in AccessibilityInfo and sendAccessibilityEvent in React renderer

Reviewed By: kacieb

Differential Revision: D25821052

fbshipit-source-id: 03f7a9878c95e8395f9102b3e596bfc9f03730e0
2021-01-27 17:37:38 -08:00
Su Min Kim 84dde677d9 Add accessibility examples (#30379)
Summary:
Added examples to RNTester for the AccessibilityInfo API for:
1. SetAccessibilityFocus()
2. isReduceMotionEnabled()
3. iOS Only
   a. isBoldTextEnabled()
   b. isGrayScaleEnabled()
   c. isInvertColorsEnabled()
   d. isReduceTransparencyEnabled()

## 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 new examples to the Accessibility API page

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

Test Plan: ![iOS GIF](http://g.recordit.co/pmzvQXYjdD.gif)

Reviewed By: TheSavior

Differential Revision: D25245329

Pulled By: rickhanlonii

fbshipit-source-id: e9c11c775410075199b4e1011b3dac0acd972e89
2020-12-08 10:17:44 -08:00
Ankit Tiwari 1270873ed6 RNTester UI Redesign (#29685)
Summary:
This Pull request adds the UI changes to the RNTester app as discussed in the MLH Fellowship.

This list is not exhaustive.

- The initial App screen is redesigned.
  - A bottom Navbar has been added.
   - Filter pills are added.
   - The list card UI is updated.

- The example page UI is updated.

- Recently Viewed Sections are added. It shows the last 5 recently viewed components/APIs.

- Bookmarking functionality is added.

- The documentation URL is added to the example page.

- RNTester doesn't lose its state on a hard refresh (even on iOS).

<img width="373" src="https://user-images.githubusercontent.com/22813027/90530113-20346180-e192-11ea-8ef6-789fa25b402b.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530112-20346180-e192-11ea-9539-706b540fcc5f.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530100-1d397100-e192-11ea-8836-b88070643233.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530110-1f9bcb00-e192-11ea-936b-64ee75fa4289.png" />

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

Test Plan:
Imported from GitHub, without a `Test Plan:` line.

{F302717939}

Note: this failed **before** this diff too:

{F302745716}

Reviewed By: mdvacca, cpojer

Differential Revision: D23240434

fbshipit-source-id: 65e2766a6a097eca0e0d0fda8dadf6871e9276c2

Co-authored-by: agarwalmanya <manya18ag@gmail.com>
Co-authored-by: chirag-singhal <csinghal208@gmail.com>
Co-authored-by: Ansh Godha <ag759@cornell.edu>
Co-authored-by: Yash Kumar Verma <yk.verma2000@gmail.com>
Co-authored-by: Sanskar Jethi <sansyrox@gmail.com>
Co-authored-by: Aniketh Saha <anik220798@gmail.com>
Co-authored-by: Xtremilicious <nilarjundas@outlook.com>
Co-authored-by: Jani Evakallio <jani.evakallio@gmail.com>
2020-08-26 08:45:57 -07:00
stealthanthrax 63992c0b96 Migrating RNTester to Packages Directory (#29567)
Summary:
## 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
-->
This PR aims to migrate the RNTester App to `packages` directory. But is currently, open to inspect the CI issues and resolve the merge conflicts.

Currently done
 - Working on iOS
 - Working on Android
 - Detox Tests working on iOS

Need to work on
 - Errors generated by the CI builds

[General] [Changed] - Migrated the RNTester App to the packages directory.

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

Test Plan: It runs on both ios and android for now and the detox iOS builds are working.

Reviewed By: cpojer

Differential Revision: D23034761

Pulled By: rickhanlonii

fbshipit-source-id: e04bb06e1c7ef15d340206090d1575a871b9e6f5
2020-08-19 17:57:08 -07:00