feat(a11y): adjust the name and role of the multi-select

[OtavioStasiak]

Proposed changes

• Adjust the accessibilityRole of the switch and radio buttons.
• Create a ListRadio component to avoid repeating code.
• Fix a small typo (wrong accessibility props).
• Create a Channel.

Issue(s)

https://rocketchat.atlassian.net/browse/MA-181
https://rocketchat.atlassian.net/browse/MA-120
https://rocketchat.atlassian.net/browse/MA-179
https://rocketchat.atlassian.net/browse/MA-178
https://rocketchat.atlassian.net/browse/MA-118

How to test or reproduce

• Open the app;
• Turn screen reader on;
• Navigate through ThemeView, LanguageView, DefaultBrowserView, MediaAutoDownloadView;
• Create a channel;
• Create a discussion;

Screenshots

Before	After

Before	After

Before	After

Before	After

Before	After

Before	After

Before	After

SelectedUsersList Tablet Portrait	SelectedUsersList Tablet Landscape

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

  • Radio-style selectable list items and demo; Selected Users list with removable user chips; improved accessibility roles and iOS switch announcements.

• Bug Fixes

  • Corrected misspelled accessibility prop across many views to ensure proper screen-reader labels.

• Refactor

  • Unified selection UIs to a radio pattern and adjusted navigation to consistently route through the user-selection screen.

• UI

  • Minor spacing, layout and color tweaks for chips and list items; action sheets now present options as radio entries.

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

[github-actions]

Android Build Available

Rocket.Chat Experimental 4.63.0.87803

Internal App Sharing: https://play.google.com/apps/test/RQVpXLytHNc/ahAO29uNRmNP2n5D8tH5dsgkCR4MeyJoGDkRo1m2ELCzPvQv_2bHRGcoC7am1O7z0uztkuU4Oddavp5CSM6IpgT4Km

[github-actions]

iOS Build Available

Rocket.Chat Experimental 4.63.0.87803

[github-actions]

Android Build Available

Rocket.Chat Experimental 4.64.0.93303

Internal App Sharing: https://play.google.com/apps/test/RQVpXLytHNc/ahAO29uNQrJFoEa-W0ny1Rv6Sxz60pTzlLW6px_P593THuf7cfDZo-G2QA8ZddGhq2_S6ir0B6DsTtkRM2zGaHGUjT

[github-actions]

iOS Build Available

Rocket.Chat Experimental 4.64.0.100081

[diegolmello]

Minor detail and just to make sure, have you run e2e tests?

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/containers/List/ListItem.tsx (1)

166-167: Critical: Fix dependency array to use correct variable names.

The dependency array still references the old misspelled property names (additionalAcessibilityLabel, additionalAcessibilityLabelCheck) instead of the corrected names (additionalAccessibilityLabel, additionalAccessibilityLabelCheck). This causes a compilation error and breaks memoization.

🔎 Proposed fix

 	}, [
 		accessibilityLabel,
 		title,
 		subtitle,
 		translateTitle,
 		translateSubtitle,
-		additionalAcessibilityLabel,
-		additionalAcessibilityLabelCheck
+		additionalAccessibilityLabel,
+		additionalAccessibilityLabelCheck
 	]);

🧹 Nitpick comments (1)

app/containers/List/ListItem.tsx (1)

138-138: Consider fixing the function name typo for consistency.

The function is named handleAcessibilityLabel (with the old typo) while all the properties it uses have been corrected to Accessibility. Renaming to handleAccessibilityLabel would improve consistency.

🔎 Proposed fix

-	const handleAcessibilityLabel = useMemo(() => {
+	const handleAccessibilityLabel = useMemo(() => {
 		let label = '';
 		if (accessibilityLabel) {
 			return accessibilityLabel;

And update the usage on line 175:

-			accessibilityLabel={handleAcessibilityLabel}
+			accessibilityLabel={handleAccessibilityLabel}

📜 Review details

Configuration used: Organization 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 f191af6 and 5bf54c9.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (3)

• app/containers/ActionSheet/Provider.tsx
• app/containers/Chip/index.tsx
• app/containers/List/ListItem.tsx

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

• app/containers/Chip/index.tsx
• app/containers/ActionSheet/Provider.tsx

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: OtavioStasiak
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6499
File: app/containers/ServerItem/index.tsx:34-36
Timestamp: 2025-12-17T15:56:22.578Z
Learning: In the Rocket.Chat React Native codebase, for radio button components on iOS, include the selection state ("Selected"/"Unselected") in the accessibilityLabel instead of using accessibilityState={{ checked: hasCheck }}, because iOS VoiceOver has known issues with accessibilityRole="radio" + accessibilityState that prevent correct state announcement.

📚 Learning: 2025-12-17T15:56:22.578Z

Learnt from: OtavioStasiak
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6499
File: app/containers/ServerItem/index.tsx:34-36
Timestamp: 2025-12-17T15:56:22.578Z
Learning: In the Rocket.Chat React Native codebase, for radio button components on iOS, include the selection state ("Selected"/"Unselected") in the accessibilityLabel instead of using accessibilityState={{ checked: hasCheck }}, because iOS VoiceOver has known issues with accessibilityRole="radio" + accessibilityState that prevent correct state announcement.

Applied to files:

• app/containers/List/ListItem.tsx

🪛 GitHub Actions: Format Code with Prettier

app/containers/List/ListItem.tsx

[error] 138-161: Compilation issues: Existing manual memoization could not be preserved. useMemo/dependency handling indicated by the tool. Potentially incorrect dependency array for handleAcessibilityLabel.

---

[error] 166-166: 'additionalAcessibilityLabel' is not defined. Possibly a typo vs 'additionalAccessibilityLabel'.

🔇 Additional comments (2)

app/containers/List/ListItem.tsx (2)

105-105: LGTM! Typo fix improves consistency.

The correction from additionalAcessibilityLabel → additionalAccessibilityLabel and additionalAcessibilityLabelCheck → additionalAccessibilityLabelCheck properly fixes the spelling throughout the property declarations and usage.

Also applies to: 107-107, 127-128, 149-157

---

248-248: LGTM! Export enables composition.

Exporting IListItem allows other components (like the new ListRadio) to extend this interface, which supports the accessibility improvements and component reusability goals of this PR.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/containers/List/ListItem.tsx (1)

138-138: Consider renaming the internal function for consistency.

While the prop names were corrected to additionalAccessibilityLabel, the internal function handleAcessibilityLabel still uses the old spelling. For consistency, consider renaming it to handleAccessibilityLabel.

🔎 Proposed rename

Line 138:

-		const handleAcessibilityLabel = useMemo(() => {
+		const handleAccessibilityLabel = useMemo(() => {

Line 175:

-			accessibilityLabel={handleAcessibilityLabel}
+			accessibilityLabel={handleAccessibilityLabel}

Also applies to: 175-175

📜 Review details

Configuration used: Organization 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 5bf54c9 and 974dc9e.

📒 Files selected for processing (1)

• app/containers/List/ListItem.tsx

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: OtavioStasiak
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6499
File: app/containers/ServerItem/index.tsx:34-36
Timestamp: 2025-12-17T15:56:22.578Z
Learning: In the Rocket.Chat React Native codebase, for radio button components on iOS, include the selection state ("Selected"/"Unselected") in the accessibilityLabel instead of using accessibilityState={{ checked: hasCheck }}, because iOS VoiceOver has known issues with accessibilityRole="radio" + accessibilityState that prevent correct state announcement.

📚 Learning: 2025-12-17T15:56:22.578Z

Learnt from: OtavioStasiak
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6499
File: app/containers/ServerItem/index.tsx:34-36
Timestamp: 2025-12-17T15:56:22.578Z
Learning: In the Rocket.Chat React Native codebase, for radio button components on iOS, include the selection state ("Selected"/"Unselected") in the accessibilityLabel instead of using accessibilityState={{ checked: hasCheck }}, because iOS VoiceOver has known issues with accessibilityRole="radio" + accessibilityState that prevent correct state announcement.

Applied to files:

• app/containers/List/ListItem.tsx

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

• GitHub Check: E2E Build Android / android-build
• GitHub Check: E2E Build iOS / ios-build
• GitHub Check: ESLint and Test / run-eslint-and-test
• GitHub Check: format

🔇 Additional comments (3)

app/containers/List/ListItem.tsx (3)

105-107: Typo fixes improve consistency.

The spelling corrections (Acessibility → Accessibility) properly align the property names with standard naming conventions.

---

149-157: State-in-label pattern correctly handles iOS VoiceOver limitations.

The logic appropriately includes "Checked"/"Unchecked" or "Enabled"/"Disabled" in the accessibility label text when additionalAccessibilityLabel is boolean. This aligns with the established pattern for handling iOS VoiceOver issues with accessibilityRole="radio" and accessibilityState.

Based on learnings, this approach ensures screen readers correctly announce the selection state on iOS.

---

248-248: Interface export enables external type usage.

Adding the export keyword allows other components to import and use the IListItem type, which is necessary for the broader refactoring introducing List.Radio and other list components.