Commit Graph

70 Commits

Author SHA1 Message Date
Maciej Jastrzębski 0f39fc3000 fix(a11y): aria-hidden support for Text, non-editable TextInput and Image (#53364)
Summary:
Fixes https://github.com/facebook/react-native/issues/53350

This PR adds support for missing `aria-hidden` prop handling on:
- `Text`
- non-editable `TextInput`
- `Image`

The changes are pretty simple and analogous to `View` logic:
- iOS: setting `accessibilityElementsHidden`, `accessible` (for `Image`)
- Android: setting `importantForAccessibility="no-hide-descendents"

Note: [according to MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden) `aria-hidden` should not be used on focusable elements, which excludes editable `TextInput`

## Changelog:

[GENERAL] [FIXED] `aria-hidden` support for `Text`, non-editable `TextInput` and `Image`

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

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

Test Plan:
Added new section to RN Tester (APIs => Accessibility => aria-hidden

### After (iOS/Android)

https://github.com/user-attachments/assets/c62f8beb-7cb1-4919-833d-3fb906309cac

https://github.com/user-attachments/assets/78ca5e28-a858-4fd6-ac1c-5ec87872f3fc

### Before (iOS/Android)

https://github.com/user-attachments/assets/84560373-4b31-4793-8997-ee14daa77990

https://github.com/user-attachments/assets/b20074c9-f021-4a90-bce5-75e440a4bbc3

Reviewed By: rshest

Differential Revision: D81043503

Pulled By: javache

fbshipit-source-id: 26b2660a75afcdedba07bee980d8c7f154087ae2
2025-09-01 06:05:43 -07:00
Sam Zhou 0530ea3349 Migrate to suppression with error code in xplat: 1/n (#53439)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53439

Changelog: [Internal]

Reviewed By: panagosg7

Differential Revision: D80809220

fbshipit-source-id: 6f432d8302934b9fee9780ac1d6ba6c87c0b3899
2025-08-22 10:35:39 -07:00
Sam Zhou cf664c65e2 Standardize subtyping error code into incompatible-type in react native and metro (#53312)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53312

Changelog: [Internal]

Reviewed By: jbrown215

Differential Revision: D80400976

fbshipit-source-id: 196af69c0b9621b2a2675b232406639773e04933
2025-08-18 09:04:31 -07:00
Sam Zhou 23c8787fe2 Add annotations to fix future errors after fix for unsound array types (#52691)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52691

Unannotated array literals are unsound in Flow right now. This diff adds in annotations and makes a few things readonly, to reduce future errors.

Changelog: [Internal]

Reviewed By: marcoww6

Differential Revision: D78519638

fbshipit-source-id: d98a7668ecf97bcc87dcb3fad25ade736d885d9a
2025-07-17 17:30:43 -07:00
Joe Vilches 7e8eadc041 Fix accessibility order example (#52271)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52271

In my haste I messed up a few of these. Either type in the text, or giving them props they should not have.

Changelog: [Internal]

Reviewed By: jorge-cab

Differential Revision: D77310876

fbshipit-source-id: 9c5a28285d4bb3673fe99630fa7ed97033b17904
2025-06-25 13:06:08 -07:00
Joe Vilches 62d8d30652 Revamp the accessibility order example in RNTester (#52122)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52122

Would love to have a place with all the edge cases we can come back to when we try and tweak things.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D76942595

fbshipit-source-id: ce6e293e2c068383e54404af71a29a0586dbc04e
2025-06-23 11:07:52 -07:00
Tim Yung 1977dd6596 RN: Sort Pragmas in Headers (#51554)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51554

Sorts pragma directives file headers in React Native.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D75264593

fbshipit-source-id: 9e4b253dd0fc94dc2fc469d7114b93a8aae305f4
2025-05-22 21:18:53 -07:00
Tim Yung 3e70714cff RN: Prefer Destructured Import for useEffect (#51405)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51405

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D74894042

fbshipit-source-id: 93fbadb32e4a1225836db9d729d7bf502ebddd84
2025-05-16 16:33:18 -07:00
Tim Yung 1bf167ce97 RN: Prefer Destructured Import for useRef (#51404)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51404

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D74893440

fbshipit-source-id: 9032f1e867a34b9cfa808f920a38f2630046eed7
2025-05-16 16:33:18 -07:00
Tim Yung 00108a1ac3 RN: Prefer Destructured Import for useState (#51403)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51403

Prefers using this as a destructured import instead of as a member expression of `React`.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D74891875

fbshipit-source-id: 981e85b5da84950c9e66e8d6b6496019e536711d
2025-05-16 16:33:18 -07:00
Dawid Małecki ddcab831b1 Migrate already root exported deep imports in rn-tester. (#50958)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50958

In rn-tester package there are many react-native deep imports which will be deprecated in the future. It is a starter for migrating rn-tester to using root imports instead. Only deep imports that are already root exported are changed. This diff avoids using `CodegenTypes` as it causes build errors and will be resolved in next stages.

Besides import changes, `PointerEvent` type is now also exported from the root.

Changelog:
[Internal]

Reviewed By: huntie

Differential Revision: D73656526

fbshipit-source-id: 5814a3d9c6a04b1236581dbbe291cd109e2c71c0
2025-04-28 07:24:46 -07:00
Joe Vilches f466e43a15 Label coopting RN Tester example (#50812)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50812

tsia, adding some accessibility examples that we have refined so far this half.
Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D73283176

fbshipit-source-id: 5bb451c1e79cd8bc92f333ef2fce82669ad0e971
2025-04-21 19:16:23 -07:00
Joe Vilches e9a0747a8f Text with links RN Tester example (#50811)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50811

tsia, adding some accessibility examples that we have refined so far this half.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D73281713

fbshipit-source-id: 42db49feba5c232e699afe01916425ddf11f4aea
2025-04-21 19:16:23 -07:00
Joe Vilches dc13a45907 Accessibility Order RN Tester example (#50810)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50810

tsia, adding some accessibility examples that we have refined so far this half.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D73280582

fbshipit-source-id: a1cc572522729d06b9a0227f0e5731e698f86cc3
2025-04-21 19:16:23 -07:00
Jakub Piasecki bae8955000 Align press and scroll events with OSS (#49424)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49424

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D69655561

fbshipit-source-id: c36036a2abb43dd75c41582f2a27e7f9d3509044
2025-02-19 03:43:07 -08:00
oddlyspaced e70202e606 feat(Android): add support for detecting grayscale mode enabled on android (#47497)
Summary:
On android the isGrayScaleEnabled method of AccessibilityInfo always returns false due to missing implementation. This PR fills the gap by providing the native module logic for checking grayscale mode.

## Changelog:
- Added native module code to check for grayscale mode on android
- Updated js accessibility info module  to return the correct promise instead of default false for isGrayScaleEnabled()
- Moved the test for isGrayScaleEnabled() out of ios scope to common Android and iOS scope

[ANDROID] [ADDED] - logic to check for grayscale mode on android

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

Test Plan:
Tested on :
- Google Pixel 7 Pro (Android 14)
- OnePlus 12 (Android 14)
- Pixel 6 (Android 15)

Reviewed By: cortinico

Differential Revision: D65662583

Pulled By: javache

fbshipit-source-id: 39f9ce37c9375b5380257847395393045eedbadc
2024-11-11 07:38:21 -08:00
Sam Zhou cd9ece0553 Pre-suppress errors ahead of turn on partial react 19 ref-as-prop support
Summary:
`react.ref_as_prop=experimental.partial_support` will expose errors where a ref prop is passed to a function component without ref prop. This diff pre-suppresses the newly exposed errors.

Changelog: [Internal]

Reviewed By: gkz

Differential Revision: D65686695

fbshipit-source-id: f241cc40f3ac414a2960dec60d9ba4633e5f93c0
2024-11-08 13:52:27 -08:00
oddlyspaced cc1d2853fb feat(Android): add support for invert colors check on android accessibility (#47341)
Summary:
This PR provides a fix for the long existing issue of missing check for invert color in accessibility options on Android.
Reference Issue : https://github.com/facebook/react-native/issues/30870

## Changelog:
- Added native module code to check for invert color settings value
- Updated js module to return a proper promise instead of default false for isInvertColorsEnabled()

Pick one each for the category and type tags:

[ANDROID] [FIXED] - Missing isInvertColorsEnabled implementation for Android

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

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

Test Plan: Tested on OnePlus 12 with Android 14 and Pixel 6 with Android 15. The try catch exists because in some cases if the switch hasn't been toggled before the android system raises the missing settings exception.

Reviewed By: cortinico, fabriziocucci

Differential Revision: D65419632

Pulled By: javache

fbshipit-source-id: ddb103445a9d0f318e52ba9d23750140ce5a7ed0
2024-11-04 10:06:10 -08:00
Peter Abbondanzo 09682b5109 Fix dark mode text (#46898)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46898

Replaces *many* `Text` component usages with `RNTesterText`: a thin wrapper around `Text` that applies color based on the color scheme chosen by the user. It makes text legible for dark mode across 41 different example files. This changes intentionally do not touch a few larger component sites that expand beyond RNTester, like `Animated` and `NewAppScreen`

Changelog: [Internal]

Reviewed By: rshest

Differential Revision: D64053464

fbshipit-source-id: 9516fef2afe1b364eb38e85e3a2dbb5c434e44db
2024-10-10 11:02:18 -07:00
Panos Vekris 40a4feb681 replace '$TEMPORARY$string<>' with 'string' (#46876)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46876

* Used codemods of [this commit](https://www.internalfb.com/intern/commit/cloud/FBS/3a8982d63197fff7bac8b6d448545ec9660f331e)
* `js1 flow-runner codemod flow/replaceTempStringWithString`
* `js1 flow-runner codemod flow/simplifyUnionsOfString`

Changelog: [internal]

Reviewed By: SamChou19815

Differential Revision: D63991775

fbshipit-source-id: 5b9d1fdf045405230ca2b0969357ae92479692b5
2024-10-07 19:18:14 -07:00
Riccardo Cipolleschi 303e0ed764 Fix Increment and Decrement accessibility actions (#46617)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46617

This changes fixes the Increment/Decrement accessibility actions on iOS with the New Architecture.

## Changelog
[iOS][Fixed] - Make sure that the Increment and Decrement accessibility actions works on iOS

Reviewed By: javache

Differential Revision: D63263830

fbshipit-source-id: 99dca14a002e098db2d3b0e268af32cdab6ce786
2024-09-24 09:24:24 -07:00
Sam Zhou 5b96e90f77 Replace React.Element<any> and unnecessarily specific React.Element with React.MixedElement (#45923)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45923

Changelog: [Internal]

Reviewed By: gkz

Differential Revision: D60872182

fbshipit-source-id: b81fb43968c52cbfdb4a9fa57f1175aabc2a3939
2024-08-06 21:33:08 -07:00
Alex Taylor (alta) 739a8dfcf4 Deploy 0.234.0 to xplat
Summary: Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D56280192

fbshipit-source-id: 68e0288bb214644d24f3d9f132c3ffff2a3d512a
2024-04-18 16:40:54 -07:00
zhongwuzw d181f06b58 Fix rn-tester Accessibility example label color in dark mode (#44061)
Summary:
Fix rn-tester Accessibility example label color in dark mode

## Changelog:

[INTERNAL] [FIXED] - Fix rn-tester Accessibility example label color in dark mode

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

Test Plan:
Before:
![image](https://github.com/facebook/react-native/assets/5061845/286f25c1-3e9f-49d0-876b-8da552ecf5a9)

After fix:
![image](https://github.com/facebook/react-native/assets/5061845/264bfea4-c65b-4d72-be91-2fe72acbbf88)

Reviewed By: NickGerleman

Differential Revision: D56064680

Pulled By: dmytrorykun

fbshipit-source-id: bdf63939948803d15b2b730df567fce22160de73
2024-04-16 03:30:09 -07:00
Sam Zhou 2053364e5a Update hermes-parser and related packages in fbsource to 0.20.0
Summary:
Bump hermes-parser and related packages to [0.20.0](https://github.com/facebook/hermes/blob/main/tools/hermes-parser/js/CHANGELOG.md).

Changelog: [internal]

Reviewed By: alexmckenley

Differential Revision: D54368487

fbshipit-source-id: a5a05f1e499ff5d8bda4649433bd285f7215d3da
2024-02-29 14:19:29 -08:00
Moti Zilberman d6e0bc714a Enable lint/sort-imports everywhere (#41334)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41334

TSIA.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D51025812

fbshipit-source-id: e10d437be775a6b80946483aa96460f34927f870
2023-11-06 12:59:38 -08:00
Gijs Weterings 67c1a806e6 Flow strictify xplat/js/react-native-github where possible (#41051)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41051

Strictifies flow to flow strict-local in files where doing that doesn't cause new flow errors.

Changelog: Internal

Reviewed By: yungsters

Differential Revision: D50369011

fbshipit-source-id: b4a5a26b839b7327a3178e6f5b35246dea365a38
2023-10-18 05:36:33 -07:00
David Richey da027dd2fd Pre-suppress unused-promise lint errors in xplat/js (#36590)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36590

Pre-suppress unused-promise lint errors in xplat/js. The next diff enables the lint.

See https://flow.org/en/docs/linting/rule-reference/#toc-unused-promise for more details.

Changelog: [Internal]

drop-conflicts
bypass-lint

Reviewed By: pieterv

Differential Revision: D43967290

fbshipit-source-id: f36242a732dbc18bf7482adfb46ca2b77e1b1493
2023-03-22 18:24:22 -07:00
Nick Gerleman a999f0d2f3 Cleanup RNTesterExampleFilter/RNTesterPage/RNTesterBlock Spacers
Summary:
Right now RNTestePage either adds a large spacer to the end of content, unless `noSpacer` is added. But with `noSpacer`, scrolling content may not be reachable because we are putting padding on the wrong container.

This fixes that and removes a few cases where we had multi hundred px empty space in favor of uniformly taking up the parent, and a 10px padding. This also moves the constant margin at the top of RNTesterBlock to the container, so that in the E2E container we can save the 30px.

Changelog:
[Internal]

Reviewed By: javache

Differential Revision: D44197303

fbshipit-source-id: 8dc67f3588bc28316e2fee8d25a0bc59995f1728
2023-03-20 11:14:16 -07:00
David Vacca ca0d565a3c Back out "1/2 TextInput accessibilityErrorMessage (Talkback, Android)"
Summary:
This diff is reverting PR https://github.com/facebook/react-native/pull/33468

Due to an increase of java.lang.IllegalStateException caused by the PR

Original commit changeset: cd80e9a1be8f

Original Phabricator Diff: D38410635

Changelog:
[Android][Fixed] - removed logic that calls the [AccessibilityNodeInfo#setError][10] and [#setContentInvalid][13] method to display the error message in the TextInput - Revert of PR https://github.com/facebook/react-native/pull/33468

Reviewed By: NickGerleman, makovkastar

Differential Revision: D44032331

fbshipit-source-id: 732ed0cf23e4f30ae00c51dace851a3fdfe65c01
2023-03-14 05:42:06 -07:00
fabriziobertoglio1987 cbe934bcff 1/2 TextInput accessibilityErrorMessage (Talkback, Android) (#33468)
Summary:
**Android**: The functionality consists of calling the [AccessibilityNodeInfo#setError][10] and [#setContentInvalid][13] method to display the error message in the TextInput.

**Fixes [https://github.com/facebook/react-native/issues/30848][51] - Adding an accessibilityErrorMessage prop to the TextInput Component**:
**Android**: The prop accessibilityErrorMessage triggers the AccessibilityNodeInfo method [setError][10] which automatically sets the correct properties on the AccessibilityNodeInfo that will inform screen readers of this state. The method calls setContentInvalid(true) and setError(youErrorString) on the AccessibilityNodeInfo.

**Fixes [https://github.com/facebook/react-native/issues/30859][52] -  Detecting changes in the Error state (text inputs)**
**Fabric - Android** - Adding accessibilityErrorMessage to field AndroidTextInputState.
ReactTextInputManager and ReactEditText receive state updates both from [Javascript][32] and [cpp (fabric)][34].
- accessibilityErrorMessage is added to the fabric AndroidTextInputState field
- The updates are received in the ReactAndroid API with method updateState from ReactTextInputManager
- After updating the TextInput text with onChangeText, the update of the accessibilityErrorMessage is triggered with method maybeSetAccessibilityError which triggers [setError][10].

More info:
- An explanation of [state updates between fabric and ReactAndroid for the TextInput component][34]
- [ReactNative renderer state updates][35]

**Paper - Android** - Adding accessibilityErrorMessage to ReactTextInputShadowNode to trigger updates in Paper renderer when accessibilityErrorMessage is changed within the onChange callback.

Related Links (Android):
- [In this diff I'm shipping and deleting mapBufferSerialization for Text measurement][101]
- [This diff implement and integrates Mapbuffer into Fabric text measure system][39]
- [Refactor ViewPropsMapBuffer -> general MapBuffer props mechanism][100]
- [TextInput: support modifying TextInputs with multiple Fragments (Cxx side)][24]
- [TextInput: keep C++ state in-sync with updated AttributedStrings in Java][23]
- [AccessibilityNodeInfo#setError][11]
- [Explanation on how TextInput calls SET_TEXT_AND_SELECTION in Java API][32]
- [Fabric: convertRawProp was extended to accept an optional default value][27]
- [understanding onChangeText callback][31]
- [Editable method replace()][12]
- [Change of error state from onChangeText show/hides a TextInput error][30]
- [AndroidTextInput: support using commands instead of setNativeProps (native change)][25]
- [TextInput: support editing completely empty TextInputs][26]
- [[Android] Fix letters duplication when using autoCapitalize https://github.com/facebook/react-native/issues/29070][40]
- [Support optional types for C++ TurboModules][28]
- [discussion on using announceForAccessibility in ReactEditText][36]
- [ fix annoucement delayed to next character][61]
- [Announce accessibility state changes happening in the background][29]
- [Refactor MountingManager into MountingManager + SurfaceMountingManager][37]

iOS Functionalities are included in separate PR https://github.com/facebook/react-native/pull/35908
Documentation PR https://github.com/facebook/react-native-website/pull/3010

Next PR [2/2 TextInput accessibilityErrorMessage (VoiceOver, iOS) https://github.com/facebook/react-native/issues/35908](https://github.com/facebook/react-native/pull/35908)
Related https://github.com/facebook/react-native-deprecated-modules/pull/18

## Changelog

[Android] [Added] - Adding TextInput prop accessibilityErrorMessage to announce with TalkBack screenreaders

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

Test Plan:
**Android - 20 Jan 2023**
https://github.com/facebook/react-native/pull/33468#issuecomment-1398228674

**iOS - 20 Jan 2023**
https://github.com/facebook/react-native/pull/33468#issuecomment-1398249006

<details><summary>CLICK TO OPEN OLD VIDEO TEST CASES</summary>
<p>

**PR Branch - Android and iOS 24th June**
[88]: Android - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Fabric) ([link][88])

**PR Branch - Android**
[1]. Test Cases of the functionality (Fabric) ([link][1])
[2]. Test Cases of the functionality (Paper) ([link][2])

**Main Branch**
[6]. Android - Runtime Error in main branch when passing value of 1 to TextInput  placeholder prop ([link][6])

**Issues Solved**
[7]. TalkBack error does not clear error on the next typed character when using onChangeText ([link][7])
**Other Tests**
[8]. Setting the TextInput errorMessage state with setTextAndSelection Java API from JavaScript ([link][8])
[9]. Setting the TextInput errorMessage state from fabric TextInput internal state to Java ReactTextUpdate API ([link][9])

</p>
</details>

[1]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1072101477 "Test Cases of the functionality (Android - Fabric)"
[2]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1105964322 "Test Cases of the functionality (Android - Paper)"
[3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1116329282 "Test Cases of the functionality (iOS - Fabric)"
[6]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1087020844 "Runtime Error in main branch when passing value of 1 to TextInput  placeholder prop"
[7]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1096086753 "TalkBack error announcement done on next typed character with onChangeText"
[8]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1082594363 "setting the TextInput errorMessage state with setTextAndSelection Java API from JavaScript"
[9]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1082598745 "Setting the TextInput errorMessage state from fabric TextInput internal state to Java ReactTextUpdate API"

[10]: https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo#setError(java.lang.CharSequence) "AOSP setError"
[11]: https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo#setError(java.lang.CharSequence) "AccessibilityNodeInfo#setError"
[12]: https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/android/text/Editable.java#L28-L52 "Editable method replace"
[13]: https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo#setContentInvalid(boolean) "setContentInvalid"

[20]: https://github.com/facebook/react-native/commit/60b6c9be8e811241039a6db5dc906a0e88e6ba82 "draft implementation of android_errorMessage "
[21]: https://github.com/facebook/react-native/commit/012d92d0b7e5de2436f186cdbff32ba128e537d5 "add errorMessage to ReactTextUpdate and maybeSetAccessibilityError"
[22]: https://github.com/fabriziobertoglio1987/react-native/commit/cad239bded5748753cee2266c27809e24c6199fb "rename android_errorMessage to errorMessageAndroid"
[23]: https://github.com/fabriziobertoglio1987/react-native/commit/0bae47434ef79eb606c453c5be8105b8df00783a "TextInput: keep C++ state in-sync with updated AttributedStrings in Java"
[24]: https://github.com/fabriziobertoglio1987/react-native/commit/0556e86d09404105dc7ff695686b8b7c01911c5c "TextInput: support modifying TextInputs with multiple Fragments (Cxx side)"
[25]: https://github.com/fabriziobertoglio1987/react-native/commit/7ab5eb4cafdea695c4c53ce2a737f6302afd6380 "AndroidTextInput: support using commands instead of setNativeProps (native change)"
[26]: https://github.com/fabriziobertoglio1987/react-native/commit/b9491b7c5104066b2714045cd7710f995458c9e9 "TextInput: support editing completely empty TextInputs"
[27]: https://github.com/fabriziobertoglio1987/react-native/commit/7f1ed6848f89bdccc7f7a5cc76019eec67e76b2f "Fabric: convertRawProp was extended to accept an optional default value"
[28]: https://github.com/facebook/react-native/commit/6e0fa5f15eef71abcfb47750eb3669065ba2ab7d "Support optional types for C++ TurboModules"
[29]: https://github.com/fabriziobertoglio1987/react-native/commit/baa66f63d8af2b772dea8ff8eda50eba264c3faf "Announce accessibility state changes happening in the background"

[30]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1071989570 "Change of error state from onChangeText show/hides a TextInput error"
[31]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1074827746 "understanding onChangeText callback"
[32]: https://github.com/facebook/react-native/issues/29063#issuecomment-658189938 "Explanation on how TextInput calls SET_TEXT_AND_SELECTION in Java API"
[33]: https://github.com/facebook/react-native/pull/33468#discussion_r835036889 "Explanation of TextInput state management with fabric C++ and JAVA API"
[34]: https://github.com/facebook/react-native/pull/33468#discussion_r835036889 "state updates between fabric and ReactAndroid for the TextInput component"
[35]: https://reactnative.dev/architecture/render-pipeline#react-native-renderer-state-updates "ReactNative renderer state updates"
[35]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1080144483 "Analysis on how AndroidTextInputState.cpp sends updates to ReactTextInputManager"
[36]: https://github.com/facebook/react-native/pull/33468#discussion_r848162849 "discussion on using announceForAccessibility in ReactEditText"
[37]: https://github.com/fabriziobertoglio1987/react-native/commit/29eb632f1cb2ef5459253783eac43e5d7e999742 "Refactor MountingManager into MountingManager + SurfaceMountingManager"
[38]: https://github.com/fabriziobertoglio1987/react-native/commit/733f2285067de401b925195266f4cec84c3f7fef "Diff C++ props for Android consumption"
[39]: https://github.com/fabriziobertoglio1987/react-native/commit/91b3f5d48aa1322046b8c5335f8e2e1a5e702b67 "This diff implement and integrates Mapbuffer into Fabric text measure system"

[40]: https://github.com/facebook/react-native/pull/29070 "[Android] Fix letters duplication when using autoCapitalize https://github.com/facebook/react-native/issues/29070"

[50]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12  "Notes from work on iOS/Android: Text input error for screenreaders https://github.com/facebook/react-native/issues/12"
[51]: https://github.com/facebook/react-native/issues/30848 "iOS/Android: Text input error for screenreaders https://github.com/facebook/react-native/issues/30848"
[52]: https://github.com/facebook/react-native/issues/30859 "Android: Error state change (text inputs) https://github.com/facebook/react-native/issues/30859"

[61]: https://github.com/facebook/react-native/pull/33468/commits/eb33c933c8bcb9a8421a6acdb7a51f261121be45 "fix annoucement delayed to next character"

[70]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1116966512 "iOS - Paper renderer does not update the accessibilityValue"
[71]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1124631221 "Test Cases of the functionality (Fabric) after removing changes to .cpp libs"
[72]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1124892802 "Test Cases of the functionality (Paper) after removing changes to .cpp libs"
[73]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1132830758 "iOS - announcing error onChangeText and screenreader focus"
[74]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1150657065 "iOS - The screenreader announces the TextInput value after the errorMessage is cleared"
[75]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1152285978 "iOS - Exception thrown while executing UI block: - [RCTTextView setOnAccessibiltyAction:]: unrecognized selector sent to instance (Paper) (main branch)"
[76]: https://github.com/facebook/react-native/issues/30859#issuecomment-1158790381 "iOS - announce lastChar (not entire text) onChangeText and avoid multiple announcements (Fabric)"
[77]: https://github.com/facebook/react-native/issues/30859#issuecomment-1158794863 "iOS - announces or does not announce the accessibilityError through Button onPress (not onChangeText) (Fabric)"
[78]: https://github.com/facebook/react-native/issues/30859#issuecomment-1158797801 "iOS - the error is announced with accessibilityInvalid true and does not clear after typing text (onChangeText) (Fabric)"
[79]: https://github.com/facebook/react-native/issues/30848#issuecomment-1162799299 "iOS - Exception thrown while executing UI block: - RCTUITextView setAccessibilityErrorMessage:]: unrecognized selector sent to instance (iOS - Paper on main branch)"

[80]: https://github.com/fabriziobertoglio1987/react-native/commit/e13b9c6e49480e8262df06b7c1e99caab74e801f "RCTTextField was spliited into two classes"
[81]: https://github.com/fabriziobertoglio1987/react-native/commit/ee9697e5155aa972564d5aac90ceeb9db100750d "Introducing RCTBackedTextInputDelegate"
[82]: https://github.com/fabriziobertoglio1987/react-native/commit/2dd2529b3ab3ace39136a6e24c09f80ae421a17e "Add option to hide context menu for TextInput"
[83]: https://github.com/fabriziobertoglio1987/react-native/blob/343eea1e3150cf54d6f7727cd01d13eb7247c7f7/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentAccessibilityProvider.mm#L48-L72 "RCTParagraphComponentAccessibilityProvider accessibilityElements"
[84]: https://github.com/fabriziobertoglio1987/react-native/blob/c8790a114f6f21774c43f0e9b9210e7b35d1c243/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm#L613 "RCTTextInputComponentView method _setAttributedString"
[85]: https://github.com/fabriziobertoglio1987/react-native/blob/c8790a114f6f21774c43f0e9b9210e7b35d1c243/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm#L146 "RCTTextInputComponentView method updateProps"
[86]: https://github.com/fabriziobertoglio1987/react-native/blob/c8790a114f6f21774c43f0e9b9210e7b35d1c243/Libraries/Text/TextInput/RCTBaseTextInputView.m#L150 "RCTBaseTextInputView setAttributedText"
[87]: https://github.com/facebook/react-native/issues/30859#issuecomment-1165395361 "iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event"
[88]: https://github.com/facebook/react-native/issues/30859#issuecomment-1165398153 "Android - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event"
[89]: https://github.com/facebook/react-native/issues/30859#issuecomment-1165413245 "iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Fabric)"

[100]: https://github.com/fabriziobertoglio1987/react-native/commit/110b191b14e3cb692bb6a33f0f129b4f0215f9a6 "Refactor ViewPropsMapBuffer -> general MapBuffer props mechanism"
[101]: https://github.com/fabriziobertoglio1987/react-native/commit/22b6e1c8ec0e69700e9142cf5c9c1ab1e6a84b78 "In this diff I'm shipping and deleting mapBufferSerialization for Text measurement"

Reviewed By: blavalla

Differential Revision: D38410635

Pulled By: lunaleaps

fbshipit-source-id: cd80e9a1be8f5ca017c979d7907974cf72ca4777
2023-02-28 16:05:57 -08:00
Ruslan Lesiutin 06cf36bcd4 refactor(rn-tester): removed usages of Slider
Summary:
# Changelog:
[Internal][Removed] - removed usages of Slider inside rn-tester package

Reviewed By: lunaleaps

Differential Revision: D40984396

fbshipit-source-id: 6c623c0972bfdac624368506401cf3200340069f
2023-01-05 06:12:47 -08:00
fabriziobertoglio1987 759056b499 Override default Talkback automatic content grouping and generate a custom contentDescription (#33690)
Summary:
The Implementation of the functionality consists of:

1) Checking that an element has no contentDescription and no text and has other content to announce (role, state, etc.) which causes this issue (for ex. the accessibilityRole is announced before the contentDescription for ex. "Button, My text children component")
2) If Talkback finds no content to announce on the current node, a custom contentDescription is generated from the child elements that respect the following conditions:

>If an AccessibilityNodeInfo is considered "actionable" (which Talkback defines as having clickable=true, longClickable=true, or focusable=true, or having AccessibilityActions for any of those), AND it has some content to read like a contentDescription or text, it will be considered focusable.
>If an AccessibilityNodeInfo is considered "actionable" AND it does not have content to read like a contentDescription or text Talkback will parse descendant elements looking for non-focusable descendants to use as content.

3) implementation of a method getTalkbackDescription to generate the above contentDescription from child elements
4) over-ride parent contentDescription (accessibilityLabel) with the value returned from getTalkbackDescription

Related [notes on Android: Role description is announced before the components text, rather than after https://github.com/facebook/react-native/issues/31042][51]. This issue fixes [https://github.com/facebook/react-native/issues/31042][50].

## Changelog

[Android] [Added] - Override default Talkback automatic content grouping and generate a custom contentDescription

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

Test Plan:
**PR Branch**
[1]. Screenreader correctly announcing accessible/non-accessible items ([link][1])
[2]. Screenreader announces Pressability items ([link][2])
[3]. Button role is announced after child contentDescription with TouchableNativeFeedback ([link][3])
[4]. Testing for regressions in Accessibility Actions ([link][4])
[5]. Screenreader focuses on ScrollView Items ([link][5])
[6]. Recordings of complete test cases in rn-tester app main and pr branch ([link][6])
[9]. TouchableOpacity with TextInput child announces contentDescription before the Role ([link][9])
[10]. One of the child has accessibilityState (hasStateDescription triggers the announcement) ([link][10])
[11]. One of the child has accessibilityHint (hasText triggers the announcement) ([link][11])

**Main**
[15]. The View does not announce the child component Text when accessibilityLabel is missing (automatic content grouping) ([link][15])
[8]. TouchableOpacity with child EditText annouces placeholder text before and after the role ([link][8])

[1]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1106375974 "Screenreader correctly announcing accessible/non-accessible items"
[2]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1106213313 "Screenreader announces Pressability items"
[3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1109935139 "Button role is announced after child contentDescription"
[4]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1110541392 "Testing for regressions in Accessibility Actions"
[5]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1106012823 "Screenreader focuses on ScrollView Items"
[6]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1111942775 "Recordings of complete test cases in rn-tester app main and pr branch"
[7]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1139511589 "TouchableOpacity with child EditText annouces Button role before the child contentDescription"
[8]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1140967225 "TouchableOpacity with child EditText annouces placholder text before and after the role"
[9]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1140999648 "TouchableOpacity with TextInput child announces contentDescription before the Role"
[10]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1149479950 "One of the child has accessibilityState (hasStateDescription triggers the announcement)"
[11]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1149535215 "One of the child has accessibilityHint (hasText triggers the announcement)"

[15]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14#issuecomment-1088680339 "The View does not announce the child component Text when accessibilityLabel is missing (automatic content grouping)"

[50]: https://github.com/facebook/react-native/issues/31042 "Android: Role description is announced before the components text, rather than after https://github.com/facebook/react-native/issues/31042"
[51]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/14 "notes on Android: Role description is announced before the components text, rather than after https://github.com/facebook/react-native/issues/31042"

Reviewed By: cipolleschi

Differential Revision: D39177512

Pulled By: blavalla

fbshipit-source-id: 6bd0fba9c347bc14b3839e903184c86d2bcab3d2
2022-12-01 21:32:04 -08:00
fabriziobertoglio1987 082a033fbb Android: using AccessibilityNodeInfo#addAction to announce Expandable/Collapsible State (#34353)
Summary:
>Expandable and Collapsible are unique in the Android Accessibility API, in that they are not represented as properties on the View or AccessibilityNodeInfo, but are only represented as AccessibilityActions on the AccessibilityNodeInfo. This means that Talkback determines whether or not a node is "expandable" or "collapsible", or potentially even both, by looking at the list of AccessibilityActions attached to the AccessibilityNodeInfo.

>When setting the accessibilityState's expandable property, it should correlate to adding an action of either AccessibilityNodeInfoCompat.ACTION_EXPAND or AccessibilityNodeInfoCompat.ACTION_COLLAPSE on the AccessibilityNodeInfo. This work should be done in the ReactAccessibilityDelegate class's

>Currently, this feature is being "faked" by appending to the contentDescription in the BaseViewManager class. This should be removed when this feature is implemented properly.

fixes https://github.com/facebook/react-native/issues/30841

## Changelog

[Android] [Fixed] - using AccessibilityNodeInfo#addAction to announce Expandable/Collapsible State

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

Test Plan:
- On some components, the state expanded/collapsed is properly announced on focus, on some it is not.
- On some components only the expanded/collapsed state is announced, and not other component text.
- Upon change, state change is not always announced.
- The accessibilityState's "expanded" field does not seem to work on all element types (for example, it has no effect on 's).
- using accessibilityActions it is possible to add an action for expand/collapse, but these are treated as custom actions and must have their own label defined, rather than using Androids built in expand/collapse actions, which Talkback has predefined labels for.

https://snack.expo.io/0YOQfXFBi

Tests  15th August 2022:
- Paper [Tests](https://github.com/facebook/react-native/pull/34353#issuecomment-1217425302)
- Fabric [Tests](https://github.com/facebook/react-native/pull/34353#issuecomment-1217781734)

Tests 6th September 2022:
- [Button which keeps control of extended/collapsed state in JavaScript with onAccessibilityAction, accessibilityActions and accessibiltyState (Paper)](https://github.com/facebook/react-native/pull/34353#issuecomment-1237601847)
- [TouchableWithoutFeedback keeps control of extended/collapsed state in Android Widget (Paper)](https://github.com/facebook/react-native/pull/34353#issuecomment-1237616304)
- [TouchableWithoutFeedback keeps control of extended/collapsed state in Android Widget (Fabric)](https://github.com/facebook/react-native/pull/34353#issuecomment-1237624755)
- [TouchableOpacity announces visible text and triggers expanded/collapsed with onPress and accessiblity menu (Fabric)](https://github.com/facebook/react-native/pull/34353#issuecomment-1237627857)

Announcing state with custom actions on Fabric (FAIL).
The issue is not a regression from this PR, as documented in https://github.com/facebook/react-native/pull/34353#issuecomment-1207744977. It will be fixed in a separate PR.

Reviewed By: NickGerleman

Differential Revision: D39893863

Pulled By: blavalla

fbshipit-source-id: f6af78b1839ba7d97eca052bd258faae00cbd27b
2022-11-08 12:26:59 -08:00
fabriziobertoglio1987 55c0df43b9 Adding pager, scrollview, viewgroup, webview, drawer roles (#34477)
Summary:
- adds missing roles
- adds custom roles that don't exist in TalkBack (see the [compositor.json][10] and [string.xml][11] files).
- fixes [issues with Drawer][12]
- fixes issues with ScrollView missing roles
- seek control already exist as adjustable https://github.com/facebook/react-native/pull/34477/commits/d460d097ac0f5df8002e072711023517905f9ca9

Relevant https://github.com/facebook/react-native/issues/30839#issuecomment-1222293556
fixes https://github.com/facebook/react-native/issues/30839

## Changelog

[Android] [Fixed]  - Adding pager, scrollview, viewgroup, webview, drawer roles

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

Test Plan:
Android
- Drawer Layout and ScrollView (02/09/22) https://github.com/facebook/react-native/pull/34477#issuecomment-1235293165
- sliding drawer, drawer layout, icon menu https://github.com/facebook/react-native/pull/34477#issuecomment-1224112650
- Horizontal and Vertical ScrollView https://github.com/facebook/react-native/pull/34477#issuecomment-1225478289
- Toast https://github.com/facebook/react-native/pull/34477#issuecomment-1225369629
- CheckedTextView https://github.com/facebook/react-native/pull/34477#discussion_r959329833
- Spinner (dropdownlist) https://github.com/facebook/react-native/pull/34477#discussion_r959374894
- EditText https://github.com/facebook/react-native/pull/34477#discussion_r959412185
- WebView https://github.com/facebook/react-native/pull/34477#discussion_r959417518
- Testing chime_up and chime_down sound feedback in Scrollable https://github.com/facebook/react-native/pull/34477#issuecomment-1238882030

iOS https://github.com/facebook/react-native/pull/34477#issuecomment-1232418595

[10]: https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/raw/compositor.json#L1082-L1108
[11]: https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/values/strings.xml#L223
[12]: https://github.com/facebook/react-native/pull/34477#issuecomment-1224112650

Reviewed By: NickGerleman

Differential Revision: D39894307

Pulled By: blavalla

fbshipit-source-id: 4a8da78bae485ead0523689631d88d1031a07b74
2022-11-07 23:25:33 -08:00
Gabriel Donadel Dall'Agnol 20718e6b8c feat: Add role prop to Text component (#34976)
Summary:
As pointed out by necolas on https://github.com/facebook/react-native/issues/34424#issuecomment-1261482517 we forgot we add the `role` prop mapping to the `Text` component. This PR adds a new `role` prop to `Text`, mapping the web `role` values to the already existing `accessibilityRole` prop and moves the `roleToAccessibilityRoleMapping` to a common file that can be imported by both the `Text` and `View` components as requested on https://github.com/facebook/react-native/issues/34424. This PR also updates the RNTester AcessebilityExample to include a test using this new prop.

## Changelog

[General] [Added] - Add role prop to Text component

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

Test Plan:
1. Open the RNTester app and navigate to the Accessibility Example page
2. Test the `role` prop through the `Text with role = heading` section

Reviewed By: yungsters

Differential Revision: D40596039

Pulled By: jacdebug

fbshipit-source-id: f72f02e8bd32169423ea517ad18b598b52257b17
2022-10-24 08:38:47 -07:00
Daksh Bhardwaj f353119113 feat : add aria labelled as alias for accessibilityLabelledBy (#34725)
Summary:
This adds the [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)  prop to the components where it's used as requested on https://github.com/facebook/react-native/issues/34424,  equivalent [accessibilityLabelledBy](https://reactnative.dev/docs/accessibility#accessibilitylabelledby-android)

## Changelog
[General] [Added] - Add aria-modal prop to basic component

## TestPlan

 - Enable talkback.
 - Open the RNTester app and navigate to the Api's tab
 - Go to the TextInput with aria-labelledby attribute section

<img width="495" alt="Screenshot 2022-09-19 at 7 46 05 PM" src="https://user-images.githubusercontent.com/22423684/191038924-017dba93-ea7d-494d-ba6f-161e986f9b54.png">

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

Reviewed By: lunaleaps

Differential Revision: D40176143

Pulled By: lunaleaps

fbshipit-source-id: 003d1ab27bfd01b5c6d4c58a4de501ec7966359d
2022-10-11 05:48:42 -07:00
Daksh Bhardwaj e8739e962d feat: added accessibility value aliases (#34535)
Summary:
This adds aliasing for accessibility Value, it's used as requested on https://github.com/facebook/react-native/issues/34424.

- [aria-valuemax](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) to equivalent [accessibilityValue.max](https://reactnative.dev/docs/accessibility#accessibilityvalue)
- [aria-valuemin](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) to equivalent [accessibilityValue.min](https://reactnative.dev/docs/accessibility#accessibilityvalue)
- [aria-valuenow](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) to equivalent [accessibilityValue.now](https://reactnative.dev/docs/accessibility#accessibilityvalue)
- [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) to equivalent [accessibilityValue.text](https://reactnative.dev/docs/accessibility#accessibilityvalue)

## Changelog

[General] [Added] - Add `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext` as alias prop to `TouchableOpacity`, `View`, `Pressable` `TouchableHighlight` `TouchableBounce` `TouchableWithoutFeedback` `TouchableOpacity` components

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

Test Plan:
- Enable `talkback`.
 - Open the RNTester app and navigate to the Api's tab
 - Go to the `fake Slider Example for Accessibility Value `modes section

<Image src="https://user-images.githubusercontent.com/22423684/187472543-05200d8d-2742-4096-a56c-41f81b440a97.png" height="600" width="300" />

Reviewed By: cipolleschi

Differential Revision: D39206362

Pulled By: jacdebug

fbshipit-source-id: e7ed263badac789d529dd21e961cda5302b031e3
2022-09-09 04:48:41 -07:00
ankit-tailor 98d84e571d Feat/accessibility state alias (#34524)
Summary:
This adds aliasing for accessibility state, it's used as requested on https://github.com/facebook/react-native/issues/34424.

- [aria-disabled](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) to equivalent [accessibilityState.disabled](https://reactnative.dev/docs/accessibility#accessibilitystate)
- [aria-busy](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy) to equivalent [accessibilityState.busy](https://reactnative.dev/docs/accessibility#accessibilitystate)
- [aria-checked](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) to equivalent [accessibilityState.checked](https://reactnative.dev/docs/accessibility#accessibilitystate)
- [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) to equivalent [accessibilityState.expanded](https://reactnative.dev/docs/accessibility#accessibilitystate)
- [aria-selected](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) to equivalent [accessibilityState.selected](https://reactnative.dev/docs/accessibility#accessibilitystate)

## Changelog

[General] [Added] - Add aria-disabled, aria-busy, aria-checked, aria-expanded and aria-selected prop to core components

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

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

Test Plan:
```js
<View
  aria-disabled={true}
  aria-selected={false}
  aria-checked={true}
  aria-expanded={true}
  aria-busy={true}
  style={{backgroundColor: '#527FE4', padding: 5}}>
  <Text style={{fontSize: 11}}>Blue background</Text>
</View>
```

Reviewed By: cipolleschi

Differential Revision: D39137790

Pulled By: jacdebug

fbshipit-source-id: 27b5c56e91731ba36bb4754d9862286a7a8191bc
2022-09-08 03:38:39 -07:00
Gabriel Donadel Dall'Agnol ebdb23c6e0 feat: Add aria-hidden prop to Pressable, View and Touchables components (#34552)
Summary:
This adds the ` aria-hidden` prop to `Pressable`, `TouchableBounce`, `TouchableHighlight`, `TouchableNativeFeedback`, `TouchableOpacity`, `TouchableWithoutFeedback` and `View` components as requested on https://github.com/facebook/react-native/issues/34424, being an alias `importantforAccessibility='no-hide-descendants'` on Android and an alias for `accessibilityElementsHidden` on iOS. This PR also updates RNTester AccessibilityExample in order to facilitate the manual QA.

## Changelog

[General] [Added] -  Add aria-hidden prop to Pressable, View and Touchables components

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

Test Plan:
1. Open the RNTester app and navigate to the Accessibility page
2. Test the `aria-hidden` prop through the `View with hidden children from accessibility tree` section, this can be tested either by enabling Voice Over if you're using a real device or through the Accessibility Inspector if you're using a simulator

https://user-images.githubusercontent.com/11707729/187814455-6937e33e-7edd-434e-b7d3-ee6c03f635ca.mov

Reviewed By: NickGerleman

Differential Revision: D39206245

Pulled By: jacdebug

fbshipit-source-id: 551dc671fbcedc824f253e22b8d7753c466838c7
2022-09-07 08:38:25 -07:00
Gabriel Donadel Dall'Agnol 1dd74db31f fix: Accessibility example typos (#34559)
Summary:
While working on https://github.com/facebook/react-native/pull/34552 I noticed that a couple of words inside the Accessibility example files were misspelled.

## Changelog

[Internal] [Fixed] - Fix accessibility example typos

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

Test Plan: Shouldn't require much testing as this is just fixing some typos inside Accessibility example

Reviewed By: cipolleschi

Differential Revision: D39252742

Pulled By: jacdebug

fbshipit-source-id: 0d3860f438c55d58d0816b9ae65e52925864c8d3
2022-09-05 05:11:07 -07:00
Gabriel Donadel Dall'Agnol be7c50fefd feat: Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo (#34406)
Summary:
This PR adds `prefersCrossFadeTransitions()` to AccessibilityInfo in order to add support for "Prefer Cross-Fade Transitions", exposing the iOS settings option as proposed here https://github.com/react-native-community/discussions-and-proposals/issues/452.
I believe this would be especially helpful for solving https://github.com/facebook/react-native/issues/31484

#### TODO
- [ ]  Submit react-native-web PR updating AccessibilityInfo documentation.

## Changelog

[iOS] [Added] - Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo

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

Test Plan:
**On iOS 14+**

1.  Access Settings > "General" > "Accessibility" > "Reduce Motion", enable "Reduce Motion" then enable "Prefer Cross-Fade Transitions".
2. Open the RNTester app and navigate to the Accessibility page

https://user-images.githubusercontent.com/11707729/154588402-7d050858-3c2d-4d86-9585-928b8c66941b.mov

Reviewed By: cipolleschi

Differential Revision: D38711316

Pulled By: makovkastar

fbshipit-source-id: b9965cd4285f1aa0f1fa927080370a22329c2f62
2022-08-25 10:45:15 -07:00
fabriziobertoglio1987 9f4358142e accessibilityLabelledBy use DynamicFromObject to parse String to Dynamic (#34371)
Summary:
`accessibilityLabelledBy` accepts String or Array type.
- The JavaScript Array type corresponds to java [ReadableArray][3] ([HybridData][4])
- The JavaScript String type corresponds to the java String

Use [DynamicFromObject][5] to parse String to Dynamic.

https://github.com/facebook/react-native/blob/e509f96baf5e523301a5c9567c416508ff20d175/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java#L222-L228

All credits to [grgr-dkrk][1] (PR https://github.com/facebook/react-native/pull/32470). fixes [https://github.com/facebook/react-native/issues/30846][2]

## Changelog

[Android] [Fixed] - accessibilityLabelledBy use DynamicFromObject to parse String to Dynamic

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

Test Plan:
<details><summary>testing accessibilityLabelledBy with TextInput</summary>
<p>

https://user-images.githubusercontent.com/24992535/183593138-7ced1974-6a06-4f0f-822a-1ade1edc7212.mp4

</p>
</details>

<details><summary>testing accessibilityLabelledBy with Switch</summary>
<p>

![Screen Shot 2022-08-09 at 15 53 37](https://user-images.githubusercontent.com/24992535/183596336-4b73186b-6d27-485e-a6ea-29a0f0b9ef50.png)

</p>
</details>

<details><summary>testing paper renderer after the fix</summary>
<p>

https://user-images.githubusercontent.com/24992535/183605619-01f1be64-788a-43bd-88b0-a7b2cad75148.mp4

</p>
</details>

[1]: https://github.com/grgr-dkrk
[2]: https://github.com/facebook/react-native/issues/30846
[3]: https://github.com/facebook/react-native/blob/e509f96baf5e523301a5c9567c416508ff20d175/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java#L1
[4]: https://github.com/facebookincubator/fbjni/blob/main/java/com/facebook/jni/HybridData.java
[5]: https://github.com/facebook/react-native/blob/e509f96baf5e523301a5c9567c416508ff20d175/ReactAndroid/src/main/java/com/facebook/react/bridge/DynamicFromObject.java#L74

Reviewed By: lunaleaps

Differential Revision: D38706360

Pulled By: huntie

fbshipit-source-id: e4771552d3fddfad50f4d4cbbf971fe4a718e134
2022-08-16 04:26:20 -07:00
fabriziobertoglio1987 62021eb8d1 adding importantForAccessibility for Text, Button, ImageBackground (#34245)
Summary:
Previously published by [grgr-dkrk][2] as [https://github.com/facebook/react-native/issues/31296][3], fixes the following issues:

1) ImportantForAccessibility="no" does not work on Text, Button
2) ImportantForAccessibility="no-hide-descendants" does not work on Text, Button, or ImageBackground.

Note: On ImageBackground, focus is prevented on the imageBackground node itself, but focus is not prevented on its descendants.

Note: [Button component expected behavior for prop importantForAccessibility][4]
>Some components like Button seem like atomic units, but they end up rendering a hierarchy of components for example a wrapper View with a Text inside them. Allowing those descendants to become focusable, breaks the model of these being a single component to consider and forcing no-hide-descendants makes sense here.

>The other option is always to render any descendants of these elements with importantForAccessibility="no", so they can never be focusable on their own. This would have the same result, **BUT may potentially cause issues when the descendant content is supposed to automatically get moved up to the focusable ancestor to act as a label** (which is what Talkback does with unfocusable text elements by default).

Note: [importantForAccessibility="no" does not allow screenreader focus on nested Text Components with accessibilityRole="link" or inline Images][5]

fixes https://github.com/facebook/react-native/issues/30850 related https://github.com/facebook/react-native/pull/33690

## Changelog

[Android] [Fixed] - adding importantForAccessibility for Text, Button, ImageBackground

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

Test Plan:
1) testing ImageBackground importantForAccessiblity ([link to test][1])
2) importantForAccessibility="no" does not allow screenreader focus on nested Text Components with accessibilityRole="link" or inline Images ([link to test][5])
3) testing ImageBackground importantForAccessiblity ([link to test][6])
4) Button with importantForAccessibility=no ([link to test][7])

[1]: https://github.com/facebook/react-native/pull/31296#issuecomment-1192341626 ""
[2]: https://github.com/grgr-dkrk "grgr-dkrk"
[3]: https://github.com/facebook/react-native/pull/31296 "https://github.com/facebook/react-native/issues/31296"
[4]: https://github.com/facebook/react-native/pull/31296#discussion_r616184584 "expected behaviour with prop importantForAccessibility in Button component"
[5]: https://github.com/facebook/react-native/issues/30850#issuecomment-1192286477 "importantForAccessibility=no does not allow screenreader focus on nested Text Components with accessibilityRole=link or inline Images"
[6]: https://github.com/facebook/react-native/pull/34245#issuecomment-1192446124 "testing ImageBackground importantForAccessiblity"
[7]: https://github.com/facebook/react-native/pull/34245#issuecomment-1192443589 "Button with importantForAccessibility=no"

Reviewed By: cipolleschi

Differential Revision: D38121992

Pulled By: dmitryrykun

fbshipit-source-id: 368b4dcb47d7940274820aa2e39ed5e2ca068821
2022-08-10 05:30:28 -07:00
Pieter Vanderwerff ee3d3c248d Add missing class annotations xplat/js
Reviewed By: SamChou19815

Differential Revision: D38373443

fbshipit-source-id: 1222c4845ebd6b72bd6f54af1a27cf8542dd883a
2022-08-03 12:43:58 -07:00
Paige Sun 639daf8641 Minor: Rename AccessibilityInfo.sendAccessibilityEvent_unstable to sendAccessibilityEvent
Summary:
Changelog:
[Internal] Rename AccessibilityInfo.sendAccessibilityEvent_unstable to sendAccessibilityEvent

In Fabric, we want people to use `AccessibilityInfo.sendAccessibilityEvent` instead of `UIManager.sendAccessibilityEvent` for Android. The API is not unstable. There is a test in [AccessibilityExample.js](https://github.com/facebook/react-native/blob/c940eb0c49518b82a3999dcac3027aa70018c763/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L959) in RNTester to confirm that it works.

A search for [`AccessibilityInfo.sendAccessibilityEvent_unstable` in Github](https://github.com/search?q=AccessibilityInfo.sendAccessibilityEvent_unstable&type=Code) shows that it's not being used yet, which makes sense because it's an Fabric API. Therefore it's safe to rename it.

Reviewed By: sammy-SC

Differential Revision: D37901006

fbshipit-source-id: 73f35b09ca8f9337f4d66a431f0a3f815da38249
2022-07-18 15:19:53 -07:00
Pieter Vanderwerff c940eb0c49 Add LTI annotations to function params in xplat/js [manually-modified]
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predicatable.

Reviewed By: bradzacher

Differential Revision: D37363351

fbshipit-source-id: a9d3df7db6f9d094ac2ce81aae1f3ab4f62b243a
2022-06-22 23:01:55 -07:00
Matin Zadeh Dolatabad 2596b2f695 fix: remove deprecated removeListener methods (#33580)
Summary:
Remove old deprecated modules that cause annoying warnings. This can be a breaking change for some third-party modules.

## Changelog

[General] [Removed] - Remove deprecated removeListener methods

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

Test Plan: See `flow-check` and `build-arvr-js-flow` succeed in Sandcastle.

Reviewed By: cortinico

Differential Revision: D35549719

Pulled By: yungsters

fbshipit-source-id: 0495e36de19db434362d5de56463d9c1ad6edd73
2022-05-04 11:32:51 -07:00
Sam Zhou 0c4c6ca319 Add annotations to unannotated variable declarations [manually-modified]
Reviewed By: panagosg7

Differential Revision: D35948108

fbshipit-source-id: 7d286c9dd66dbd25281e2d831691f8bb34504b5d
2022-04-27 19:15:55 -07:00
Kacie Bawiec ca5e3b1dc9 Fix sendAccessibilityEvent_unstable Example in RNTester
Summary:
# First issue - incorrect ref
In this example, `AccessibilityInfo.setAccessibilityFocus_unstable` is being called on the Button ref. This fails because Button is not a HostComponent and does not accept a forwarded ref.

Since the button needs to be focused in order to click on it, I don't think the intention of this example actually makes sense. Since even if it worked, it would just reset the focus in the same place.

Instead, I alter this to set accessibility focus on the preceding Text element, which makes it more clear that setAccessibilityFocus is working.

# Second Issue - focus after closing Alert doesn't work
I am not sure why this is the case, but removing the alert causes focus to work correctly. i'm guessing the set focus command is conflicting with Alert's default resetting focus behavior.

# Minor Fix
I also quickly cleaned this up to be a function component because class components make refs more confusing (to me).

Changelog:
[Genera] Fix sendAccessibilityEvent_unstable Example in RNTester

Reviewed By: p-sun

Differential Revision: D35725018

fbshipit-source-id: f5a1dbbcf2635f038c41db9ef2a0b31389d2c745
2022-04-26 12:44:42 -07:00