feat(iOS): set AccessibilityLanguage for correct accent by OtavioStasiak · Pull Request #6493 · RocketChat/Rocket.Chat.ReactNative

OtavioStasiak · 2025-07-15T21:49:29Z

Proposed changes

Enable Screen reader reads translated message with the right accent.

Issue(s)

https://rocketchat.atlassian.net/browse/MA-175

How to test or reproduce

Open the app;
Go to a room with autoTranslate enabled to another language;
Send a message and turn your screen reader on;
Focus on translated message;

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

New Features
- Messages now indicate when auto‑translated and display the translated language name; translations added across 30+ locales and an expanded list of supported languages.
Accessibility
- Improved accessibility labeling and navigation so screen readers better announce translation status and related message metadata.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

github-actions · 2025-07-25T21:14:21Z

Android Build Available

Rocket.Chat Experimental 4.63.0.93294

Internal App Sharing: https://play.google.com/apps/test/RQVpXLytHNc/ahAO29uNT3oBW7unjEvlLcrIhR7E1VLZ-oDNAmlGnkNuPcr1PqbgQrEAQP5aZO5wgOf8hEM0_VC9i3AL7LYZQXUwSI

github-actions · 2025-07-28T20:49:16Z

iOS Build Available

Rocket.Chat Experimental 4.63.0.87852

coderabbitai · 2025-10-20T20:32:06Z

Walkthrough

Adds accessibility wrappers and language attributes to message rendering, forwards an optional autoTranslateLanguage prop, introduces a translationLanguages mapping, and adds a localized "Message_translated_into_idiom" key across many locale files.

Changes

Cohort / File(s)	Summary
Message component & types `app/containers/message/Message.tsx`, `app/containers/message/index.tsx`, `app/containers/message/interfaces.ts`	Wraps message UI and touchable container with `A11y.Order`/`A11y.Index`, moves/tweaks header and right-icon rendering to fit the new accessibility structure, includes translated-language text in accessibility labels when `isTranslated` using a lookup, forwards `autoTranslateLanguage` prop from container to Message, and adds `autoTranslateLanguage?: string` to `IMessage`.
Translation language mapping `app/lib/constants/translationLanguages.ts`	Adds a default-exported `Record<string,string>` mapping language codes/locales to human-readable language names for use in accessibility labels and translated-message text.
i18n — translated-message strings `app/i18n/locales/*.json` `app/i18n/locales/ar.json`, `app/i18n/locales/bn-IN.json`, `app/i18n/locales/cs.json`, `app/i18n/locales/de.json`, `app/i18n/locales/en.json`, `app/i18n/locales/es.json`, `app/i18n/locales/fi.json`, `app/i18n/locales/fr.json`, `app/i18n/locales/hi-IN.json`, `app/i18n/locales/hu.json`, `app/i18n/locales/it.json`, `app/i18n/locales/ja.json`, `app/i18n/locales/nl.json`, `app/i18n/locales/nn.json`, `app/i18n/locales/no.json`, `app/i18n/locales/pt-BR.json`, `app/i18n/locales/pt-PT.json`, `app/i18n/locales/ru.json`, `app/i18n/locales/sl-SI.json`, `app/i18n/locales/sv.json`, `app/i18n/locales/ta-IN.json`, `app/i18n/locales/te-IN.json`, `app/i18n/locales/tr.json`, `app/i18n/locales/zh-CN.json`, `app/i18n/locales/zh-TW.json`	Adds new localization key `Message_translated_into_idiom` with a `{{idiom}}` placeholder to support visible and screen-reader labels indicating the target language of translated messages.

Sequence Diagram(s)

sequenceDiagram
  participant Container as MessageContainer
  participant Message as Message
  participant LangMap as translationLanguages
  participant A11y as A11y wrappers
  participant SR as ScreenReader

  Container->>Message: render(..., autoTranslateLanguage)
  alt autoTranslateLanguage present
    Message->>LangMap: lookup(autoTranslateLanguage)
    LangMap-->>Message: languageName
    Message->>A11y: wrap(messageContent, label includes languageName, set accessibilityLanguage)
  else no autoTranslateLanguage
    Message->>A11y: wrap(messageContent, default labels)
  end
  A11y->>SR: expose label & language attribute
  Note right of SR `#D6EAF8`: Screen reader reads using provided language attribute

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Pay extra attention to app/containers/message/Message.tsx for A11y wrapper placement and conditional rendering changes.
Verify autoTranslateLanguage typing and forwarding in index.tsx and interfaces.ts.
Confirm translationLanguages covers codes used by translations and autoTranslateLanguage.
Spot-check several locale files for correct {{idiom}} placeholder usage and encoding.

Suggested reviewers

diegolmello

Poem

🐇
I hop through code with nimble feet,
Wrapping words so voices meet.
I whisper idioms soft and bright,
So screen readers say them right. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: adding accessibility language support for translated messages on iOS to enable correct screen reader accents.
Linked Issues check	✅ Passed	The PR successfully implements MA-175 by wrapping translated messages with A11y accessibility wrappers, deriving language from autoTranslateLanguage, and displaying translation metadata via new i18n keys across all locales.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with MA-175 objectives. The PR adds accessibility language support for translated messages, new translation keys, and necessary supporting infrastructure without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat-a11y-translate

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 23f2cbc and db4db9d.

⛔ Files ignored due to path filters (1)

app/containers/message/__snapshots__/Message.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

app/containers/message/Message.tsx (5 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

app/containers/message/Message.tsx (1)

app/lib/database/model/Message.js (1)

Message (8-134)

⏰ 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). (2)

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

🔇 Additional comments (1)

app/containers/message/Message.tsx (1)

230-249: A11y.Order wrapping structure looks correct

The use of A11y.Order to wrap both interactive and non-interactive message paths is appropriate. The A11y.Index wrapper on the touchable (lines 238-248) correctly sets index={1} for the touchable container, while the inner Message component's A11y.Index uses index={2} for proper reading order.

However, the effectiveness of this structure depends on fixing the nested accessible issues within the Message component itself (flagged in other comments).

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

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

coderabbitai

Actionable comments posted: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between a7a4970 and 6f467a3.

📒 Files selected for processing (1)

app/containers/message/Message.tsx (5 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

app/containers/message/Message.tsx (1)

app/lib/database/model/Message.js (1)

Message (8-134)

⏰ 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). (2)

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

🔇 Additional comments (2)

app/containers/message/Message.tsx (2)

4-4: LGTM: Imports are appropriate for the accessibility enhancements.

The react-native-a11y-order dependency is declared in package.json (v0.4.0), and the translationLanguages constant provides the language mapping needed for translated message announcements.

Also applies to: 29-29

229-241: LGTM: A11y.Order wrapper correctly establishes reading sequence.

The A11y.Order and A11y.Index structure properly organizes the focus order:

Index 1: Touchable interaction wrapper

Index 2: Message content (inside Message component)

This ensures screen readers traverse the message in the intended sequence.

app/containers/message/Message.tsx

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 6f467a3 and 23f2cbc.

⛔ Files ignored due to path filters (1)

app/containers/message/__snapshots__/Message.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (26)

app/containers/message/Message.tsx (5 hunks)
app/i18n/locales/ar.json (1 hunks)
app/i18n/locales/bn-IN.json (1 hunks)
app/i18n/locales/cs.json (1 hunks)
app/i18n/locales/de.json (1 hunks)
app/i18n/locales/en.json (1 hunks)
app/i18n/locales/es.json (1 hunks)
app/i18n/locales/fi.json (1 hunks)
app/i18n/locales/fr.json (1 hunks)
app/i18n/locales/hi-IN.json (1 hunks)
app/i18n/locales/hu.json (1 hunks)
app/i18n/locales/it.json (1 hunks)
app/i18n/locales/ja.json (1 hunks)
app/i18n/locales/nl.json (1 hunks)
app/i18n/locales/nn.json (1 hunks)
app/i18n/locales/no.json (1 hunks)
app/i18n/locales/pt-BR.json (1 hunks)
app/i18n/locales/pt-PT.json (1 hunks)
app/i18n/locales/ru.json (1 hunks)
app/i18n/locales/sl-SI.json (1 hunks)
app/i18n/locales/sv.json (1 hunks)
app/i18n/locales/ta-IN.json (1 hunks)
app/i18n/locales/te-IN.json (1 hunks)
app/i18n/locales/tr.json (1 hunks)
app/i18n/locales/zh-CN.json (1 hunks)
app/i18n/locales/zh-TW.json (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (15)

app/i18n/locales/zh-CN.json
app/i18n/locales/sv.json
app/i18n/locales/hu.json
app/i18n/locales/de.json
app/i18n/locales/te-IN.json
app/i18n/locales/pt-PT.json
app/i18n/locales/it.json
app/i18n/locales/hi-IN.json
app/i18n/locales/sl-SI.json
app/i18n/locales/ru.json
app/i18n/locales/ar.json
app/i18n/locales/tr.json
app/i18n/locales/ta-IN.json
app/i18n/locales/no.json
app/i18n/locales/pt-BR.json

⏰ 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). (2)

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

🔇 Additional comments (5)

app/i18n/locales/fr.json (1)

407-407: Translation and formatting look good.

The new French localization for accessibility messages is properly formatted, alphabetically positioned, and uses the template variable pattern correctly. This entry will enable correct screen reader pronunciation for translated messages on iOS.

app/i18n/locales/nn.json (1)

229-229: Localization key properly added.

The new key Message_translated_into_idiom with value "Melding omsett til {{idiom}}" is correctly formatted, alphabetically positioned, and provides an accurate Norwegian Nynorsk translation for the accessibility feature. The placeholder follows established patterns in the file.

app/i18n/locales/nl.json (1)

407-407: Localization key properly formatted and positioned.

The new Message_translated_into_idiom key follows existing naming conventions, uses correct Dutch translation, and the template variable {{idiom}} aligns with the PR's translationLanguages mapping. JSON syntax is correct with proper comma placement.

app/i18n/locales/en.json (1)

526-526: Verify placeholder variable name consistency.

The new localization key uses {{idiom}} as the placeholder, but in translation contexts, "idiom" typically refers to figurative expressions rather than languages. Given the PR's use of autoTranslateLanguage and translationLanguages terminology elsewhere, consider whether the placeholder should be {{language}} or similar for semantic clarity.

To confirm alignment, please verify:

What variable name the component passes to this localization key when rendering translated messages

Whether other new localization keys in this PR use consistent terminology

If "idiom" is an intentional choice to distinguish from the app's language settings

app/i18n/locales/zh-TW.json (1)

345-345: Translation addition is complete and properly integrated.

The zh-TW locale key at line 345 is correctly implemented with full end-to-end support:

translationLanguages mapping: Confirmed in app/lib/constants/translationLanguages.ts with 'zh-TW': 'Chinese (Traditional)' providing values for the {{idiom}} placeholder

Message component integration: app/containers/message/Message.tsx (line 151) uses the key with i18n.t('Message_translated_into_idiom', { idiom: translatedLanguage }), properly passing the language name from the constant

Screen reader accessibility: The message is used in the accessibility label context for screen reader announcements (lines 148-154)

Locale consistency: The translation exists across all supported locales with consistent formatting

No additional action needed.

app/containers/message/Message.tsx

OtavioStasiak and others added 9 commits July 15, 2025 18:49

feat: translate a11y label

44b1269

Merge branch 'develop' into feat-a11y-translate

4524250

fix: some tests

a1a52ec

feat: isolate translated string

772f3c4

fix: translation

872d3cf

fix: a11y dynamic focus

cc97ae1

Merge branch 'develop' into feat-a11y-translate

6f0e6ef

action: organized translations

506e39c

fix: snappshot test

9cdea6f

OtavioStasiak temporarily deployed to experimental_ios_build July 25, 2025 20:39 — with GitHub Actions Inactive

OtavioStasiak had a problem deploying to official_ios_build July 25, 2025 20:39 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_android_build July 25, 2025 20:39 — with GitHub Actions Error

OtavioStasiak temporarily deployed to experimental_android_build July 25, 2025 20:39 — with GitHub Actions Inactive

OtavioStasiak had a problem deploying to upload_experimental_android July 25, 2025 21:12 — with GitHub Actions Error

OtavioStasiak temporarily deployed to experimental_ios_build July 28, 2025 18:52 — with GitHub Actions Inactive

OtavioStasiak added 4 commits August 6, 2025 16:43

feat: added autoTranslateLabel

1b78f56

rollback and changed translate language solution

8c06ef4

Merge branch 'develop' into feat-a11y-translate

84128b1

fix: unit tests

f6290a0

OtavioStasiak had a problem deploying to approve_e2e_testing October 20, 2025 20:31 — with GitHub Actions Error

OtavioStasiak added 3 commits October 20, 2025 23:57

fix: handle bcp47 a11y language

eaa180b

fix: unit tests

039c254

chore: code improvements

117eb98

OtavioStasiak had a problem deploying to approve_e2e_testing October 21, 2025 03:00 — with GitHub Actions Error

OtavioStasiak temporarily deployed to experimental_android_build October 21, 2025 03:05 — with GitHub Actions Inactive

OtavioStasiak had a problem deploying to official_ios_build October 21, 2025 03:05 — with GitHub Actions Error

OtavioStasiak temporarily deployed to experimental_ios_build October 21, 2025 03:05 — with GitHub Actions Inactive

OtavioStasiak had a problem deploying to official_android_build November 21, 2025 17:25 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_android_build November 21, 2025 17:25 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_ios_build November 21, 2025 17:25 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_ios_build November 21, 2025 17:25 — with GitHub Actions Error

code improvements

6f467a3

OtavioStasiak had a problem deploying to approve_e2e_testing November 21, 2025 17:52 — with GitHub Actions Error

fix: snapshot test

48015cb

OtavioStasiak temporarily deployed to approve_e2e_testing November 21, 2025 17:55 — with GitHub Actions Inactive

coderabbitai bot reviewed Nov 21, 2025

View reviewed changes

app/containers/message/Message.tsx Show resolved Hide resolved

app/containers/message/Message.tsx Show resolved Hide resolved

OtavioStasiak had a problem deploying to official_android_build November 21, 2025 17:57 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_android_build November 21, 2025 17:57 — with GitHub Actions Error

OtavioStasiak had a problem deploying to experimental_ios_build November 21, 2025 17:57 — with GitHub Actions Error

OtavioStasiak had a problem deploying to official_ios_build November 21, 2025 17:57 — with GitHub Actions Error

diegolmello requested changes Nov 25, 2025

View reviewed changes

app/containers/message/Message.tsx Show resolved Hide resolved

app/containers/message/Message.tsx Show resolved Hide resolved

fix: missed error removed

0c7a1eb

OtavioStasiak had a problem deploying to approve_e2e_testing November 25, 2025 17:56 — with GitHub Actions Error

Merge branch 'develop' into feat-a11y-translate

be116c6

OtavioStasiak had a problem deploying to approve_e2e_testing November 25, 2025 17:58 — with GitHub Actions Error

fix: snapshot

23f2cbc

OtavioStasiak had a problem deploying to approve_e2e_testing November 25, 2025 18:31 — with GitHub Actions Error

coderabbitai bot reviewed Nov 25, 2025

View reviewed changes

app/containers/message/Message.tsx Show resolved Hide resolved

fix: snapshot

db4db9d

OtavioStasiak had a problem deploying to approve_e2e_testing November 25, 2025 19:13 — with GitHub Actions Failure

OtavioStasiak had a problem deploying to experimental_android_build November 25, 2025 19:17 — with GitHub Actions Failure

OtavioStasiak had a problem deploying to official_ios_build November 25, 2025 19:17 — with GitHub Actions Failure

OtavioStasiak had a problem deploying to experimental_ios_build November 25, 2025 19:17 — with GitHub Actions Failure

OtavioStasiak had a problem deploying to official_android_build November 25, 2025 19:17 — with GitHub Actions Failure

diegolmello approved these changes Nov 25, 2025

View reviewed changes

diegolmello merged commit c0a5975 into develop Nov 25, 2025
5 of 10 checks passed

diegolmello deleted the feat-a11y-translate branch November 25, 2025 19:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(iOS): set AccessibilityLanguage for correct accent#6493

feat(iOS): set AccessibilityLanguage for correct accent#6493
diegolmello merged 32 commits intodevelopfrom
feat-a11y-translate

OtavioStasiak commented Jul 15, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

github-actions bot commented Jul 25, 2025

Uh oh!

github-actions bot commented Jul 28, 2025

Uh oh!

coderabbitai bot commented Oct 20, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

OtavioStasiak commented Jul 15, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Issue(s)

How to test or reproduce

Screenshots

Types of changes

Checklist

Further comments

Summary by CodeRabbit

Uh oh!

github-actions bot commented Jul 25, 2025

Uh oh!

github-actions bot commented Jul 28, 2025

Uh oh!

coderabbitai bot commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

OtavioStasiak commented Jul 15, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 20, 2025 •

edited

Loading