diff options
Diffstat (limited to 'packages/renderer/src/components/sidebar')
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 { | |||
129 | }} | 129 | }} |
130 | > | 130 | > |
131 | <ServiceIconRoot hasError={hasError}> | 131 | <ServiceIconRoot hasError={hasError}> |
132 | <ServiceIconText>{name.length > 0 ? name[0] : '?'}</ServiceIconText> | 132 | <ServiceIconText aria-hidden="true"> |
133 | {name.length > 0 ? name[0] : '?'} | ||
134 | </ServiceIconText> | ||
133 | </ServiceIconRoot> | 135 | </ServiceIconRoot> |
134 | </ServiceIconBadge> | 136 | </ServiceIconBadge> |
135 | </ServiceIconErrorBadge> | 137 | </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 @@ | |||
21 | import Tab from '@mui/material/Tab'; | 21 | import Tab from '@mui/material/Tab'; |
22 | import Tabs from '@mui/material/Tabs'; | 22 | import Tabs from '@mui/material/Tabs'; |
23 | import { alpha, styled } from '@mui/material/styles'; | 23 | import { alpha, styled } from '@mui/material/styles'; |
24 | import type { TFunction } from 'i18next'; | ||
24 | import { observer } from 'mobx-react-lite'; | 25 | import { observer } from 'mobx-react-lite'; |
25 | import React from 'react'; | 26 | import React from 'react'; |
27 | import { useTranslation } from 'react-i18next'; | ||
26 | 28 | ||
29 | import type Service from '../../stores/Service'; | ||
27 | import { useStore } from '../StoreProvider'; | 30 | import { useStore } from '../StoreProvider'; |
28 | 31 | ||
29 | import ServiceIcon from './ServiceIcon'; | 32 | import ServiceIcon from './ServiceIcon'; |
@@ -63,7 +66,36 @@ const ServiceSwitcherTab = styled(Tab, { | |||
63 | }, | 66 | }, |
64 | })); | 67 | })); |
65 | 68 | ||
69 | function getServiceTitle(service: Service, t: TFunction) { | ||
70 | const { | ||
71 | settings: { name }, | ||
72 | directMessageCount, | ||
73 | indirectMessageCount, | ||
74 | } = service; | ||
75 | let messagesText: string | undefined; | ||
76 | if (indirectMessageCount > 0) { | ||
77 | messagesText = | ||
78 | directMessageCount > 0 | ||
79 | ? t('service.title.directAndIndirectMessageCount', { | ||
80 | directMessageCount, | ||
81 | indirectMessageCount, | ||
82 | }) | ||
83 | : t('service.title.indirectMessageCount', { | ||
84 | count: indirectMessageCount, | ||
85 | }); | ||
86 | } else if (directMessageCount > 0) { | ||
87 | messagesText = t('service.title.directMessageCount', { | ||
88 | count: directMessageCount, | ||
89 | }); | ||
90 | } | ||
91 | if (messagesText === undefined) { | ||
92 | return t('service.title.nameWithNoMessages', { name }); | ||
93 | } | ||
94 | return t('service.title.nameWithMessages', { name, messages: messagesText }); | ||
95 | } | ||
96 | |||
66 | function ServiceSwitcher(): JSX.Element { | 97 | function ServiceSwitcher(): JSX.Element { |
98 | const { t } = useTranslation(); | ||
67 | const { settings, services } = useStore(); | 99 | const { settings, services } = useStore(); |
68 | const { selectedService } = settings; | 100 | const { selectedService } = settings; |
69 | 101 | ||
@@ -81,7 +113,7 @@ function ServiceSwitcher(): JSX.Element { | |||
81 | key={service.id} | 113 | key={service.id} |
82 | value={service.id} | 114 | value={service.id} |
83 | icon={<ServiceIcon service={service} />} | 115 | icon={<ServiceIcon service={service} />} |
84 | aria-label={service.settings.name} | 116 | aria-label={getServiceTitle(service, t)} |
85 | /> | 117 | /> |
86 | ))} | 118 | ))} |
87 | </ServiceSwitcherRoot> | 119 | </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'; | |||
23 | import IconButton from '@mui/material/IconButton'; | 23 | import IconButton from '@mui/material/IconButton'; |
24 | import { observer } from 'mobx-react-lite'; | 24 | import { observer } from 'mobx-react-lite'; |
25 | import React from 'react'; | 25 | import React from 'react'; |
26 | import { useTranslation } from 'react-i18next'; | ||
26 | 27 | ||
27 | import { useStore } from '../StoreProvider'; | 28 | import { useStore } from '../StoreProvider'; |
28 | 29 | ||
29 | export default observer(() => { | 30 | export default observer(() => { |
31 | const { t } = useTranslation(); | ||
30 | const { shared } = useStore(); | 32 | const { shared } = useStore(); |
31 | const { shouldUseDarkColors } = shared; | 33 | const { shouldUseDarkColors } = shared; |
32 | 34 | ||
33 | return ( | 35 | return ( |
34 | <IconButton | 36 | <IconButton |
35 | aria-label="Toggle dark mode" | 37 | aria-label={t('toolbar.toggleDarkMode')} |
36 | onClick={() => shared.toggleDarkMode()} | 38 | onClick={() => shared.toggleDarkMode()} |
37 | > | 39 | > |
38 | {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />} | 40 | {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'; | |||
25 | import IconButton from '@mui/material/IconButton'; | 25 | import IconButton from '@mui/material/IconButton'; |
26 | import { observer } from 'mobx-react-lite'; | 26 | import { observer } from 'mobx-react-lite'; |
27 | import React from 'react'; | 27 | import React from 'react'; |
28 | import { useTranslation } from 'react-i18next'; | ||
28 | 29 | ||
29 | import { useStore } from '../StoreProvider'; | 30 | import { useStore } from '../StoreProvider'; |
30 | import { LOCATION_BAR_ID } from '../locationBar/LocationBar'; | 31 | import { LOCATION_BAR_ID } from '../locationBar/LocationBar'; |
@@ -45,6 +46,7 @@ function ToggleLocationBarIcon({ | |||
45 | } | 46 | } |
46 | 47 | ||
47 | function ToggleLocationBarButton(): JSX.Element { | 48 | function ToggleLocationBarButton(): JSX.Element { |
49 | const { t } = useTranslation(); | ||
48 | const { settings } = useStore(); | 50 | const { settings } = useStore(); |
49 | const { selectedService, showLocationBar } = settings; | 51 | const { selectedService, showLocationBar } = settings; |
50 | 52 | ||
@@ -52,7 +54,7 @@ function ToggleLocationBarButton(): JSX.Element { | |||
52 | <IconButton | 54 | <IconButton |
53 | aria-pressed={showLocationBar} | 55 | aria-pressed={showLocationBar} |
54 | aria-controls={LOCATION_BAR_ID} | 56 | aria-controls={LOCATION_BAR_ID} |
55 | aria-label="Show location bar" | 57 | aria-label={t('toolbar.toggleLocationBar')} |
56 | onClick={() => settings.toggleLocationBar()} | 58 | onClick={() => settings.toggleLocationBar()} |
57 | > | 59 | > |
58 | <ToggleLocationBarIcon | 60 | <ToggleLocationBarIcon |