1 files changed, 33 insertions, 1 deletions

diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 404149b..010c716 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -21,9 +21,12 @@
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { alpha, styled } from '@mui/material/styles';
+import type { TFunction } from 'i18next';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
+import type Service from '../../stores/Service';
 import { useStore } from '../StoreProvider';
 
 import ServiceIcon from './ServiceIcon';
@@ -63,7 +66,36 @@ const ServiceSwitcherTab = styled(Tab, {
   },
 }));
 
+function getServiceTitle(service: Service, t: TFunction) {
+  const {
+    settings: { name },
+    directMessageCount,
+    indirectMessageCount,
+  } = service;
+  let messagesText: string | undefined;
+  if (indirectMessageCount > 0) {
+    messagesText =
+      directMessageCount > 0
+        ? t('service.title.directAndIndirectMessageCount', {
+            directMessageCount,
+            indirectMessageCount,
+          })
+        : t('service.title.indirectMessageCount', {
+            count: indirectMessageCount,
+          });
+  } else if (directMessageCount > 0) {
+    messagesText = t('service.title.directMessageCount', {
+      count: directMessageCount,
+    });
+  }
+  if (messagesText === undefined) {
+    return t('service.title.nameWithNoMessages', { name });
+  }
+  return t('service.title.nameWithMessages', { name, messages: messagesText });
+}
+
 function ServiceSwitcher(): JSX.Element {
+  const { t } = useTranslation();
   const { settings, services } = useStore();
   const { selectedService } = settings;
 
@@ -81,7 +113,7 @@ function ServiceSwitcher(): JSX.Element {
           key={service.id}
           value={service.id}
           icon={<ServiceIcon service={service} />}
-          aria-label={service.settings.name}
+          aria-label={getServiceTitle(service, t)}
         />
       ))}
     </ServiceSwitcherRoot>