4 files changed, 42 insertions, 4 deletions

diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index b8f9b96..1017be9 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -129,7 +129,9 @@ function ServiceIcon({ service }: { service: Service }): JSX.Element {
         }}
       >
         <ServiceIconRoot hasError={hasError}>
-          <ServiceIconText>{name.length > 0 ? name[0] : '?'}</ServiceIconText>
+          <ServiceIconText aria-hidden="true">
+            {name.length > 0 ? name[0] : '?'}
+          </ServiceIconText>
         </ServiceIconRoot>
       </ServiceIconBadge>
     </ServiceIconErrorBadge>
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>
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
index bacbf07..51c3b18 100644
--- a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -23,16 +23,18 @@ import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useStore } from '../StoreProvider';
 
 export default observer(() => {
+  const { t } = useTranslation();
   const { shared } = useStore();
   const { shouldUseDarkColors } = shared;
 
   return (
     <IconButton
-      aria-label="Toggle dark mode"
+      aria-label={t('toolbar.toggleDarkMode')}
       onClick={() => shared.toggleDarkMode()}
     >
       {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 57b17e9..325160e 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -25,6 +25,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useStore } from '../StoreProvider';
 import { LOCATION_BAR_ID } from '../locationBar/LocationBar';
@@ -45,6 +46,7 @@ function ToggleLocationBarIcon({
 }
 
 function ToggleLocationBarButton(): JSX.Element {
+  const { t } = useTranslation();
   const { settings } = useStore();
   const { selectedService, showLocationBar } = settings;
 
@@ -52,7 +54,7 @@ function ToggleLocationBarButton(): JSX.Element {
     <IconButton
       aria-pressed={showLocationBar}
       aria-controls={LOCATION_BAR_ID}
-      aria-label="Show location bar"
+      aria-label={t('toolbar.toggleLocationBar')}
       onClick={() => settings.toggleLocationBar()}
     >
       <ToggleLocationBarIcon