fix: Adding support to read the title for server buttons.

[antm-rp]

fix: Add support for screen readers to read the servers from left side server list. The fix uses the toolTipContent string, giving the user information about the serverr name as well as the shortcut combination.

Summary by CodeRabbit

• Bug Fixes
  • Improved accessibility of the server button with enhanced labeling for screen readers and assistive technologies.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

An accessibility label is added to the server button component by setting the aria-label attribute on the IconButton to the existing tooltipContent. This improves screen reader support without changing any other behavior.

Changes

Cohort / File(s)	Change Summary
Accessibility Enhancement src/ui/components/SideBar/ServerButton.tsx	Adds aria-label={tooltipContent} to the IconButton for improved accessibility and screen reader support

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Quick verification that the tooltipContent is always populated when rendered
• Confirm aria-label accessibility best practices are followed

Poem

🐰 A button once silent, now speaks with care,
With aria-labels floating through the air,
Screen readers rejoice, no more guessing games,
Our ServerButton now proudly proclaims its name! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding accessibility support (aria-label) to server buttons for screen reader compatibility.
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

---

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]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/ui/components/SideBar/ServerButton.tsx (1)

107-120: Consider condensing tooltipContent for better screen reader experience.

The template literal construction may produce extra internal whitespace when conditions are false, which screen readers might announce as awkward pauses. Consider using an array approach to avoid this.

Apply this diff to create a more concise format:

-  const tooltipContent = `
-  ${title} (${process.platform === 'darwin' ? '⌘' : '^'}+${shortcutNumber})
-  ${
-    hasUnreadMessages
-      ? `
-    ${
-      mentionCount && mentionCount > 1
-        ? t('sidebar.tooltips.unreadMessages', { count: mentionCount })
-        : t('sidebar.tooltips.unreadMessage', { count: mentionCount })
-    }`
-      : ''
-  }
-  ${!userLoggedIn ? t('sidebar.tooltips.userNotLoggedIn') : ''}
-`.trim();
+  const tooltipContent = [
+    `${title} (${process.platform === 'darwin' ? '⌘' : '^'}+${shortcutNumber})`,
+    hasUnreadMessages &&
+      (mentionCount && mentionCount > 1
+        ? t('sidebar.tooltips.unreadMessages', { count: mentionCount })
+        : t('sidebar.tooltips.unreadMessage', { count: mentionCount })),
+    !userLoggedIn && t('sidebar.tooltips.userNotLoggedIn'),
+  ]
+    .filter(Boolean)
+    .join('. ');

This produces a cleaner aria-label like: "ServerName (⌘1). 3 unread messages. Not logged in" instead of one with extra whitespace.

📜 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 4abd69c and 0ea54f7.

📒 Files selected for processing (1)

• src/ui/components/SideBar/ServerButton.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Follow existing TypeScript patterns with strict mode enabled
All new code must pass ESLint and TypeScript checks
Avoid unnecessary comments; only add comments for complex logic or non-obvious decisions

Files:

• src/ui/components/SideBar/ServerButton.tsx

src/ui/**/*.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

src/ui/**/*.tsx: Implement React UI with functional components and hooks
Use Fuselage components (Box, Button, TextInput, Modal, etc.) and import from @rocket.chat/fuselage instead of raw HTML elements
For Fuselage theming, validate tokens against Theme.d.ts and only use documented values
Name React component files in PascalCase; non-component files should follow camelCase naming

Files:

• src/ui/components/SideBar/ServerButton.tsx

🔇 Additional comments (1)

src/ui/components/SideBar/ServerButton.tsx (1)

145-145: LGTM! Good accessibility improvement.

Adding aria-label to the IconButton provides essential screen reader support for the server list, allowing users to identify servers and their keyboard shortcuts.

[SDV96]

@antm-rp issue : bug fixed as it sees