Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aryansinha1908 wants to merge 7 commits into
base: main
Choose a base branch
from
+10 −0
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0139d18
Added Aria Labels for buttons
aryansinha1908 Apr 2, 2026
617391b
Added Aria Labels for buttons
aryansinha1908 Apr 2, 2026
64721d2
Merge branch 'yash-pouranik:main' into main
aryansinha1908 Apr 4, 2026
9a542b8
Fix 1 for PR 76
aryansinha1908 Apr 4, 2026
c944f94
Merge branch 'main' of github.com:aryansinha1908/urBackend
aryansinha1908 Apr 4, 2026
1af988c
Merge branch 'yash-pouranik:main' into main
aryansinha1908 Apr 4, 2026
6acfc4a
Fix 2 for PR 76
aryansinha1908 Apr 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions apps/web-dashboard/src/components/CollectionTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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} />
Expand All @@ -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} />
Expand Down Expand Up @@ -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={showColumnMenu ? "Close column menu" : "Open column menu"}
onClick={() => setShowColumnMenu(!showColumnMenu)}
style={{
display: 'flex',
Expand Down Expand Up @@ -556,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"
/>
Expand Down
4 changes: 4 additions & 0 deletions apps/web-dashboard/src/components/DatabaseSidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="Create new database collection"
onClick={() => navigate(`/project/${projectId}/create-collection`)}
Comment on lines 31 to 41
Copy link

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The newly added aria-label lines in this file contain tab characters / inconsistent indentation (visible in the diff as \t sequences). Please reformat these lines to match the surrounding spacing to avoid noisy diffs and keep formatting consistent.

Copilot uses AI. Check for mistakes.
title="New Collection"
>
Expand All @@ -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`)
}
Expand All @@ -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);
Expand Down
1 change: 1 addition & 0 deletions apps/web-dashboard/src/components/RecordList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Comment on lines 23 to 27
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Clickable <div> lacks keyboard accessibility.

The div.record-card has onClick but no role, tabIndex, or keyboard event handler. Screen reader users and keyboard-only users cannot interact with it. Adding aria-label alone does not make the element focusable or operable via keyboard.

♿ Proposed fix to make the card keyboard-accessible 
                         <div
                             key={record._id}
                             className="record-card glass-panel"
                             aria-label={`View details for record ${record._id}`}
+                            role="button"
+                            tabIndex={0}
                             onClick={() => onView(record)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    onView(record);
+                                }
+                            }}
                         >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div
key={record._id}
className="record-card glass-panel"
aria-label={`View details for record ${record._id}`}
onClick={() => onView(record)}
<div
key={record._id}
className="record-card glass-panel"
aria-label={`View details for record ${record._id}`}
role="button"
tabIndex={0}
onClick={() => onView(record)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onView(record);
}
}}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/web-dashboard/src/components/RecordList.jsx` around lines 23 - 27, The
clickable div with class "record-card" using onClick={() => onView(record)} is
not keyboard-accessible; update the element (or replace with a semantic
<button>) to add role="button", tabIndex={0}, and an onKeyDown handler that
calls onView(record) when Enter or Space is pressed (handle Space with
preventDefault so the page doesn't scroll). Ensure the existing aria-label
remains, and keep the onClick behavior intact so both mouse and keyboard
activate the same onView(record) logic.

>
<div className="record-main-info">
Expand Down