chore: add aria-labels for toggle group

cryostatio · Aug 26, 2024 · 85f54fb · 85f54fb
1 parent 7f61972
commit 85f54fb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/locales/en/public.json b/locales/en/public.json
@@ -453,6 +453,12 @@
       "TITLE": "Target JVM"
     }
   },
+  "ThemeToggle": {
+    "ARIA_LABELS": {
+      "DARK_THEME": "dark-theme",
+      "LIGHT_THEME": "light-theme"
+    }
+  },
   "TimePicker": {
     "24HOUR": "24-hour",
     "USE_24HR_TIME": "Use 24-hour time"

diff --git a/src/app/AppLayout/ThemeToggle.tsx b/src/app/AppLayout/ThemeToggle.tsx
@@ -20,12 +20,14 @@ import { useTheme } from '@app/utils/hooks/useTheme';
 import { Icon, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import { SunIcon, MoonIcon } from '@patternfly/react-icons';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 export interface ThemeToggleProps {}
 
 export const ThemeToggle: React.FC<ThemeToggleProps> = () => {
   const context = React.useContext(ServiceContext);
   const [_theme] = useTheme();
+  const { t } = useTranslation();
 
   const handleThemeSelect = React.useCallback(
     (_, setting: ThemeSetting) => {
@@ -37,6 +39,7 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = () => {
   return (
     <ToggleGroup className="theme__toggle-group">
       <ToggleGroupItem
+        aria-label={t('ThemeToggle.ARIA_LABELS.LIGHT_THEME')}
         icon={
           <Icon>
             <SunIcon />
@@ -47,6 +50,7 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = () => {
         onClick={(e) => handleThemeSelect(e, ThemeSetting.LIGHT)}
       />
       <ToggleGroupItem
+        aria-label={t('ThemeToggle.ARIA_LABELS.DARK_THEME')}
         icon={
           <Icon>
             <MoonIcon />