From 0139d188725f5a3d504c638084bc83f0dc94e592 Mon Sep 17 00:00:00 2001
From: KabootarGod <aryansinha1908@gmail.com>
Date: Fri, 3 Apr 2026 02:57:03 +0530
Subject: [PATCH 1/4] Added Aria Labels for buttons

Added aria-label for buttons in CollectionTable.jsx and
DatabaseSidebar.jsx files
---
 apps/web-dashboard/src/components/CollectionTable.jsx | 4 ++++
 apps/web-dashboard/src/components/DatabaseSidebar.jsx | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/apps/web-dashboard/src/components/CollectionTable.jsx b/apps/web-dashboard/src/components/CollectionTable.jsx
index 03db79fd..cf06bb61 100644
--- a/apps/web-dashboard/src/components/CollectionTable.jsx
+++ b/apps/web-dashboard/src/components/CollectionTable.jsx
@@ -181,6 +181,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             className="btn-icon"
                             onClick={() => onView(info.row.original)}
                             onPointerDown={e => e.stopPropagation()}
+						   	 aria-label="View Details"
                             title="View Details"
                         >
                             <Eye size={15} />
@@ -189,6 +190,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             className="btn-icon"
                             onClick={() => onEdit(info.row.original)}
                             onPointerDown={e => e.stopPropagation()}
+		    				 aria-label="Edit Column"
                             title="Edit"
                         >
                             <Pencil size={15} />
@@ -197,6 +199,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             className="btn-icon danger-hover"
                             onClick={() => onDelete(info.row.original._id)}
                             onPointerDown={e => e.stopPropagation()}
+			    			 aria-label="Delete Column"
                             title="Delete"
                         >
                             <Trash2 size={15} />
@@ -361,6 +364,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                 <div style={{ position: 'relative' }}>
                     <button
                         className="btn btn-secondary btn-sm"
+						 aria-label="Show Column Menu"
                         onClick={() => setShowColumnMenu(!showColumnMenu)}
                         style={{
                             display: 'flex',
diff --git a/apps/web-dashboard/src/components/DatabaseSidebar.jsx b/apps/web-dashboard/src/components/DatabaseSidebar.jsx
index 4f2e23b5..932c6529 100644
--- a/apps/web-dashboard/src/components/DatabaseSidebar.jsx
+++ b/apps/web-dashboard/src/components/DatabaseSidebar.jsx
@@ -30,12 +30,14 @@ export default function DatabaseSidebar({
                 <div className="sidebar-actions">
                     <button
                         className="btn-icon hide-desktop"
+	    				 aria-label="Hide Desktop"
                         onClick={() => setIsSidebarOpen(false)}
                     >
                         <X size={18} />
                     </button>
                     <button
                         className="btn-icon add-col-btn"
+	    				 aria-label="Create New Collection"
                         onClick={() => navigate(`/project/${projectId}/create-collection`)}
                         title="New Collection"
                     >
@@ -50,6 +52,7 @@ export default function DatabaseSidebar({
                         <p>No collections yet.</p>
                         <button
                             className="btn btn-secondary btn-sm"
+							 aria-label="Create New Collection"
                             onClick={() =>
                                 navigate(`/project/${projectId}/create-collection`)
                             }
@@ -72,6 +75,7 @@ export default function DatabaseSidebar({
                             <div className="flex items-center gap-2 ml-auto" style={{ display: 'flex', alignItems: 'center', gap: '8px', marginLeft: 'auto' }}>
                                 <button
                                     className="btn-icon delete-btn"
+			    	    			 aria-label="Delete Collection"
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         if (onRequestDelete) onRequestDelete(c);

From 617391b67f4c3bae29214fc9f771bfe18854130a Mon Sep 17 00:00:00 2001
From: KabootarGod <aryansinha1908@gmail.com>
Date: Fri, 3 Apr 2026 03:00:38 +0530
Subject: [PATCH 2/4] Added Aria Labels for buttons

---
 apps/web-dashboard/src/components/CollectionTable.jsx | 8 ++++----
 apps/web-dashboard/src/components/DatabaseSidebar.jsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web-dashboard/src/components/CollectionTable.jsx b/apps/web-dashboard/src/components/CollectionTable.jsx
index cf06bb61..7b976515 100644
--- a/apps/web-dashboard/src/components/CollectionTable.jsx
+++ b/apps/web-dashboard/src/components/CollectionTable.jsx
@@ -181,7 +181,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             className="btn-icon"
                             onClick={() => onView(info.row.original)}
                             onPointerDown={e => e.stopPropagation()}
-						   	 aria-label="View Details"
+						   	aria-label="View Details"
                             title="View Details"
                         >
                             <Eye size={15} />
@@ -190,7 +190,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             className="btn-icon"
                             onClick={() => onEdit(info.row.original)}
                             onPointerDown={e => e.stopPropagation()}
-		    				 aria-label="Edit Column"
+		    				aria-label="Edit Column"
                             title="Edit"
                         >
                             <Pencil size={15} />
@@ -199,7 +199,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             className="btn-icon danger-hover"
                             onClick={() => onDelete(info.row.original._id)}
                             onPointerDown={e => e.stopPropagation()}
-			    			 aria-label="Delete Column"
+			    			aria-label="Delete Column"
                             title="Delete"
                         >
                             <Trash2 size={15} />
@@ -364,7 +364,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                 <div style={{ position: 'relative' }}>
                     <button
                         className="btn btn-secondary btn-sm"
-						 aria-label="Show Column Menu"
+						aria-label="Show Column Menu"
                         onClick={() => setShowColumnMenu(!showColumnMenu)}
                         style={{
                             display: 'flex',
diff --git a/apps/web-dashboard/src/components/DatabaseSidebar.jsx b/apps/web-dashboard/src/components/DatabaseSidebar.jsx
index 932c6529..2ca7ca95 100644
--- a/apps/web-dashboard/src/components/DatabaseSidebar.jsx
+++ b/apps/web-dashboard/src/components/DatabaseSidebar.jsx
@@ -30,14 +30,14 @@ export default function DatabaseSidebar({
                 <div className="sidebar-actions">
                     <button
                         className="btn-icon hide-desktop"
-	    				 aria-label="Hide Desktop"
+	    				aria-label="Hide Desktop"
                         onClick={() => setIsSidebarOpen(false)}
                     >
                         <X size={18} />
                     </button>
                     <button
                         className="btn-icon add-col-btn"
-	    				 aria-label="Create New Collection"
+	    				aria-label="Create New Collection"
                         onClick={() => navigate(`/project/${projectId}/create-collection`)}
                         title="New Collection"
                     >
@@ -52,7 +52,7 @@ export default function DatabaseSidebar({
                         <p>No collections yet.</p>
                         <button
                             className="btn btn-secondary btn-sm"
-							 aria-label="Create New Collection"
+							aria-label="Create New Collection"
                             onClick={() =>
                                 navigate(`/project/${projectId}/create-collection`)
                             }
@@ -75,7 +75,7 @@ export default function DatabaseSidebar({
                             <div className="flex items-center gap-2 ml-auto" style={{ display: 'flex', alignItems: 'center', gap: '8px', marginLeft: 'auto' }}>
                                 <button
                                     className="btn-icon delete-btn"
-			    	    			 aria-label="Delete Collection"
+			    	    			aria-label="Delete Collection"
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         if (onRequestDelete) onRequestDelete(c);

From 9a542b89ad37e91ec0be0dd88912b423441e2368 Mon Sep 17 00:00:00 2001
From: KabootarGod <aryansinha1908@gmail.com>
Date: Sat, 4 Apr 2026 18:43:53 +0530
Subject: [PATCH 3/4] Fix 1 for PR 76

- Editted aria labels according to codeRabbit's, copilot's  and gemini's
suggesstion.
- Fixed the indentation
- Added arai labels in RecordList.jsx file aswell
---
 .../src/components/CollectionTable.jsx          | 17 +++++++++--------
 .../src/components/DatabaseSidebar.jsx          | 12 ++++++------
 .../web-dashboard/src/components/RecordList.jsx |  7 ++++---
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/apps/web-dashboard/src/components/CollectionTable.jsx b/apps/web-dashboard/src/components/CollectionTable.jsx
index 7b976515..e25313f0 100644
--- a/apps/web-dashboard/src/components/CollectionTable.jsx
+++ b/apps/web-dashboard/src/components/CollectionTable.jsx
@@ -181,28 +181,28 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             className="btn-icon"
                             onClick={() => onView(info.row.original)}
                             onPointerDown={e => e.stopPropagation()}
-						   	aria-label="View Details"
+                            aria-label="View Details"
                             title="View Details"
                         >
-                            <Eye size={15} />
+                            <Eye size={15} aria-hidden="true" />
                         </button>
                         <button
                             className="btn-icon"
                             onClick={() => onEdit(info.row.original)}
                             onPointerDown={e => e.stopPropagation()}
-		    				aria-label="Edit Column"
+                            aria-label="Edit Record"
                             title="Edit"
                         >
-                            <Pencil size={15} />
+                            <Pencil size={15} aria-hidden="true" />
                         </button>
                         <button
                             className="btn-icon danger-hover"
                             onClick={() => onDelete(info.row.original._id)}
                             onPointerDown={e => e.stopPropagation()}
-			    			aria-label="Delete Column"
+                            aria-label="Delete Record"
                             title="Delete"
                         >
-                            <Trash2 size={15} />
+                            <Trash2 size={15} aria-hidden="true" />
                         </button>
                     </div>
                 ),
@@ -364,7 +364,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                 <div style={{ position: 'relative' }}>
                     <button
                         className="btn btn-secondary btn-sm"
-						aria-label="Show Column Menu"
+                        aria-label={showColumnMenu ? "Close column menu" : "Open column menu"}
                         onClick={() => setShowColumnMenu(!showColumnMenu)}
                         style={{
                             display: 'flex',
@@ -375,7 +375,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             background: showColumnMenu ? 'rgba(255,255,255,0.08)' : 'transparent'
                         }}
                     >
-                        <Settings2 size={14} />
+                        <Settings2 size={14} aria-hidden="true" />
                         COLUMNS
                     </button>
    {showColumnMenu && (
@@ -560,6 +560,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                         value={scrollState.scrollLeft}
                         onChange={handleSliderChange}
                         onInput={handleSliderChange}
+                        aria-label="Scroll table horizontally"
                         style={{ width: '100%', cursor: 'ew-resize' }}
                         className="column-slider"
                     />
diff --git a/apps/web-dashboard/src/components/DatabaseSidebar.jsx b/apps/web-dashboard/src/components/DatabaseSidebar.jsx
index 2ca7ca95..b3169510 100644
--- a/apps/web-dashboard/src/components/DatabaseSidebar.jsx
+++ b/apps/web-dashboard/src/components/DatabaseSidebar.jsx
@@ -30,18 +30,18 @@ export default function DatabaseSidebar({
                 <div className="sidebar-actions">
                     <button
                         className="btn-icon hide-desktop"
-	    				aria-label="Hide Desktop"
+                        aria-label="Close sidebar"
                         onClick={() => setIsSidebarOpen(false)}
                     >
-                        <X size={18} />
+                        <X size={18} aria-hidden="true" />
                     </button>
                     <button
                         className="btn-icon add-col-btn"
-	    				aria-label="Create New Collection"
+                        aria-label="Create new database collection"
                         onClick={() => navigate(`/project/${projectId}/create-collection`)}
                         title="New Collection"
                     >
-                        <Plus size={18} />
+                        <Plus size={18} aria-hidden="true" />
                     </button>
                 </div>
             </div>
@@ -52,7 +52,7 @@ export default function DatabaseSidebar({
                         <p>No collections yet.</p>
                         <button
                             className="btn btn-secondary btn-sm"
-							aria-label="Create New Collection"
+                            aria-label="Create your first collection"
                             onClick={() =>
                                 navigate(`/project/${projectId}/create-collection`)
                             }
@@ -75,7 +75,7 @@ export default function DatabaseSidebar({
                             <div className="flex items-center gap-2 ml-auto" style={{ display: 'flex', alignItems: 'center', gap: '8px', marginLeft: 'auto' }}>
                                 <button
                                     className="btn-icon delete-btn"
-			    	    			aria-label="Delete Collection"
+                                    aria-label="Delete Collection"
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         if (onRequestDelete) onRequestDelete(c);
diff --git a/apps/web-dashboard/src/components/RecordList.jsx b/apps/web-dashboard/src/components/RecordList.jsx
index bb8341ee..8f3c3d1f 100644
--- a/apps/web-dashboard/src/components/RecordList.jsx
+++ b/apps/web-dashboard/src/components/RecordList.jsx
@@ -23,11 +23,12 @@ export default function RecordList({ data, activeCollection, onView }) {
                         <div
                             key={record._id}
                             className="record-card glass-panel"
+                            aria-label={`View details for record ${record._id}`}
                             onClick={() => onView(record)}
                         >
                             <div className="record-main-info">
                                 <div className="record-header">
-                                    <span className="record-index">#{index + 1}</span>
+                                    <span className="record-index" aria-hidden="true">#{index + 1}</span>
                                     <span className="record-id font-mono">{record._id.substring(0, 8)}...</span>
                                 </div>
 
@@ -47,9 +48,9 @@ export default function RecordList({ data, activeCollection, onView }) {
                                 </div>
                             </div>
 
-                            <div className="record-actions">
+                            <div className="record-actions" aria-hidden="true">
                                 <button className="btn-icon">
-                                    <ArrowRight size={18} />
+                                    <ArrowRight size={18} aria-hidden="true" />
                                 </button>
                             </div>
                         </div>

From 6acfc4affb746e5584b833ca9caae3087f4138f5 Mon Sep 17 00:00:00 2001
From: KabootarGod <aryansinha1908@gmail.com>
Date: Sat, 4 Apr 2026 19:30:33 +0530
Subject: [PATCH 4/4] Fix 2 for PR 76

- Removed aria-hidden="true"
---
 apps/web-dashboard/src/components/CollectionTable.jsx | 8 ++++----
 apps/web-dashboard/src/components/DatabaseSidebar.jsx | 4 ++--
 apps/web-dashboard/src/components/RecordList.jsx      | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web-dashboard/src/components/CollectionTable.jsx b/apps/web-dashboard/src/components/CollectionTable.jsx
index e25313f0..dbee0cc8 100644
--- a/apps/web-dashboard/src/components/CollectionTable.jsx
+++ b/apps/web-dashboard/src/components/CollectionTable.jsx
@@ -184,7 +184,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             aria-label="View Details"
                             title="View Details"
                         >
-                            <Eye size={15} aria-hidden="true" />
+                            <Eye size={15} />
                         </button>
                         <button
                             className="btn-icon"
@@ -193,7 +193,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             aria-label="Edit Record"
                             title="Edit"
                         >
-                            <Pencil size={15} aria-hidden="true" />
+                            <Pencil size={15} />
                         </button>
                         <button
                             className="btn-icon danger-hover"
@@ -202,7 +202,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             aria-label="Delete Record"
                             title="Delete"
                         >
-                            <Trash2 size={15} aria-hidden="true" />
+                            <Trash2 size={15} />
                         </button>
                     </div>
                 ),
@@ -375,7 +375,7 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                             background: showColumnMenu ? 'rgba(255,255,255,0.08)' : 'transparent'
                         }}
                     >
-                        <Settings2 size={14} aria-hidden="true" />
+                        <Settings2 size={14} />
                         COLUMNS
                     </button>
    {showColumnMenu && (
diff --git a/apps/web-dashboard/src/components/DatabaseSidebar.jsx b/apps/web-dashboard/src/components/DatabaseSidebar.jsx
index b3169510..4e18a6b7 100644
--- a/apps/web-dashboard/src/components/DatabaseSidebar.jsx
+++ b/apps/web-dashboard/src/components/DatabaseSidebar.jsx
@@ -33,7 +33,7 @@ export default function DatabaseSidebar({
                         aria-label="Close sidebar"
                         onClick={() => setIsSidebarOpen(false)}
                     >
-                        <X size={18} aria-hidden="true" />
+                        <X size={18} />
                     </button>
                     <button
                         className="btn-icon add-col-btn"
@@ -41,7 +41,7 @@ export default function DatabaseSidebar({
                         onClick={() => navigate(`/project/${projectId}/create-collection`)}
                         title="New Collection"
                     >
-                        <Plus size={18} aria-hidden="true" />
+                        <Plus size={18} />
                     </button>
                 </div>
             </div>
diff --git a/apps/web-dashboard/src/components/RecordList.jsx b/apps/web-dashboard/src/components/RecordList.jsx
index 8f3c3d1f..5310de71 100644
--- a/apps/web-dashboard/src/components/RecordList.jsx
+++ b/apps/web-dashboard/src/components/RecordList.jsx
@@ -28,7 +28,7 @@ export default function RecordList({ data, activeCollection, onView }) {
                         >
                             <div className="record-main-info">
                                 <div className="record-header">
-                                    <span className="record-index" aria-hidden="true">#{index + 1}</span>
+                                    <span className="record-index">#{index + 1}</span>
                                     <span className="record-id font-mono">{record._id.substring(0, 8)}...</span>
                                 </div>
 
@@ -48,9 +48,9 @@ export default function RecordList({ data, activeCollection, onView }) {
                                 </div>
                             </div>
 
-                            <div className="record-actions" aria-hidden="true">
+                            <div className="record-actions">
                                 <button className="btn-icon">
-                                    <ArrowRight size={18} aria-hidden="true" />
+                                    <ArrowRight size={18} />
                                 </button>
                             </div>
                         </div>