From 85f54fbe4bfb439a76545c84f314200d0c47bb2c Mon Sep 17 00:00:00 2001
From: Thuan Vo <thuan.votann@gmail.com>
Date: Mon, 26 Aug 2024 15:09:59 -0700
Subject: [PATCH] chore: add aria-labels for toggle group

---
 locales/en/public.json            | 6 ++++++
 src/app/AppLayout/ThemeToggle.tsx | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/locales/en/public.json b/locales/en/public.json
index 78fb4fae9..e5c99256c 100644
--- 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
index f535e940d..3f8e65064 100644
--- 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 />