[Mobile] - Fix Voice Over and assistive keyboards #53895
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…- This fixes the current React Native regression with VoiceOver and assistive keyboards
geriux
added
[Type] Bug
|
Size Change: +81 B (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
added 2 commits
August 23, 2023 18:05
…y introduced accessibilityState prop which causes issues with assistive keyboards
…ging the AztecView component to use Pressable
geriux
changed the title
geriux
removed
the
Mobile App - Automation
|
Flaky tests detected in ce4c59b. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5953781839
|
13 tasks
All tests passed for me @geriux! Thank you! 🚀 |
dcalhoun
reviewed
Aug 24, 2023
dcalhoun
approved these changes
Aug 24, 2023
|
This is definitely worth adding a release note IMO. |
Yup! But I was wondering if it'd make things easier if we add it when we cherry-pick it, what do you think? To prevent possible conflicts 😅 |
Ah, that makes and works for me. For another time: we should automate this. 😄 |
derekblank
pushed a commit
that referenced
this pull request
Aug 25, 2023
* AztecView - Replace usage of TouchableWithoutFeedback with Pressable - This fixes the current React Native regression with VoiceOver and assistive keyboards * Patch React Native's TextInput component to avoid passing the recently introduced accessibilityState prop which causes issues with assistive keyboards * Updates snapshots: Fule, Audio blocks and Search component after changing the AztecView component to use Pressable * Update AztecView's Pressable with changing its accessible prop to false
4 tasks
geriux
pushed a commit
that referenced
this pull request
Aug 25, 2023
* AztecView - Replace usage of TouchableWithoutFeedback with Pressable - This fixes the current React Native regression with VoiceOver and assistive keyboards * Patch React Native's TextInput component to avoid passing the recently introduced accessibilityState prop which causes issues with assistive keyboards * Updates snapshots: Fule, Audio blocks and Search component after changing the AztecView component to use Pressable * Update AztecView's Pressable with changing its accessible prop to false
dcalhoun
pushed a commit
that referenced
this pull request
Aug 25, 2023
* AztecView - Replace usage of TouchableWithoutFeedback with Pressable - This fixes the current React Native regression with VoiceOver and assistive keyboards * Patch React Native's TextInput component to avoid passing the recently introduced accessibilityState prop which causes issues with assistive keyboards * Updates snapshots: Fule, Audio blocks and Search component after changing the AztecView component to use Pressable * Update AztecView's Pressable with changing its accessible prop to false
4 tasks
derekblank
added a commit
that referenced
this pull request
Aug 28, 2023
* Release script: Update react-native-editor version to 1.101.0 * Release script: Update with changes from 'npm run core preios' * Update `react-native-editor` CHANGELOG * Remove incorrect CHANGELOG entry The iOS focus loop will be included in 1.100.2. I've updated the CHANGELOG accordingly. * Release script: Update react-native-editor version to 1.101.1 * Release script: Update with changes from '$PRE_IOS_COMMAND' * fix: Dynamic bottom sheet height (#53608) Stretching this content with flex appears to be necessary after upgrading React Native or refactoring the bottom sheet height animation. Refactor: 0411df1 Upgrade: c2957aa * fix: Optional chaining to handle undefined title (#53721) This PR adds safety checks for the `title` property within `reusableBlock`. By using optional chaining, the code now gracefully handles scenarios where `title` might be undefined, preventing a TypeError from being thrown. * Update CHANGELOG * Release script: Update react-native-editor version to 1.101.2 * Release script: Update with changes from 'npm run core preios' * [Mobile] - Fix Voice Over and assistive keyboards (#53895) * AztecView - Replace usage of TouchableWithoutFeedback with Pressable - This fixes the current React Native regression with VoiceOver and assistive keyboards * Patch React Native's TextInput component to avoid passing the recently introduced accessibilityState prop which causes issues with assistive keyboards * Updates snapshots: Fule, Audio blocks and Search component after changing the AztecView component to use Pressable * Update AztecView's Pressable with changing its accessible prop to false * Update Changelog --------- Co-authored-by: Siobhan <siobhan@automattic.com> Co-authored-by: David Calhoun <github@davidcalhoun.me> Co-authored-by: Gerardo <gerardo.pacheco@automattic.com>
dcalhoun
added a commit
that referenced
this pull request
Aug 28, 2023
* Release script: Update react-native-editor version to 1.102.0 * Release script: Update with changes from 'npm run core preios' * Bump version in package-lock.json * Update CHANGELOG to reflect latest release * Fix PR reference in CHANGELOG entry * Release script: Update react-native-editor version to 1.102.1 * Release script: Update with changes from 'npm run core preios' * [Mobile] - Fix Voice Over and assistive keyboards (#53895) * AztecView - Replace usage of TouchableWithoutFeedback with Pressable - This fixes the current React Native regression with VoiceOver and assistive keyboards * Patch React Native's TextInput component to avoid passing the recently introduced accessibilityState prop which causes issues with assistive keyboards * Updates snapshots: Fule, Audio blocks and Search component after changing the AztecView component to use Pressable * Update AztecView's Pressable with changing its accessible prop to false * docs: Add change log entry --------- Co-authored-by: Gio Lodi <gio@mokacoding.com> Co-authored-by: Siobhan <siobhan@automattic.com> Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com>
4 tasks
This was referenced Sep 6, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes wordpress-mobile/WordPress-iOS#21399
Related PRs:
What?
This PR addresses a regression after the React Native
0.71upgrade, affecting how VoiceOver works with assistive input like Braille Screen Input, as well as using a Bluetooth keyboard and VoiceOver enabled.There's an existing GitHub ticket in the React Native repo about this problem, it seems it only affects the legacy renderer.
Why?
React Native
0.71includes several accessibility changes and these introduced this regression of the mobile editor.How?
First, it replaces the
TouchableWithoutFeedbackcomponent inAztecViewwithPressableas it restores the expected behavior when using VoiceOver and an assistive keyboard. It adds theaccessibleprop tofalseso the children components get accessed directly.Due to updating the component that wraps
RCTAztecViewsome snapshots needed to be updated.Another important change is the new
patches/react-native+0.71.11.patchpatch, This was needed due to standard TextInputs being broken as well, so it applies a change that reverts the changes introduced in React Native.Testing Instructions
Note: This only affects the iOS platform and the VoiceOver functionality.
Preconditions:
Braille Screen Inputenabled in the VoiceOver Rotor.Tip: You can enable/disable VoiceOver with Siri.
VoiceOver with an assistive input (Braille Screen Input)
Adding content to the title and a Paragraph block
Adding content to the HTML editor
Using the Search block in the inserter
Updating an Image caption
Bluetooth keyboard input with VoiceOver enabled
Screenshots or screencast
VoiceOver with an assistive input (Braille Screen Input)
TestCase1_Before.mov
TestCase1_After.mov
Bluetooth keyboard input with VoiceOver enabled
TestCase2_Before.mov
TestCase2_After.mov