🎨 Palette: Add missing ARIA labels to copy buttons in admin dialog#244
🎨 Palette: Add missing ARIA labels to copy buttons in admin dialog#244ldsgroups225 wants to merge 1 commit intomasterfrom
Conversation
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📝 WalkthroughWalkthroughAdded accessibility attributes ( Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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/core/src/components/schools/create-admin-dialog.tsx`:
- Around line 270-271: The title and aria-label in the Copy Password button are
hardcoded French strings; replace them with the typesafe-i18n lookup (e.g.,
LL.schools.admin.copyPassword()) in the CreateAdminDialog component so both
attributes use i18n instead of literals, and add the corresponding key
("schools.admin.copyPassword") to your locale JSON files; locate the attributes
on the element in create-admin-dialog.tsx and swap the literal "Copier le mot de
passe" for the LL lookup.
- Around line 241-242: The title and aria-label for the email copy button are
hardcoded in the CreateAdminDialog JSX; replace both hardcoded French strings
with the typesafe-i18n lookup (e.g., call LL.schools.admin.copyEmail() or the
appropriate LL key used across the app) inside the element attributes so both
title and aria-label use the i18n function, and add the corresponding
"schools.admin.copyEmail" entry to your i18n JSON files (e.g., fr/index.json)
with the French translation.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: ee9dd87e-2a58-4acc-a61b-3796269fa00c
📒 Files selected for processing (2)
apps/core/src/components/schools/create-admin-dialog.tsxpr_body.txt
| title="Copier l'email" | ||
| aria-label="Copier l'email" |
There was a problem hiding this comment.
Replace hardcoded French string with i18n function.
The title and aria-label attributes contain hardcoded French text. As per coding guidelines, all UI text in JSX must use i18n functions via LL.key() instead of hardcoded strings.
🌐 Recommended pattern using typesafe-i18n
Assuming you add the appropriate key to your i18n translation files, the implementation should look like:
<Button
type="button"
variant="outline"
size="icon"
- title="Copier l'email"
- aria-label="Copier l'email"
+ title={LL.schools.admin.copyEmail()}
+ aria-label={LL.schools.admin.copyEmail()}
onClick={() =>
copyToClipboard(credentials.email, 'email')}
>You'll need to add the corresponding key to your i18n JSON files (e.g., fr/index.json):
{
"schools": {
"admin": {
"copyEmail": "Copier l'email"
}
}
}As per coding guidelines: "All UI text in JSX must use i18n functions — never hardcode French strings directly in components" and "Always use LL.key() for UI strings via typesafe-i18n instead of hardcoding strings".
📝 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.
| title="Copier l'email" | |
| aria-label="Copier l'email" | |
| title={LL.schools.admin.copyEmail()} | |
| aria-label={LL.schools.admin.copyEmail()} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/core/src/components/schools/create-admin-dialog.tsx` around lines 241 -
242, The title and aria-label for the email copy button are hardcoded in the
CreateAdminDialog JSX; replace both hardcoded French strings with the
typesafe-i18n lookup (e.g., call LL.schools.admin.copyEmail() or the appropriate
LL key used across the app) inside the element attributes so both title and
aria-label use the i18n function, and add the corresponding
"schools.admin.copyEmail" entry to your i18n JSON files (e.g., fr/index.json)
with the French translation.
| title="Copier le mot de passe" | ||
| aria-label="Copier le mot de passe" |
There was a problem hiding this comment.
Replace hardcoded French string with i18n function.
The title and aria-label attributes contain hardcoded French text. As per coding guidelines, all UI text in JSX must use i18n functions via LL.key() instead of hardcoded strings.
🌐 Recommended pattern using typesafe-i18n
Assuming you add the appropriate key to your i18n translation files, the implementation should look like:
<Button
type="button"
variant="outline"
size="icon"
- title="Copier le mot de passe"
- aria-label="Copier le mot de passe"
+ title={LL.schools.admin.copyPassword()}
+ aria-label={LL.schools.admin.copyPassword()}
onClick={() =>
copyToClipboard(credentials.password, 'password')}
>You'll need to add the corresponding key to your i18n JSON files (e.g., fr/index.json):
{
"schools": {
"admin": {
"copyPassword": "Copier le mot de passe"
}
}
}As per coding guidelines: "All UI text in JSX must use i18n functions — never hardcode French strings directly in components" and "Always use LL.key() for UI strings via typesafe-i18n instead of hardcoding strings".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/core/src/components/schools/create-admin-dialog.tsx` around lines 270 -
271, The title and aria-label in the Copy Password button are hardcoded French
strings; replace them with the typesafe-i18n lookup (e.g.,
LL.schools.admin.copyPassword()) in the CreateAdminDialog component so both
attributes use i18n instead of literals, and add the corresponding key
("schools.admin.copyPassword") to your locale JSON files; locate the attributes
on the element in create-admin-dialog.tsx and swap the literal "Copier le mot de
passe" for the LL lookup.
1 participant
💡 What: Added
titleandaria-labelattributes to the "copy to clipboard" icon-only buttons in the create admin dialog.🎯 Why: Without these attributes, screen readers only announce "button" with no context, and sighted users have no tooltip to explain the icon's purpose. This resolves a significant accessibility barrier and improves general usability.
📸 Before/After: Before:
<Button size="icon"><IconCopy /></Button>, After:<Button size="icon" title="Copier l'email" aria-label="Copier l'email"><IconCopy /></Button>♿ Accessibility: Ensures that screen readers can correctly announce the copy actions for both email and password fields.
PR created automatically by Jules for task 16038112012506419627 started by @ldsgroups225
Summary by CodeRabbit