From 262176fec4f74005f0f49446391d3dd3cdfdee16 Mon Sep 17 00:00:00 2001
From: J'aimemin <61978339+Kim-Jaemin420@users.noreply.github.com>
Date: Tue, 29 Oct 2024 00:03:38 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=BC=20a11y:=20Proper=20attributes=20fo?=
 =?UTF-8?q?r=20the=20side=20panel=20toggle=20button=20(#4559)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- added aria-expanded attribute to indicate the panel's expanded/collapsed state
- added aria-controls attribute to specify the element controlled by the button
- updated aria-label using the localize function for better description
---
 client/src/components/Nav/NavToggle.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Nav/NavToggle.tsx b/client/src/components/Nav/NavToggle.tsx
index 1c4333b090..23b4f0285c 100644
--- a/client/src/components/Nav/NavToggle.tsx
+++ b/client/src/components/Nav/NavToggle.tsx
@@ -34,7 +34,9 @@ export default function NavToggle({
     >
       <TooltipAnchor
         side={side === 'right' ? 'left' : 'right'}
-        aria-label={`toggle-${side === 'left' ? 'chat-history' : 'controls'}-nav`}
+        aria-label={side === 'left' ? localize('com_ui_chat_history') : localize('com_ui_controls')}
+        aria-expanded={navVisible}
+        aria-controls={side === 'left' ? 'chat-history-nav' : 'controls-nav'}
         id={`toggle-${side}-nav`}
         onClick={onToggle}
         role="button"