Feat: Enhance button accessibility#1480
Conversation
- Added ARIA attributes for better screen reader support - Implemented isLoading state with aria-busy attribute - Added loading indicator with accessible spinner - Added loadingText prop for better UX during loading states - Improved disabled state handling with aria-disabled 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
WalkthroughThe Button component in the mail application was enhanced to support a loading state. New props allow the button to display a spinner and loading text, set appropriate ARIA attributes, and show a progress cursor when busy. The ButtonProps interface was updated to reflect these changes. Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant Button
ParentComponent->>Button: Render with isLoading=false
Button-->>ParentComponent: Renders normal button
ParentComponent->>Button: Render with isLoading=true, loadingText
Button-->>ParentComponent: Renders disabled button with spinner and loadingText, sets aria-busy
Possibly related PRs
Poem
✨ Finishing Touches
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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
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: 0
🧹 Nitpick comments (1)
apps/mail/components/ui/button.tsx (1)
51-65: Excellent accessibility implementation with minor spinner consideration.The implementation excellently follows WCAG 2.1 guidelines:
✅ Accessibility strengths:
aria-busy={isLoading}properly communicates loading state to screen readersaria-disabled={props.disabled}correctly distinguishes permanent disability from loading statedisabled={isLoading || props.disabled}ensures functional disability in both states- Smart fallback logic:
loadingText || childrenmaintains contextMinor enhancement opportunity:
The Unicode spinner↻is functional but could be improved with a proper SVG icon or more accessible spinner component for better screen reader support.For future enhancement, consider replacing the Unicode spinner:
- <span className="inline-block animate-spin mr-2">↻</span> + <svg className="inline-block animate-spin mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24"> + <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> + <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> + </svg>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/mail/components/ui/button.tsx(2 hunks)
🔇 Additional comments (3)
apps/mail/components/ui/button.tsx (3)
8-8: LGTM! Excellent UX enhancement.The
aria-busy:cursor-progressclass provides great visual feedback by changing the cursor to indicate progress when the button is in a busy state. This improves user experience by providing clear visual cues.
43-44: Well-designed props for loading state management.The new optional props are well-structured:
isLoadingprovides clear state controlloadingTextoffers flexibility for custom loading messages- Both are optional, maintaining backward compatibility
48-48: Clean implementation of new props with proper defaults.The destructuring and default values are correctly implemented, ensuring the component remains robust when new props are not provided.
|
@harshith-eth please add a video/screenshot next time, thank you! |
|
Noted @MrgSub 🫡 |
2 participants
Summary
Accessibility Improvements
This PR enhances the Button component to be more accessible by:
These changes follow WCAG 2.1 guidelines for accessible interactive elements, focusing on:
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style