Added Aria Labels for buttons in CollectionsTable.jsx and DatabaseSidebar.jsx#76
Added Aria Labels for buttons in CollectionsTable.jsx and DatabaseSidebar.jsx#76aryansinha1908 wants to merge 7 commits intoyash-pouranik:mainfrom
Conversation
Added aria-label for buttons in CollectionTable.jsx and DatabaseSidebar.jsx files
|
@aryansinha1908 is attempting to deploy a commit to the Yash Pouranik's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdded aria-label attributes to interactive controls in three web-dashboard components: Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces aria-label attributes to several buttons in the CollectionTable and DatabaseSidebar components to enhance accessibility. The review feedback highlights that some labels are misleading or confusing; specifically, labels for editing and deleting rows were incorrectly named as 'Column' actions, and a sidebar toggle was labeled based on its CSS class rather than its function.
| className="btn-icon" | ||
| onClick={() => onEdit(info.row.original)} | ||
| onPointerDown={e => e.stopPropagation()} | ||
| aria-label="Edit Column" |
There was a problem hiding this comment.
The aria-label "Edit Column" is misleading because this button performs an action on a row (record), not a column. It should be updated to "Edit" or "Edit Row" to match the title attribute and the actual functionality.
| aria-label="Edit Column" | |
| aria-label="Edit" |
| className="btn-icon danger-hover" | ||
| onClick={() => onDelete(info.row.original._id)} | ||
| onPointerDown={e => e.stopPropagation()} | ||
| aria-label="Delete Column" |
There was a problem hiding this comment.
The aria-label "Delete Column" is incorrect as this button deletes a row (record). Please update it to "Delete" or "Delete Row" to provide accurate information for accessibility.
| aria-label="Delete Column" | |
| aria-label="Delete" |
| <div className="sidebar-actions"> | ||
| <button | ||
| className="btn-icon hide-desktop" | ||
| aria-label="Hide Desktop" |
There was a problem hiding this comment.
The aria-label "Hide Desktop" is confusing. This button is used to close the sidebar in mobile view. A more descriptive label like "Close Sidebar" should be used instead of referencing the CSS class name.
| aria-label="Hide Desktop" | |
| aria-label="Close Sidebar" |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web-dashboard/src/components/CollectionTable.jsx (1)
193-203:⚠️ Potential issue | 🟡 MinorUse row-level aria labels for row actions.
On Line 193 and Line 202, the labels say “Column”, but these handlers act on row records. This gives screen-reader users the wrong action context.
Suggested fix
- aria-label="Edit Column" + aria-label="Edit Record" ... - aria-label="Delete Column" + aria-label="Delete Record"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web-dashboard/src/components/CollectionTable.jsx` around lines 193 - 203, The aria-labels on the row action buttons in CollectionTable.jsx are wrong (they say "Column") — update them to use row-level labels so screen readers get the correct context; change the aria-labels for the Edit and Delete buttons (where onClick uses onDelete(info.row.original._id) and the edit uses info.row) to something like "Edit row" and "Delete row" or include identifying row info (e.g., index or a row name from info.row.original) so the label refers to the specific row record rather than "Column".
🧹 Nitpick comments (1)
apps/web-dashboard/src/components/CollectionTable.jsx (1)
365-368: Add disclosure semantics to the column-menu toggle.Since this button opens/closes a menu, include
aria-expanded(and optionallyaria-haspopup) so assistive tech can announce state changes.Suggested improvement
<button className="btn btn-secondary btn-sm" aria-label="Show Column Menu" + aria-haspopup="menu" + aria-expanded={showColumnMenu} onClick={() => setShowColumnMenu(!showColumnMenu)}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web-dashboard/src/components/CollectionTable.jsx` around lines 365 - 368, The column-menu toggle button in CollectionTable.jsx currently toggles showColumnMenu via setShowColumnMenu but lacks disclosure semantics; update the button (the element using onClick={() => setShowColumnMenu(!showColumnMenu)}) to include aria-expanded={showColumnMenu} and aria-haspopup="menu" (and if a menu element has an id, add aria-controls="<menu-id>") so assistive tech can announce open/closed state and relation to the menu.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web-dashboard/src/components/DatabaseSidebar.jsx`:
- Around line 33-34: The aria-label on the sidebar toggle is ambiguous ("Hide
Desktop"); update the control to use a clear close action label such as "Close
sidebar" or "Collapse sidebar" instead. Locate the element that calls
onClick={() => setIsSidebarOpen(false)} (the sidebar close button) and replace
aria-label="Hide Desktop" with a more descriptive string like aria-label="Close
sidebar" so screen readers convey the correct action.
---
Outside diff comments:
In `@apps/web-dashboard/src/components/CollectionTable.jsx`:
- Around line 193-203: The aria-labels on the row action buttons in
CollectionTable.jsx are wrong (they say "Column") — update them to use row-level
labels so screen readers get the correct context; change the aria-labels for the
Edit and Delete buttons (where onClick uses onDelete(info.row.original._id) and
the edit uses info.row) to something like "Edit row" and "Delete row" or include
identifying row info (e.g., index or a row name from info.row.original) so the
label refers to the specific row record rather than "Column".
---
Nitpick comments:
In `@apps/web-dashboard/src/components/CollectionTable.jsx`:
- Around line 365-368: The column-menu toggle button in CollectionTable.jsx
currently toggles showColumnMenu via setShowColumnMenu but lacks disclosure
semantics; update the button (the element using onClick={() =>
setShowColumnMenu(!showColumnMenu)}) to include aria-expanded={showColumnMenu}
and aria-haspopup="menu" (and if a menu element has an id, add
aria-controls="<menu-id>") so assistive tech can announce open/closed state and
relation to the menu.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6e30dd16-5ef3-401c-b27c-97d5e8149df2
📒 Files selected for processing (2)
apps/web-dashboard/src/components/CollectionTable.jsxapps/web-dashboard/src/components/DatabaseSidebar.jsx
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility in the web dashboard by adding accessible names (aria-label) to several buttons, primarily targeting icon-only controls in the collections UI.
Changes:
- Added
aria-labelattributes to icon buttons inDatabaseSidebar.jsx(close sidebar, create collection, delete collection). - Added
aria-labelattributes to action buttons inCollectionTable.jsx(view/edit/delete row actions, columns menu button).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| apps/web-dashboard/src/components/DatabaseSidebar.jsx | Adds aria-labels to sidebar icon buttons and a “Create One” button. |
| apps/web-dashboard/src/components/CollectionTable.jsx | Adds aria-labels to row action buttons and the columns menu toggle. |
Comments suppressed due to low confidence (3)
apps/web-dashboard/src/components/DatabaseSidebar.jsx:61
- This button already has visible text (“Create One”), so adding
aria-label="Create New Collection"overrides the accessible name and can create a mismatch between what sighted users see and what assistive tech announces. Consider removing the aria-label here, or make it match the visible label.
<button
className="btn btn-secondary btn-sm"
aria-label="Create New Collection"
onClick={() =>
navigate(`/project/${projectId}/create-collection`)
}
>
Create One
</button>
apps/web-dashboard/src/components/CollectionTable.jsx:206
- The action buttons operate on a table row/record (see
onEdit(info.row.original)andonDelete(info.row.original._id)), but the aria-labels say “Edit Column” / “Delete Column”. These labels should describe the record/document action (e.g., edit/delete record) so screen readers get the correct meaning.
<button
className="btn-icon"
onClick={() => onEdit(info.row.original)}
onPointerDown={e => e.stopPropagation()}
aria-label="Edit Column"
title="Edit"
>
<Pencil size={15} />
</button>
<button
className="btn-icon danger-hover"
onClick={() => onDelete(info.row.original._id)}
onPointerDown={e => e.stopPropagation()}
aria-label="Delete Column"
title="Delete"
>
<Trash2 size={15} />
</button>
apps/web-dashboard/src/components/CollectionTable.jsx:380
- The “COLUMNS” button has visible text, so it already has an accessible name; the added
aria-label="Show Column Menu"is redundant and also misleading because the button toggles the menu (it should reflect show vs hide). Consider removing the aria-label, or making it stateful (and addingaria-expanded+aria-controlsfor the menu).
<button
className="btn btn-secondary btn-sm"
aria-label="Show Column Menu"
onClick={() => setShowColumnMenu(!showColumnMenu)}
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
fontSize: '0.8rem',
padding: '6px 12px',
background: showColumnMenu ? 'rgba(255,255,255,0.08)' : 'transparent'
}}
>
<Settings2 size={14} />
COLUMNS
</button>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="sidebar-actions"> | ||
| <button | ||
| className="btn-icon hide-desktop" | ||
| aria-label="Hide Desktop" |
There was a problem hiding this comment.
The close (X) icon button is labeled aria-label="Hide Desktop", but the click handler closes the sidebar (setIsSidebarOpen(false)). This label is confusing for screen reader users; rename it to describe the actual action (e.g., closing/hiding the collections sidebar), without referencing “desktop”.
| aria-label="Hide Desktop" | |
| aria-label="Close collections sidebar" |
| <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`)} |
There was a problem hiding this comment.
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.
| @@ -189,6 +190,7 @@ | |||
| className="btn-icon" | |||
| onClick={() => onEdit(info.row.original)} | |||
| onPointerDown={e => e.stopPropagation()} | |||
| aria-label="Edit Column" | |||
| title="Edit" | |||
There was a problem hiding this comment.
The newly added aria-label attributes in this section include tab characters / inconsistent indentation (shown in the diff as \t sequences). Please reformat to match the surrounding indentation for readability and to keep diffs clean.
| className="btn-icon" | ||
| onClick={() => onView(info.row.original)} | ||
| onPointerDown={e => e.stopPropagation()} | ||
| aria-label="View Details" | ||
| title="View Details" | ||
| > | ||
| <Eye size={15} /> |
There was a problem hiding this comment.
Issue #70’s acceptance criteria includes adding aria-labels to icon-only buttons in RecordList.jsx, but this PR only updates CollectionTable.jsx and DatabaseSidebar.jsx. RecordList.jsx still contains a btn-icon button without an aria-label. Either include that fix in this PR or update the issue/PR scope so expectations match.
There was a problem hiding this comment.
@aryansinha1908 this PR doesnt fully solves issue #70
you should complete that fully before then I cant merge this. And also check all he reviews added by coderabbitai, copilot and gemini and upadte accordingly.
| className="btn-icon" | ||
| onClick={() => onView(info.row.original)} | ||
| onPointerDown={e => e.stopPropagation()} | ||
| aria-label="View Details" | ||
| title="View Details" | ||
| > | ||
| <Eye size={15} /> |
There was a problem hiding this comment.
@aryansinha1908 this PR doesnt fully solves issue #70
you should complete that fully before then I cant merge this. And also check all he reviews added by coderabbitai, copilot and gemini and upadte accordingly.
|
@coderabbitai what to do? |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 44813
❌ Blocking Issues1.
|
| Current (wrong) | Should be |
|---|---|
aria-label="Edit Column" |
aria-label="Edit Record" |
aria-label="Delete Column" |
aria-label="Delete Record" |
3. Ambiguous aria-label in DatabaseSidebar.jsx
The sidebar close button currently says aria-label="Hide Desktop" — this references a CSS class name, not the action. It should be:
- aria-label="Hide Desktop"
+ aria-label="Close sidebar"4. Inconsistent indentation on new aria-label lines
The newly added aria-label attributes use tab characters while the surrounding code uses spaces. This should be reformatted to match the file's existing indentation style (applies to both CollectionTable.jsx and DatabaseSidebar.jsx).
⚠️ Minor / Nitpicks (good to fix)
5. Column menu toggle button missing disclosure semantics (CollectionTable.jsx)
The "COLUMNS" toggle button should also declare its open/closed state:
<button
aria-label="Show Column Menu"
+ aria-haspopup="menu"
+ aria-expanded={showColumnMenu}
onClick={() => setShowColumnMenu(!showColumnMenu)}
>6. aria-label on "Create One" button overrides visible text (DatabaseSidebar.jsx)
The "Create One" button has visible text, so the aria-label="Create New Collection" overrides what screen readers announce and creates a mismatch. Consider either removing the aria-label here or changing the button text to "Create New Collection" to make them consistent.
You can point @aryansinha1908 to this summary. Once all the above are addressed, the PR should be ready to merge. 🐰
|
@aryansinha1908 You are not following the review. |
|
Sorry for the late response. I am implementing the changes but I am currently traveling. I will push the changes when I get a stable internet connection. Again, sorry for the delay. |
- Editted aria labels according to codeRabbit's, copilot's and gemini's suggesstion. - Fixed the indentation - Added arai labels in RecordList.jsx file aswell
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web-dashboard/src/components/RecordList.jsx`:
- Around line 51-55: Remove aria-hidden from the record-actions container and
make the icon-only button accessible by adding an appropriate aria-label to the
button element (the element with className "btn-icon" inside the
div.record-actions); update the button to include a descriptive aria-label such
as "View record" or context-appropriate text so the ArrowRight icon remains
decorative while screen readers get a meaningful label.
- Around line 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.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b13f21ab-b05b-4a88-bafe-bab7e09b96cb
📒 Files selected for processing (3)
apps/web-dashboard/src/components/CollectionTable.jsxapps/web-dashboard/src/components/DatabaseSidebar.jsxapps/web-dashboard/src/components/RecordList.jsx
✅ Files skipped from review due to trivial changes (2)
- apps/web-dashboard/src/components/DatabaseSidebar.jsx
- apps/web-dashboard/src/components/CollectionTable.jsx
| <div | ||
| key={record._id} | ||
| className="record-card glass-panel" | ||
| aria-label={`View details for record ${record._id}`} | ||
| onClick={() => onView(record)} |
There was a problem hiding this comment.
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.
| <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-actions" aria-hidden="true"> | ||
| <button className="btn-icon"> | ||
| <ArrowRight size={18} /> | ||
| <ArrowRight size={18} aria-hidden="true" /> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
aria-hidden="true" on the actions container hides the button from screen readers.
Adding aria-hidden="true" to div.record-actions removes the entire button from the accessibility tree. This is the opposite of Issue #70's requirement—icon-only buttons should have meaningful aria-label attributes, not be hidden entirely.
Remove aria-hidden from the container and add an aria-label to the button instead.
🐛 Proposed fix
- <div className="record-actions" aria-hidden="true">
- <button className="btn-icon">
+ <div className="record-actions">
+ <button className="btn-icon" aria-label="View record details">
<ArrowRight size={18} aria-hidden="true" />
</button>
</div>📝 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.
| <div className="record-actions" aria-hidden="true"> | |
| <button className="btn-icon"> | |
| <ArrowRight size={18} /> | |
| <ArrowRight size={18} aria-hidden="true" /> | |
| </button> | |
| </div> | |
| <div className="record-actions"> | |
| <button className="btn-icon" aria-label="View record details"> | |
| <ArrowRight size={18} aria-hidden="true" /> | |
| </button> | |
| </div> |
🤖 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 51 - 55,
Remove aria-hidden from the record-actions container and make the icon-only
button accessible by adding an appropriate aria-label to the button element (the
element with className "btn-icon" inside the div.record-actions); update the
button to include a descriptive aria-label such as "View record" or
context-appropriate text so the ArrowRight icon remains decorative while screen
readers get a meaningful label.
|
I made the necessary changes please review them. Sorry for the late response (the internet connection is very weak from my side) |
- Removed aria-hidden="true"
🚀 Pull Request Description
Fixes #70
🛠️ Type of Change
🧪 Testing & Validation
Backend Verification:
npm testin thebackend/directory and all tests passed.Frontend Verification:
npm run lintin thefrontend/directory.📸 Screenshots / Recordings (Optional)
✅ Checklist
Built with ❤️ for urBackend.
Summary by CodeRabbit