feat: add keyboard support to sidebar, fullscreen, and chat context controls

Signed-off-by: adarshh <adarsh347k@gmail.com>

Author: adarshh347

src/components/AIChatPanel.tsx

@@ -400,7 +400,17 @@ export const AIChatPanel = () => {
               <span className="text-xs text-gray-600 mr-1" style={{color: textColor}}>Context:</span>
               {/* TemplateMark Button */}
               <div
+                role="button"
+                tabIndex={0}
+                aria-label="Toggle TemplateMark context"
+                aria-pressed={includeTemplateMarkContent}
                 onClick={() => handleTemplateMarkToggle(!includeTemplateMarkContent)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleTemplateMarkToggle(!includeTemplateMarkContent);
+                  }
+                }}
                 className={
                   `px-1 py-0.5 text-xs rounded-full flex items-center cursor-pointer border transition-colors
                   ${includeTemplateMarkContent
@@ -435,7 +445,17 @@ export const AIChatPanel = () => {
               </div>
               {/* Concerto Button */}
               <div
+                role="button"
+                tabIndex={0}
+                aria-label="Toggle Concerto context"
+                aria-pressed={includeConcertoModelContent}
                 onClick={() => handleConcertoModelToggle(!includeConcertoModelContent)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleConcertoModelToggle(!includeConcertoModelContent);
+                  }
+                }}
                 className={
                   `px-1 py-0.5 text-xs rounded-full flex items-center cursor-pointer border transition-colors
                   ${includeConcertoModelContent
@@ -470,7 +490,17 @@ export const AIChatPanel = () => {
               </div>
               {/* Data Button */}
               <div
+                role="button"
+                tabIndex={0}
+                aria-label="Toggle Data context"
+                aria-pressed={includeDataContent}
                 onClick={() => handleDataToggle(!includeDataContent)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleDataToggle(!includeDataContent);
+                  }
+                }}
                 className={
                   `px-1 py-0.5 text-xs rounded-full flex items-center cursor-pointer border transition-colors
                   ${includeDataContent

src/components/FullScreenModal.tsx

@@ -38,8 +38,17 @@ const FullScreenModal: React.FC = () => {
     <>
       <MdFullscreen
         size={24}
+        role="button"
+        tabIndex={0}
+        aria-label="Open fullscreen preview"
         style={{ cursor: "pointer" }}
         onClick={() => setOpen(true)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
       />
       <Modal
         title="Output"

src/components/PlaygroundSidebar.tsx

@@ -163,6 +163,12 @@ const PlaygroundSidebar = () => {
             aria-label={title}
             tabIndex={0}
             onClick={onClick}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick?.();
+              }
+            }}
             className={`group playground-sidebar-nav-item ${
               active ? 'playground-sidebar-nav-item-active' : 'playground-sidebar-nav-item-inactive'
             } tour-${title.toLowerCase().replace(' ', '-')}`}
@@ -188,6 +194,12 @@ const PlaygroundSidebar = () => {
             aria-label={title}
             tabIndex={0}
             onClick={onClick}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+              }
+            }}
             className={`group playground-sidebar-nav-bottom-item tour-${title.toLowerCase().replace(' ', '-')}`}
           >
             <Icon size={18} />