From 465ac90e60b185cf1315a09a7495138af8f38a1a Mon Sep 17 00:00:00 2001
From: Sarthak-Bhagat2006 <sarthakbhagat2006@gmail.com>
Date: Thu, 18 Jun 2026 23:56:40 +0530
Subject: [PATCH] feat(Folder): add keyboard navigation and accessibility
 support

---
 src/content/Components/Folder/Folder.css     |  6 ++++++
 src/content/Components/Folder/Folder.jsx     | 17 ++++++++++++++++-
 src/tailwind/Components/Folder/Folder.jsx    | 13 ++++++++++++-
 src/ts-default/Components/Folder/Folder.css  |  6 ++++++
 src/ts-default/Components/Folder/Folder.tsx  | 16 +++++++++++++++-
 src/ts-tailwind/Components/Folder/Folder.tsx | 12 +++++++++++-
 6 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/content/Components/Folder/Folder.css b/src/content/Components/Folder/Folder.css
index 717e4f0d1..878e6de77 100644
--- a/src/content/Components/Folder/Folder.css
+++ b/src/content/Components/Folder/Folder.css
@@ -120,3 +120,9 @@
   transform-origin: bottom;
   transition: all 0.3s ease-in-out;
 }
+
+.folder:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: 4px;
+  border-radius: 10px;
+}
diff --git a/src/content/Components/Folder/Folder.jsx b/src/content/Components/Folder/Folder.jsx
index 121b394f7..1355e4286 100644
--- a/src/content/Components/Folder/Folder.jsx
+++ b/src/content/Components/Folder/Folder.jsx
@@ -76,7 +76,22 @@ const Folder = ({ color = '#5227FF', size = 1, items = [], className = '' }) =>
 
   return (
     <div style={scaleStyle} className={className}>
-      <div className={folderClassName} style={folderStyle} onClick={handleClick}>
+      <div
+        className={folderClassName}
+        style={folderStyle}
+        onClick={handleClick}
+        onKeyDown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+
+            handleClick();
+          }
+        }}
+        tabIndex={0}
+        role="button"
+        aria-expanded={open}
+        aria-label={open ? 'Close folder' : 'Open folder'}
+      >
         <div className="folder__back">
           {papers.map((item, i) => (
             <div
diff --git a/src/tailwind/Components/Folder/Folder.jsx b/src/tailwind/Components/Folder/Folder.jsx
index 4a0c67a9d..87568405c 100644
--- a/src/tailwind/Components/Folder/Folder.jsx
+++ b/src/tailwind/Components/Folder/Folder.jsx
@@ -82,7 +82,7 @@ const Folder = ({ color = '#5227FF', size = 1, items = [], className = '' }) =>
   return (
     <div style={scaleStyle} className={className}>
       <div
-        className={`group relative transition-all duration-200 ease-in cursor-pointer ${
+        className={`group relative transition-all duration-200 ease-in cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 ${
           !open ? 'hover:-translate-y-2' : ''
         }`}
         style={{
@@ -90,6 +90,17 @@ const Folder = ({ color = '#5227FF', size = 1, items = [], className = '' }) =>
           transform: open ? 'translateY(-8px)' : undefined
         }}
         onClick={handleClick}
+        onKeyDown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+
+            handleClick();
+          }
+        }}
+        tabIndex={0}
+        role="button"
+        aria-expanded={open}
+        aria-label={open ? 'Close folder' : 'Open folder'}
       >
         <div
           className="relative w-[100px] h-[80px] rounded-tl-0 rounded-tr-[10px] rounded-br-[10px] rounded-bl-[10px]"
diff --git a/src/ts-default/Components/Folder/Folder.css b/src/ts-default/Components/Folder/Folder.css
index 717e4f0d1..878e6de77 100644
--- a/src/ts-default/Components/Folder/Folder.css
+++ b/src/ts-default/Components/Folder/Folder.css
@@ -120,3 +120,9 @@
   transform-origin: bottom;
   transition: all 0.3s ease-in-out;
 }
+
+.folder:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: 4px;
+  border-radius: 10px;
+}
diff --git a/src/ts-default/Components/Folder/Folder.tsx b/src/ts-default/Components/Folder/Folder.tsx
index 16e67de44..3c53e279f 100644
--- a/src/ts-default/Components/Folder/Folder.tsx
+++ b/src/ts-default/Components/Folder/Folder.tsx
@@ -85,7 +85,21 @@ const Folder: React.FC<FolderProps> = ({ color = '#5227FF', size = 1, items = []
 
   return (
     <div style={scaleStyle} className={className}>
-      <div className={folderClassName} style={folderStyle} onClick={handleClick}>
+      <div
+        className={folderClassName}
+        style={folderStyle}
+        onClick={handleClick}
+        onKeyDown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleClick();
+          }
+        }}
+        tabIndex={0}
+        role="button"
+        aria-expanded={open}
+        aria-label={open ? 'Close folder' : 'Open folder'}
+      >
         <div className="folder__back">
           {papers.map((item, i) => (
             <div
diff --git a/src/ts-tailwind/Components/Folder/Folder.tsx b/src/ts-tailwind/Components/Folder/Folder.tsx
index e0eb6bf99..eac7c80f9 100644
--- a/src/ts-tailwind/Components/Folder/Folder.tsx
+++ b/src/ts-tailwind/Components/Folder/Folder.tsx
@@ -91,7 +91,7 @@ const Folder: React.FC<FolderProps> = ({ color = '#5227FF', size = 1, items = []
   return (
     <div style={scaleStyle} className={className}>
       <div
-        className={`group relative transition-all duration-200 ease-in cursor-pointer ${
+        className={`group relative transition-all duration-200 ease-in cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 ${
           !open ? 'hover:-translate-y-2' : ''
         }`}
         style={{
@@ -99,6 +99,16 @@ const Folder: React.FC<FolderProps> = ({ color = '#5227FF', size = 1, items = []
           transform: open ? 'translateY(-8px)' : undefined
         }}
         onClick={handleClick}
+        onKeyDown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleClick();
+          }
+        }}
+        tabIndex={0}
+        role="button"
+        aria-expanded={open}
+        aria-label={open ? 'Close folder' : 'Open folder'}
       >
         <div
           className="relative w-[100px] h-[80px] rounded-tl-0 rounded-tr-[10px] rounded-br-[10px] rounded-bl-[10px]"