fix: #3226 missing aria-label on IconButtons in downloads/settings views#3327
fix: #3226 missing aria-label on IconButtons in downloads/settings views#3327jeanfbrito wants to merge 2 commits into
Conversation
Adds aria-label to 3 IconButton components that were missing them: - DownloadsManagerView back button (arrow-back) - DownloadsManagerView clear filters button (trash) - SettingsView back button (arrow-back) Adds 'downloads.back' and 'settings.back' translation keys to en.i18n.json. Follows the pattern established in DocumentViewer.
|
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 (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughThis PR adds accessibility labels to previously unlabeled navigation and action buttons across the application. Translation keys are defined in the English locale, and aria-label attributes are applied to back buttons in the downloads and settings views, plus a clear button in the downloads manager. ChangesAccessibility Labels for Unlabeled Buttons
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/ui/components/DownloadsManagerView/index.tsx (1)
199-199: 💤 Low valueAccessibility improvement looks good; minor formatting adjustment needed.
The
aria-labeladdition correctly resolves the accessibility warning for the back button. The static analysis tool suggests reformatting the props across multiple lines for better readability.✨ Suggested formatting adjustment
- <IconButton icon='arrow-back' onClick={handleBackButton} aria-label={t('downloads.back')} /> + <IconButton + icon='arrow-back' + onClick={handleBackButton} + aria-label={t('downloads.back')} + />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/ui/components/DownloadsManagerView/index.tsx` at line 199, Reformat the IconButton JSX props onto multiple lines for readability: locate the IconButton usage in DownloadsManagerView (the element with IconButton, icon='arrow-back', onClick={handleBackButton}, aria-label={t('downloads.back')}) and break its props so each prop (icon, onClick, aria-label) is on its own line and properly indented.src/ui/components/SettingsView/SettingsView.tsx (1)
66-66: 💤 Low valueAccessibility improvement looks good; minor formatting adjustment needed.
The
aria-labeladdition correctly resolves the accessibility warning for the back button. The static analysis tool suggests reformatting the props across multiple lines for better readability.✨ Suggested formatting adjustment
- <IconButton icon='arrow-back' onClick={handleBackButton} aria-label={t('settings.back')} /> + <IconButton + icon='arrow-back' + onClick={handleBackButton} + aria-label={t('settings.back')} + />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/ui/components/SettingsView/SettingsView.tsx` at line 66, Reformat the IconButton props onto multiple lines for readability: locate the IconButton usage with icon='arrow-back', onClick={handleBackButton} and aria-label={t('settings.back')} in SettingsView.tsx and break each prop onto its own line (e.g., icon, onClick, aria-label) while preserving the same values and handlers so the functionality (IconButton and handleBackButton) and translation call t('settings.back') remain unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/ui/components/DownloadsManagerView/index.tsx`:
- Line 199: Reformat the IconButton JSX props onto multiple lines for
readability: locate the IconButton usage in DownloadsManagerView (the element
with IconButton, icon='arrow-back', onClick={handleBackButton},
aria-label={t('downloads.back')}) and break its props so each prop (icon,
onClick, aria-label) is on its own line and properly indented.
In `@src/ui/components/SettingsView/SettingsView.tsx`:
- Line 66: Reformat the IconButton props onto multiple lines for readability:
locate the IconButton usage with icon='arrow-back', onClick={handleBackButton}
and aria-label={t('settings.back')} in SettingsView.tsx and break each prop onto
its own line (e.g., icon, onClick, aria-label) while preserving the same values
and handlers so the functionality (IconButton and handleBackButton) and
translation call t('settings.back') remain unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c39b8812-ac92-44a0-a23b-afe7edce8192
📒 Files selected for processing (3)
src/i18n/en.i18n.jsonsrc/ui/components/DownloadsManagerView/index.tsxsrc/ui/components/SettingsView/SettingsView.tsx
📜 Review details
⏰ 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). (4)
- GitHub Check: check (ubuntu-latest)
- GitHub Check: check (macos-latest)
- GitHub Check: check (windows-latest)
- GitHub Check: Analyze (javascript)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use TypeScript for all new code in this codebase unless explicitly told otherwise
Use Fuselage components from@rocket.chat/fuselagefor all UI work — only create custom components when Fuselage doesn't provide the needed functionality
Check Theme.d.ts for valid color tokens when working with Fuselage components
Use optional chaining with fallbacks for platform-specific APIs instead of mocks (e.g., process.getuid?.() ?? 1000) to ensure code works across all platforms without requiring mocks
TypeScript code must use strict mode
Use React functional components with hooks instead of class components
Redux actions must follow the FSA (Flux Standard Action) pattern
Use camelCase for file naming
Use PascalCase for component file names (React components)
Write self-documenting code through clear naming — avoid unnecessary comments
Files:
src/ui/components/DownloadsManagerView/index.tsxsrc/ui/components/SettingsView/SettingsView.tsx
🪛 ESLint
src/ui/components/DownloadsManagerView/index.tsx
[error] 199-199: Replace ·icon='arrow-back'·onClick={handleBackButton}·aria-label={t('downloads.back')} with ⏎············icon='arrow-back'⏎············onClick={handleBackButton}⏎············aria-label={t('downloads.back')}⏎·········
(prettier/prettier)
src/ui/components/SettingsView/SettingsView.tsx
[error] 66-66: Replace ·icon='arrow-back'·onClick={handleBackButton}·aria-label={t('settings.back')} with ⏎············icon='arrow-back'⏎············onClick={handleBackButton}⏎············aria-label={t('settings.back')}⏎·········
(prettier/prettier)
🔇 Additional comments (2)
src/i18n/en.i18n.json (1)
224-224: LGTM! Translation keys properly added.The new
downloads.backandsettings.backi18n keys are correctly placed under their respective sections and provide appropriate accessible labels for the back navigation buttons.Also applies to: 341-341
src/ui/components/DownloadsManagerView/index.tsx (1)
257-262: LGTM! Excellent accessibility improvement.Adding
aria-labelto complement the existingtitleattribute is best practice—it ensures both mouse users (via tooltip) and screen reader users get proper button context.
1 participant
Description
Fixes #3226 — adds
aria-labelto 3<IconButton>components lacking them. Follows the pattern established inDocumentViewer.Changes (3 files, 3 buttons)
DownloadsManagerView/index.tsx:199— Back button (arrow-back): addedaria-label={t('downloads.back')}DownloadsManagerView/index.tsx:257— Clear filters (trash): was missingaria-labeldespite havingtitleSettingsView/SettingsView.tsx:66— Back button (arrow-back): addedaria-label={t('settings.back')}Also added
downloads.backandsettings.backtranslation keys toen.i18n.json.Testing
yarn start— console accessibility warnings gone for these componentsRisk
LOW — presentation only, no behavior changes.
Summary by CodeRabbit