fix: add cursor pointer to all button elements#2009
fix: add cursor pointer to all button elements#2009ahmetskilinc merged 2 commits intoMail-0:stagingfrom
Conversation
- Add cursor-pointer to compose button in app-sidebar - Add cursor-pointer to three dots menu button in thread-display - Add cursor-pointer to hidden labels button in render-labels - Add cursor-pointer to clear filters button in mail-list - Add cursor-pointer to close dialog button in create-email - Add cursor-pointer to voice control buttons - Add cursor-pointer to sidebar menu button variants - Reorganize cursor-pointer class in button component Fixes Mail-0#1992
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughAdds the Tailwind class cursor-pointer to multiple interactive UI elements across Mail app components and adjusts base button classes ordering. No logic, state, or API changes. Changes
Sequence Diagram(s)Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesPossibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
apps/mail/components/create/create-email.tsx (1)
212-218: Add button type on DialogClose triggerExplicit is better than implicit. Prevents unintended form submission and fixes the Biome finding.
Apply this diff:
- <button className="dark:bg-panelDark flex items-center gap-1 rounded-lg bg-[#F0F0F0] px-2 py-1.5 cursor-pointer"> + <button type="button" className="dark:bg-panelDark flex items-center gap-1 rounded-lg bg-[#F0F0F0] px-2 py-1.5 cursor-pointer">apps/mail/components/ui/app-sidebar.tsx (1)
202-215: Add type='button' + aria-label for the Compose trigger — prevents accidental form submits and improves SR UXLet’s make this bulletproof. Without an explicit type, a button defaults to submit inside forms. Also, when collapsed, the trigger is icon-only, so give it an accessible name.
Apply this diff:
<DialogTrigger asChild> - <button className="relative mb-1.5 inline-flex h-8 w-full items-center justify-center gap-1 self-stretch overflow-hidden rounded-lg border border-gray-200 bg-[#006FFE] text-black dark:border-none dark:text-white cursor-pointer"> + <button + type="button" + aria-label={state === 'collapsed' && !isMobile ? m['common.commandPalette.commands.newEmail']() : undefined} + className="relative mb-1.5 inline-flex h-8 w-full items-center justify-center gap-1 self-stretch overflow-hidden rounded-lg border border-gray-200 bg-[#006FFE] text-black dark:border-none dark:text-white cursor-pointer" + > {state === 'collapsed' && !isMobile ? ( <PencilCompose className="mt-0.5 fill-white text-black" /> ) : (apps/mail/components/voice-button.tsx (2)
32-37: Icon-only button needs an accessible name; also fix Tailwind arbitrary color typoRight now SRs will announce nothing useful here. Add an aria-label (and a title for hover) and fix
dark:bg[#141414]→dark:bg-[#141414].- <button type="button" onClick={handleStartConversation} className="cursor-pointer"> - <div className="dark:bg[#141414] flex h-7 items-center justify-center rounded-sm bg-[#262626] px-2"> + <button + type="button" + onClick={handleStartConversation} + aria-label="Start voice" + title="Start voice" + className="cursor-pointer" + > + <div className="dark:bg-[#141414] flex h-7 items-center justify-center rounded-sm bg-[#262626] px-2"> <Mic className="h-4 w-4 text-white dark:text-[#929292]" /> </div> </button>
43-58: Same story for the “connected” state: add aria-label and fix the dark bg classLet’s keep accessibility and styling consistent under all states.
- <button type="button" onClick={endConversation} className="cursor-pointer"> - <div className="dark:bg[#141414] flex h-7 items-center justify-center rounded-sm bg-[#262626] px-2"> + <button + type="button" + onClick={endConversation} + aria-label="End voice" + title="End voice" + className="cursor-pointer" + > + <div className="dark:bg-[#141414] flex h-7 items-center justify-center rounded-sm bg-[#262626] px-2"> {isInitializing && ( <div className="flex items-center justify-center gap-2"> <Loader2 className="h-4 w-4 animate-spin" /> </div> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (8)
apps/mail/components/create/create-email.tsx(1 hunks)apps/mail/components/mail/mail-list.tsx(1 hunks)apps/mail/components/mail/render-labels.tsx(1 hunks)apps/mail/components/mail/thread-display.tsx(1 hunks)apps/mail/components/ui/app-sidebar.tsx(1 hunks)apps/mail/components/ui/button.tsx(1 hunks)apps/mail/components/ui/sidebar.tsx(1 hunks)apps/mail/components/voice-button.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{css,js,ts,jsx,tsx,mdx}
📄 CodeRabbit inference engine (.cursor/rules/tailwind-css-v4.mdc)
**/*.{css,js,ts,jsx,tsx,mdx}: Chain variants together for composable variants (e.g.,group-has-data-potato:opacity-100).
Use new variants such asstarting,not-*,inert,nth-*,in-*,open(for:popover-open), and**for all descendants.
Do not use deprecated utilities likebg-opacity-*,text-opacity-*,border-opacity-*, anddivide-opacity-*; use the new syntax (e.g.,bg-black/50).
Use renamed utilities:shadow-smis nowshadow-xs,shadowis nowshadow-sm,drop-shadow-smis nowdrop-shadow-xs,drop-shadowis nowdrop-shadow-sm,blur-smis nowblur-xs,bluris nowblur-sm,rounded-smis nowrounded-xs,roundedis nowrounded-sm,outline-noneis nowoutline-hidden.
Usebg-(--brand-color)syntax for CSS variables in arbitrary values instead ofbg-[--brand-color].
Stacked variants now apply left-to-right instead of right-to-left.
Files:
apps/mail/components/mail/mail-list.tsxapps/mail/components/mail/render-labels.tsxapps/mail/components/voice-button.tsxapps/mail/components/create/create-email.tsxapps/mail/components/ui/app-sidebar.tsxapps/mail/components/mail/thread-display.tsxapps/mail/components/ui/sidebar.tsxapps/mail/components/ui/button.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENT.md)
**/*.{js,jsx,ts,tsx}: Use 2-space indentation
Use single quotes
Limit lines to 100 characters
Semicolons are required
Files:
apps/mail/components/mail/mail-list.tsxapps/mail/components/mail/render-labels.tsxapps/mail/components/voice-button.tsxapps/mail/components/create/create-email.tsxapps/mail/components/ui/app-sidebar.tsxapps/mail/components/mail/thread-display.tsxapps/mail/components/ui/sidebar.tsxapps/mail/components/ui/button.tsx
**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENT.md)
Use Prettier with sort-imports and Tailwind plugins
Files:
apps/mail/components/mail/mail-list.tsxapps/mail/components/mail/render-labels.tsxapps/mail/components/voice-button.tsxapps/mail/components/create/create-email.tsxapps/mail/components/ui/app-sidebar.tsxapps/mail/components/mail/thread-display.tsxapps/mail/components/ui/sidebar.tsxapps/mail/components/ui/button.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENT.md)
Enable TypeScript strict mode
Files:
apps/mail/components/mail/mail-list.tsxapps/mail/components/mail/render-labels.tsxapps/mail/components/voice-button.tsxapps/mail/components/create/create-email.tsxapps/mail/components/ui/app-sidebar.tsxapps/mail/components/mail/thread-display.tsxapps/mail/components/ui/sidebar.tsxapps/mail/components/ui/button.tsx
🧠 Learnings (1)
📚 Learning: 2025-05-07T16:55:46.513Z
Learnt from: danteissaias
PR: Mail-0/Zero#902
File: apps/mail/components/connection/add.tsx:77-77
Timestamp: 2025-05-07T16:55:46.513Z
Learning: For the "Upgrade" link in AddConnectionDialog, using a proper <button> element instead of a <span> with onClick is recognized as an accessibility improvement but was deferred as out of scope in PR #902 (CSS variables PR).
Applied to files:
apps/mail/components/voice-button.tsx
🪛 Biome (2.1.2)
apps/mail/components/mail/mail-list.tsx
[error] 971-971: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
apps/mail/components/mail/render-labels.tsx
[error] 54-54: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
apps/mail/components/create/create-email.tsx
[error] 212-212: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
apps/mail/components/ui/app-sidebar.tsx
[error] 203-203: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
apps/mail/components/mail/thread-display.tsx
[error] 876-876: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
2 participants
Description
Fixed cursor pointer behavior on buttons throughout the mail application. Added cursor-pointer class to button elements that were missing proper hover cursor indication, making it clear to users which elements are clickable.
Fixes #1992
Type of Change
Areas Affected
Testing Done
Describe the tests you've done:
Checklist
Screenshots/Recordings
Zero.mp4
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by cubic
Adds pointer cursor to all interactive buttons so click targets are clear across the Mail app. Fixes #1992 by updating missing spots and setting a default in shared components.
Summary by CodeRabbit