Skip to content

fix(a11y): focus inputs on enter and page transitions#3671

Merged
isekovanic merged 2 commits into
developfrom
fix/focus-input-on-enter
Jun 22, 2026
Merged

fix(a11y): focus inputs on enter and page transitions#3671
isekovanic merged 2 commits into
developfrom
fix/focus-input-on-enter

Conversation

@isekovanic

Copy link
Copy Markdown
Contributor

🎯 Goal

When a screen-reader user opens a channel or thread, VoiceOver/TalkBack focus previously landed on an arbitrary stop (the back button, or a message mid-list). This moves the entry point to where the user acts — the message composer — while keeping the header/back reachable via standard OS gestures.

  • Add useSetAccessibilityFocus() - a public, generic primitive that moves the screen reader cursor onto a ref/node (SR-gated, RAF deferred). It only moves accessibility focus; it never opens the keyboard or activates the field.
  • Add useScreenReaderMountFocus(ref) - built on the primitive; focuses on mount (and once the SR state resolves). MessageComposer uses it on inputBoxRef, so the composer is focused on entry. This is the path that lands Android forward navigation as well (but not always on iOS, which is why we need the actual transitional effect as well)

SampleApp reference implementation:

  • useScreenReaderComposerFocusEffect - wires React Navigation's transitionEnd to useSetAccessibilityFocus, covering back navigation (both platforms) and iOS forward navigation (where firing on mount loses a race with the OS focus pass). Returns a stable setInputRef for <Channel>.
  • Header reachability is done by adding accessibilityRole='header' on the screen header title (reachable via iOS Headings rotor / jump to top and Android Headings reading control swipe up) and onAccessibilityEscape -> goBack on the screen root for the iOS back scrub (Android uses the system Back gesture).

Note: onAccessibilityEscape is inert on a layout only View under Fabric - it gets flattened and never receives the gesture. The view hosting it needs collapsable={false} if it does not apply any layout relevant props itself.

🛠 Implementation details

🎨 UI Changes

iOS
Before After
Android
Before After

🧪 Testing

☑️ Checklist

  • I have signed the Stream CLA (required)
  • PR targets the develop branch
  • Documentation is updated
  • New code is tested in main example apps, including all possible scenarios
    • SampleApp iOS and Android
    • Expo iOS and Android

@isekovanic isekovanic requested review from oliverlaz and szuperaz June 22, 2026 11:46
@Stream-SDK-Bot

Copy link
Copy Markdown
Contributor

SDK Size

title develop branch diff status
js_bundle_size 1955 KB 1957 KB +2080 B 🔴

@isekovanic isekovanic merged commit 683ba19 into develop Jun 22, 2026
8 of 10 checks passed
@isekovanic isekovanic deleted the fix/focus-input-on-enter branch June 22, 2026 12:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants