fix(a11y): replace composer auto-focus with header focus in RoomView

[OtavioStasiak]

Proposed changes

Replace composer auto-focus with header focus in RoomView.

Issue(s)

https://rocketchat.atlassian.net/browse/NATIVE-1125

How to test or reproduce

• Connect a physical keyboard;
• Open the app (on MasterDetail as true);
• focus on RoomItem;
• Press enter or space;
• The keyboard focus must change to header;

Screenshots

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

• Refactor
  • Improved accessibility navigation with declarative keyboard-aware focus handling
  • Enhanced support for screen reader and external keyboard navigation
  • Simplified room header component API by removing ref-based focus control

[coderabbitai]

Walkthrough

Replaces imperative ref-based focus management in RoomHeader with declarative KeyboardFocusView props controlled by a new useIsAccessibilityNavigationEnabled hook. Removes ref forwarding from RoomHeaderContainer and eliminates focus listener logic from RoomView that manually managed header focus based on keyboard state.

Changes

Accessibility Focus Management Refactor

Layer / File(s)	Summary
Accessibility navigation hook app/lib/hooks/useIsAccessibilityNavigationEnabled.ts	Introduces useIsAccessibilityNavigationEnabled hook that returns a boolean combining screen reader enablement (via useIsScreenReaderEnabled) and external keyboard connection state (via isExternalKeyboardConnected).
RoomHeader component refactor app/containers/RoomHeader/RoomHeader.tsx	Replaces View focus container with KeyboardFocusView wrapper and simplifies props by removing ref support. The header now derives autoFocusHeader from the accessibility-navigation hook and wires KeyboardFocusView focus props (autoFocus, enableA11yFocus, focusable, canBeFocused) to that state and the disabled prop. Imports updated to include KeyboardFocusView and the new hook.
RoomHeader container simplification app/containers/RoomHeader/index.tsx	Removes ref forwarding by simplifying the props type to exclude ref support, removing ref destructuring, and deleting the ref prop passed to the underlying RoomHeader. Removes IRoomHeaderRef type export.
RoomView focus management cleanup app/views/RoomView/index.tsx	Removes old ref-based focus management: deletes roomHeaderRef ref initialization, removes the navigation.addListener('focus') handler that manually focused the header or message composer based on keyboard state, and removes associated cleanup. Imports updated to remove IRoomHeaderRef and isExternalKeyboardConnected.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

type: feature

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: replacing composer auto-focus with header focus in RoomView, which aligns with the primary objective and file modifications across the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• NATIVE-1125: Request failed with status code 401

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

app/containers/RoomHeader/RoomHeader.tsx (1)

88-88: 💤 Low value

Redundant type alias.

Since the ref-wrapped variant was removed, IRoomHeaderProps is now just an alias for IRoomHeader. Consider renaming IRoomHeader directly to IRoomHeaderProps (or dropping the alias and using IRoomHeader) to remove the indirection.

Proposed cleanup

-interface IRoomHeader {
+interface IRoomHeaderProps {
 	title?: string;
 	...
 }

-type IRoomHeaderProps = IRoomHeader;
-
 const SubTitle = ...

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/containers/RoomHeader/RoomHeader.tsx` at line 88, IRoomHeaderProps is a
redundant alias for IRoomHeader; remove the indirection by either renaming the
interface IRoomHeader to IRoomHeaderProps or deleting the alias and using
IRoomHeader directly. Update the declaration in RoomHeader.tsx (replace the type
alias line `type IRoomHeaderProps = IRoomHeader;`) and then update any
references to the old symbol across the file (and imports/usages elsewhere) to
use the chosen canonical name (IRoomHeaderProps or IRoomHeader) so types remain
consistent.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@app/containers/RoomHeader/RoomHeader.tsx`:
- Line 88: IRoomHeaderProps is a redundant alias for IRoomHeader; remove the
indirection by either renaming the interface IRoomHeader to IRoomHeaderProps or
deleting the alias and using IRoomHeader directly. Update the declaration in
RoomHeader.tsx (replace the type alias line `type IRoomHeaderProps =
IRoomHeader;`) and then update any references to the old symbol across the file
(and imports/usages elsewhere) to use the chosen canonical name
(IRoomHeaderProps or IRoomHeader) so types remain consistent.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8fdf516c-fc9a-443e-8a4d-1f5dad62f14f

📥 Commits

Reviewing files that changed from the base of the PR and between 2b85573 and 0e1c72b.

⛔ Files ignored due to path filters (1)

• app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (4)

• app/containers/RoomHeader/RoomHeader.tsx
• app/containers/RoomHeader/index.tsx
• app/lib/hooks/useIsAccessibilityNavigationEnabled.ts
• app/views/RoomView/index.tsx

📜 Review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: ESLint and Test / run-eslint-and-test

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions

Files:

• app/lib/hooks/useIsAccessibilityNavigationEnabled.ts
• app/containers/RoomHeader/RoomHeader.tsx
• app/containers/RoomHeader/index.tsx
• app/views/RoomView/index.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers

Use TypeScript with strict mode and baseUrl set to app/ for import resolution

Files:

• app/lib/hooks/useIsAccessibilityNavigationEnabled.ts
• app/containers/RoomHeader/RoomHeader.tsx
• app/containers/RoomHeader/index.tsx
• app/views/RoomView/index.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,js,jsx}: Use Prettier with tabs, single quotes, 130 char width, no trailing commas, arrow parens avoid, bracket same line
Use @rocket.chat/eslint-config base with React, React Native, TypeScript, Jest plugins

Files:

• app/lib/hooks/useIsAccessibilityNavigationEnabled.ts
• app/containers/RoomHeader/RoomHeader.tsx
• app/containers/RoomHeader/index.tsx
• app/views/RoomView/index.tsx

app/containers/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Reusable UI components should be placed in app/containers/ directory

Files:

• app/containers/RoomHeader/RoomHeader.tsx
• app/containers/RoomHeader/index.tsx

app/views/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

View components (70+ screen components) should be placed in app/views/ directory

Files:

• app/views/RoomView/index.tsx

🧠 Learnings (1)

📚 Learning: 2026-04-30T17:07:51.020Z

Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.

Applied to files:

• app/lib/hooks/useIsAccessibilityNavigationEnabled.ts
• app/containers/RoomHeader/RoomHeader.tsx
• app/containers/RoomHeader/index.tsx
• app/views/RoomView/index.tsx

🔇 Additional comments (4)

app/containers/RoomHeader/index.tsx (1)

6-44: LGTM!

app/views/RoomView/index.tsx (1)

32-32: LGTM!

Also applies to: 141-141, 254-256, 378-380

app/lib/hooks/useIsAccessibilityNavigationEnabled.ts (1)

9-12: ⚡ Quick win

Request original review content to rewrite: the <review_comment> text wasn’t provided here, so the comment can’t be rewritten. Send the <review_comment>...</review_comment> block.

app/containers/RoomHeader/RoomHeader.tsx (1)

206-236: 🏗️ Heavy lift

Missing input: please provide the original review comment inside a <review_comment> tag so I can rewrite it according to the required format.