Merge pull request #76 from aryansinha1908/main

Added Aria Labels for buttons in CollectionsTable.jsx and DatabaseSidebar.jsx

Author: yash-pouranik

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 Record"
                             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 Record"
                             title="Delete"
                         >
                             <Trash2 size={15} />
@@ -361,6 +364,9 @@ export default function CollectionTable({ data, activeCollection, onDelete, onVi
                 <div style={{ position: 'relative' }}>
                     <button
                         className="btn btn-secondary btn-sm"
+                        aria-label={showColumnMenu ? "Close column menu" : "Open column menu"}
+                        aria-hashpopup="menu"
+                        aria-expanded={showColumnMenu}
                         onClick={() => setShowColumnMenu(!showColumnMenu)}
                         style={{
                             display: 'flex',
@@ -556,6 +562,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"
                     />

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="Close sidebar"
                         onClick={() => setIsSidebarOpen(false)}
                     >
                         <X size={18} />
                     </button>
                     <button
                         className="btn-icon add-col-btn"
+                        aria-label="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 your first 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);

apps/web-dashboard/src/components/RecordList.jsx

@@ -23,6 +23,7 @@ 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">