[WEB-4166] chore: projects app sidebar accessibility#7115
[WEB-4166] chore: projects app sidebar accessibility#7115sriramveeraghanta merged 5 commits intopreviewfrom
Conversation
WalkthroughThis update introduces comprehensive accessibility improvements and internationalization support across the UI, particularly for the projects sidebar and related components. It adds ARIA labels in multiple languages, enhances accessibility for interactive elements, refactors sidebar state management and event handling logic, and improves translation file loading by merging multiple JSON files per language. Minor UI and import optimizations are also included. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Sidebar
participant i18nStore
participant CustomMenu
User->>Sidebar: Clicks toggle or menu button
Sidebar->>i18nStore: Fetches ARIA label (localized)
Sidebar->>CustomMenu: Renders with ariaLabel prop
CustomMenu-->>User: Renders accessible menu button
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ 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 (
|
aaryan610
changed the title
|
Pull Request Linked with Plane Work Items
Comment Automatically Generated by Plane |
|
@aaryan610 I was thinking we should create a separate translation file for this. |
aaryan610
changed the title
aaryan610
changed the title
![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 (10)
packages/i18n/src/locales/zh-TW/translations.json (1)
2466-2489: Review ARIA labels for completeness, consistency, and de-duplication
The newaria_labels.projects_sidebarblock correctly groups sidebar accessibility labels, but please verify:
- Terminology alignment: e.g.,
"workspace_logo": "工作空間標誌"should match other UI references.- Key naming consistency: maintain camelCase and avoid near-duplicate keys (e.g., both
open_projects_menuandopen_project_menuare defined with identical translations).- Coverage: ensure every toggle (open/close) has its counterpart and no actions are missing.
Consider merging duplicate entries:
- "open_projects_menu": "打開項目選單", - "open_project_menu": "打開項目選單", + "open_projects_menu": "打開項目選單",If they represent different elements, rename one to clarify its intent (e.g.,
open_project_actions_menu).
Also verify similar pairs likeopen_folder/close_folder, andopen_favorites_menu/close_favorites_menuare all present.packages/i18n/src/locales/es/translations.json (1)
2464-2491: Consider modularizing ARIA label translations
To improve maintainability and clarity, extract the entirearia_labels.projects_sidebarnamespace into its own translation file (e.g.,locales/es/aria_labels/projects_sidebar.json) or a dedicated namespace. This keeps the maintranslations.jsonlean and makes it easier to manage accessibility strings separately.packages/i18n/src/locales/ua/translations.json (3)
2473-2477: Ensure consistency in translation of "favorites".Current translations mix “улюблених” with the existing term “Вибране” used elsewhere. For clarity and consistency, replace with “вибраного”.
@@ 2473-2477 - "create_favorites_folder": "Створити папку улюблених", + "create_favorites_folder": "Створити папку вибраного", - "open_favorites_menu": "Відкрити меню улюблених", + "open_favorites_menu": "Відкрити меню вибраного", - "close_favorites_menu": "Закрити меню улюблених", + "close_favorites_menu": "Закрити меню вибраного",
2479-2484: Use consistent spelling for "проєкт".Most of the file uses “проєкт” (with ‘є’), but these entries use “проект”. For consistency, update them to “проєкт”:
@@ 2479-2484 - "create_new_project": "Створити новий проект", + "create_new_project": "Створити новий проєкт", - "open_projects_menu": "Відкрити меню проектів", + "open_projects_menu": "Відкрити меню проєктів", - "close_projects_menu": "Закрити меню проектів", + "close_projects_menu": "Закрити меню проєктів", - "open_project_menu": "Відкрити меню проекту", + "open_project_menu": "Відкрити меню проєкту", - "close_project_menu": "Закрити меню проекту", + "close_project_menu": "Закрити меню проєкту",
2487-2487: Refine "edition_badge" translation for clarity.The term “модал” is a transliteration of “modal”. It’s more natural to say “модальне вікно”:
- "edition_badge": "Відкрити модал платних планів" + "edition_badge": "Відкрити модальне вікно платних планів"packages/i18n/src/locales/en/translations.json (2)
2300-2324: Consider extracting ARIA labels to a dedicated translations file.To improve maintainability and separate concerns, you may move the entire
aria_labelsblock into its own JSON (e.g.aria_labels.json) and merge it at runtime.# In translations.json - "aria_labels": { ... } # New file: aria_labels.json { "projects_sidebar": { "workspace_logo": "Workspace logo", "open_workspace_switcher": "Open workspace switcher", …all other keys… } }
2322-2322: Align key naming with verb-first convention.The key
"edition_badge"breaks theopen_*/close_*pattern used elsewhere. Consider renaming for consistency:- "edition_badge": "Open paid plans' modal" + "open_paid_plans_modal": "Open paid plans modal"packages/i18n/src/locales/fr/translations.json (1)
2464-2489: Validate ARIA Label Keys & Modularize Translations
- Verify that each key under
aria_labels.projects_sidebar(e.g.,open_folder,toggle_quick_actions_menu,edition_badge) exactly matches the identifiers used in the React components and aligns with the same keys in other locale files to prevent missing lookup errors at runtime.- To improve maintainability, consider extracting the entire
aria_labelssection into a dedicated translations file (for example,locales/fr/aria_labels.json) and merging it in your build process, as suggested in the earlier review.packages/i18n/src/locales/zh-CN/translations.json (1)
2447-2447: Inconsistent terminology forworkspace_logo
The translation"工作空间徽标"diverges from earlier usage of"工作区标志"(see line 289). Please align this to the established term for a consistent user experience.Proposed adjustment:
- "workspace_logo": "工作空间徽标", + "workspace_logo": "工作区徽标",packages/i18n/src/locales/ru/translations.json (1)
2488-2489: Nitpick: Improve translation clarity.
The value foredition_badge("Открыть модал платных планов") can be rendered more naturally in Russian, for example:"edition_badge": "Открыть модальное окно платных планов"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (40)
packages/i18n/src/locales/cs/translations.json(1 hunks)packages/i18n/src/locales/de/translations.json(1 hunks)packages/i18n/src/locales/en/translations.json(1 hunks)packages/i18n/src/locales/es/translations.json(1 hunks)packages/i18n/src/locales/fr/translations.json(1 hunks)packages/i18n/src/locales/id/translations.json(1 hunks)packages/i18n/src/locales/it/translations.json(1 hunks)packages/i18n/src/locales/ja/translations.json(1 hunks)packages/i18n/src/locales/ko/translations.json(1 hunks)packages/i18n/src/locales/pl/translations.json(1 hunks)packages/i18n/src/locales/pt-BR/translations.json(1 hunks)packages/i18n/src/locales/ro/translations.json(1 hunks)packages/i18n/src/locales/ru/translations.json(1 hunks)packages/i18n/src/locales/sk/translations.json(1 hunks)packages/i18n/src/locales/tr-TR/translations.json(1 hunks)packages/i18n/src/locales/ua/translations.json(1 hunks)packages/i18n/src/locales/vi-VN/translations.json(1 hunks)packages/i18n/src/locales/zh-CN/translations.json(1 hunks)packages/i18n/src/locales/zh-TW/translations.json(1 hunks)packages/ui/src/avatar/avatar.tsx(1 hunks)packages/ui/src/dropdowns/custom-menu.tsx(5 hunks)packages/ui/src/dropdowns/helper.tsx(1 hunks)web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx(2 hunks)web/ce/components/workspace/edition-badge.tsx(2 hunks)web/ce/components/workspace/sidebar/app-search.tsx(2 hunks)web/ce/components/workspace/sidebar/extended-sidebar-item.tsx(1 hunks)web/ce/components/workspace/sidebar/sidebar-item.tsx(1 hunks)web/ce/constants/sidebar-favorites.ts(1 hunks)web/core/components/workspace/logo.tsx(2 hunks)web/core/components/workspace/sidebar/dropdown.tsx(3 hunks)web/core/components/workspace/sidebar/favorites/favorite-folder.tsx(6 hunks)web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx(3 hunks)web/core/components/workspace/sidebar/favorites/favorites-menu.tsx(5 hunks)web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx(1 hunks)web/core/components/workspace/sidebar/help-section.tsx(1 hunks)web/core/components/workspace/sidebar/projects-list-item.tsx(4 hunks)web/core/components/workspace/sidebar/projects-list.tsx(3 hunks)web/core/components/workspace/sidebar/quick-actions.tsx(1 hunks)web/core/components/workspace/sidebar/sidebar-menu-items.tsx(3 hunks)web/core/store/theme.store.ts(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (8)
web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx (1)
packages/i18n/src/store/index.ts (1)
t(233-254)
web/core/components/workspace/sidebar/help-section.tsx (1)
packages/i18n/src/store/index.ts (1)
t(233-254)
web/ce/components/workspace/edition-badge.tsx (3)
packages/i18n/src/hooks/use-translation.ts (1)
useTranslation(23-35)packages/hooks/src/use-platform-os.tsx (1)
usePlatformOS(3-34)packages/i18n/src/store/index.ts (1)
t(233-254)
web/core/components/workspace/sidebar/projects-list.tsx (1)
packages/i18n/src/store/index.ts (1)
t(233-254)
web/core/components/workspace/sidebar/dropdown.tsx (2)
packages/i18n/src/hooks/use-translation.ts (1)
useTranslation(23-35)packages/i18n/src/store/index.ts (1)
t(233-254)
web/core/components/workspace/sidebar/favorites/favorite-folder.tsx (2)
packages/i18n/src/hooks/use-translation.ts (1)
useTranslation(23-35)packages/i18n/src/store/index.ts (1)
t(233-254)
web/core/components/workspace/logo.tsx (3)
packages/i18n/src/hooks/use-translation.ts (1)
useTranslation(23-35)packages/utils/src/file.ts (1)
getFileURL(9-14)packages/i18n/src/store/index.ts (1)
t(233-254)
web/core/components/workspace/sidebar/favorites/favorites-menu.tsx (5)
packages/i18n/src/hooks/use-translation.ts (1)
useTranslation(23-35)packages/hooks/src/use-platform-os.tsx (1)
usePlatformOS(3-34)packages/constants/src/workspace.ts (1)
IS_FAVORITE_MENU_OPEN(332-332)web/core/store/router.store.ts (1)
workspaceSlug(69-71)packages/ui/src/tooltip/tooltip.tsx (1)
Tooltip(36-110)
🔇 Additional comments (75)
packages/ui/src/dropdowns/helper.tsx (1)
35-35: LGTM! Good accessibility improvement.The addition of the optional
ariaLabelproperty to the interface properly supports accessibility enhancements for dropdown menus. The optional nature ensures backward compatibility while enabling ARIA labeling.web/core/components/workspace/sidebar/help-section.tsx (2)
184-184: Good CSS class standardization.The change from
h-4 w-4tosize-4improves consistency and follows modern Tailwind CSS practices for setting both width and height with a single utility class.
178-182:Details
✅ Verification successful
Excellent accessibility improvement with dynamic ARIA labels.
The implementation correctly uses the translation function to provide context-aware ARIA labels based on the sidebar's collapsed state. This will significantly improve screen reader accessibility.
Let me verify that the translation keys exist in the localization files:
🏁 Script executed:
#!/bin/bash # Description: Verify that the ARIA label translation keys exist in the locale files # Expected: Find the keys "aria_labels.projects_sidebar.expand_sidebar" and "aria_labels.projects_sidebar.collapse_sidebar" echo "Searching for ARIA label translation keys..." rg -A 2 -B 2 "aria_labels\.projects_sidebar\.(expand_sidebar|collapse_sidebar)" packages/i18n/src/locales/Length of output: 207
🏁 Script executed:
#!/bin/bash # Search all locale files for the relevant translation keys echo "🔍 Checking for top-level aria_labels key..." rg -n '"aria_labels"' packages/i18n/src/locales echo "🔍 Checking for expand_sidebar key..." rg -n '"expand_sidebar"' packages/i18n/src/locales echo "🔍 Checking for collapse_sidebar key..." rg -n '"collapse_sidebar"' packages/i18n/src/localesLength of output: 5576
ARIA label translation keys verified across all locales
- Confirmed that
aria_labels.projects_sidebar.expand_sidebarandaria_labels.projects_sidebar.collapse_sidebarexist in everypackages/i18n/src/locales/*/translations.json.- The dynamic ARIA labels are correctly internationalized and context-aware.
✅ Approved.
web/ce/components/workspace/sidebar/extended-sidebar-item.tsx (1)
58-58:Details
✅ Verification successful
Good explicit state management.
The change from
toggleExtendedSidebar()totoggleExtendedSidebar(true)makes the intent clearer - when clicking a navigation link, the extended sidebar should be opened to provide visual feedback to the user.Let me verify the function signature and consistent usage across the codebase:
🏁 Script executed:
#!/bin/bash # Description: Verify toggleExtendedSidebar function signature and usage # Expected: Find the function definition and all its usages echo "Finding toggleExtendedSidebar function definition..." ast-grep --pattern 'toggleExtendedSidebar($_) { $$$ }' echo -e "\nFinding all usages of toggleExtendedSidebar..." rg -A 2 -B 2 "toggleExtendedSidebar"Length of output: 5319
Approved: Explicitly open extended sidebar on link click
Verified that
toggleExtendedSidebaris defined as(collapsed?: boolean) => voidintheme.store.tsand that passingtruematches its usage elsewhere (e.g., inextended-sidebar.tsx). No further changes needed.web/ce/constants/sidebar-favorites.ts (1)
1-1: Good icon import standardization.Moving
ContrastIconfromlucide-reactto@plane/uistandardizes icon usage within the project's UI system. This improves consistency and reduces reliance on external icon libraries while maintaining the same functionality.Also applies to: 4-4
web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx (1)
137-144: Excellent accessibility enhancement!The addition of the
aria-labelattribute significantly improves screen reader support for the folder name input field. The use of a localized translation key ensures the accessibility label is available across all supported languages.web/core/components/workspace/sidebar/quick-actions.tsx (1)
49-51: Clean refactoring for improved readability.Converting the short-circuit evaluation to an explicit
ifstatement makes the timeout clearing logic more readable while maintaining identical functionality. The optional chaining (?.) ensures safe access to the timeout reference.web/ce/components/workspace/sidebar/sidebar-item.tsx (1)
41-41:Details
✅ Verification successful
Verify the inverted sidebar toggle logic.
The condition has been inverted from
if (extendedSidebarCollapsed)toif (!extendedSidebarCollapsed). This changes the behavior significantly:
- Before: Toggle extended sidebar when it was collapsed
- After: Toggle extended sidebar only when it's currently expanded
This means clicking a sidebar link will now close the extended sidebar if it's open, but won't open it if it's closed. Please confirm this behavioral change aligns with the intended UX design.
🏁 Script executed:
#!/bin/bash # Verify the extended sidebar state management and usage echo "Searching for extendedSidebarCollapsed usage patterns:" rg -A 3 -B 3 "extendedSidebarCollapsed" --type tsx --type ts echo "Searching for toggleExtendedSidebar calls:" rg -A 2 -B 2 "toggleExtendedSidebar" --type tsx --type tsLength of output: 388
🏁 Script executed:
#!/bin/bash # Retry searching without relying on rg file-type detection echo "Searching for extendedSidebarCollapsed usage patterns:" rg -A3 -B3 "extendedSidebarCollapsed" -g "*.{ts,tsx}" echo "Searching for toggleExtendedSidebar calls:" rg -A2 -B2 "toggleExtendedSidebar" -g "*.{ts,tsx}"Length of output: 11810
Inverted sidebar toggle logic is intentional and correct.
The condition now only collapses the extended sidebar when it’s currently expanded—clicking a sidebar link will no longer open it when it’s closed. This matches the intended UX (extended sidebar opens via its own toggle, and link clicks simply close it if open). No changes required.
packages/i18n/src/locales/cs/translations.json (1)
2462-2488: Comprehensive ARIA label translations for accessibility.The addition of the
aria_labels.projects_sidebarsection provides excellent localization support for the accessibility improvements. The Czech translations are comprehensive, covering all the main UI elements in the projects sidebar including workspace controls, favorites management, and navigation actions.The translation structure is well-organized and the Czech text appears contextually appropriate for screen reader users.
packages/i18n/src/locales/tr-TR/translations.json (1)
2442-2468: LGTM! Comprehensive ARIA labels for accessibility enhancement.The addition of Turkish translations for projects sidebar ARIA labels is well-structured and comprehensive. These translations will enable proper screen reader support for Turkish users, covering all major sidebar interactions including menu toggles, project management, and navigation controls.
packages/ui/src/dropdowns/custom-menu.tsx (3)
17-17: Good addition of accessibility prop.Adding the
ariaLabelprop enables proper accessibility labeling for dropdown menu buttons throughout the application.
79-79: Cleaner callback invocation with optional chaining.The use of optional chaining (
?.()) simplifies the code and is more concise than the previous conditional check.
151-151: Excellent accessibility enhancement with ARIA labels.Adding
aria-label={ariaLabel}to all menu button variants ensures consistent screen reader support across different button types (custom, ellipsis, and default labeled buttons).Also applies to: 169-169, 189-189
packages/ui/src/avatar/avatar.tsx (1)
163-163: Excellent defensive programming improvement.Using optional chaining (
name?.[0]?.toUpperCase()) prevents potential runtime errors when thenameprop is undefined or null, making the avatar component more robust. The fallback chain tofallbackText ?? "?"ensures there's always a displayable character.web/core/components/workspace/sidebar/projects-list.tsx (4)
170-170: Minor cleanup removing redundant class.Removing the "group" class simplifies the className while maintaining functionality.
176-180: Excellent accessibility enhancement with dynamic ARIA labels.Adding conditional ARIA labels that change based on the menu state (
open_projects_menuvsclose_projects_menu) provides clear context for screen reader users about the current action available.Also applies to: 214-218
203-203: Good accessibility addition for project creation.Adding the
aria-labelfor the create project button improves screen reader accessibility with a descriptive label.
221-221: Consistent icon sizing adjustment.Changing from
size-4tosize-3maintains visual consistency with other icons in the sidebar.packages/i18n/src/locales/ko/translations.json (1)
2466-2490: LGTM! Excellent accessibility enhancement for Korean users.The Korean translations for ARIA labels are accurate and well-structured. The terminology is consistent and follows proper Korean language conventions:
- Proper use of technical terms like "워크스페이스" (workspace) and "사이드바" (sidebar)
- Consistent action verbs: "열기" (open), "닫기" (close), "축소" (collapse), "확장" (expand)
- Clear, descriptive labels that will be helpful for screen readers
This addition significantly improves accessibility for Korean-speaking users of the projects sidebar.
web/ce/components/workspace/edition-badge.tsx (1)
5-5: Excellent accessibility improvement with proper internationalization.The changes effectively enhance accessibility by:
- Translation Integration: Properly imports and uses the
useTranslationhook to provide localized ARIA labels- ARIA Attributes: Adds appropriate accessibility attributes:
aria-haspopup="dialog"correctly indicates the button opens a modalaria-labelprovides a descriptive, internationalized label for screen readers- Code Organization: Logical reordering of hooks improves readability
The implementation follows React and accessibility best practices while maintaining all existing functionality.
Also applies to: 15-18, 32-33
packages/i18n/src/locales/pl/translations.json (1)
2465-2489: Excellent accessibility enhancement with comprehensive Polish ARIA labels!The addition of localized ARIA labels for the projects sidebar is a great accessibility improvement. The translations cover all major interactive elements and follow proper i18n structure.
web/ce/components/workspace/sidebar/app-search.tsx (4)
4-4: Good addition of i18n support for accessibility.The import follows standard patterns and is necessary for the localized ARIA label implementation.
14-15: Proper translation hook integration.The translation hook usage follows established patterns and enables localized accessibility labels.
19-19: Good accessibility practice with explicit button type.Adding
type="button"explicitly clarifies the button's behavior and improves accessibility, especially when the button is inside forms.
27-27: Excellent accessibility improvement with localized ARIA label.The addition of a localized
aria-labelgreatly enhances screen reader support by providing clear, translated descriptions of the button's purpose. This directly addresses the accessibility objectives mentioned in the PR.packages/i18n/src/locales/id/translations.json (2)
2456-2457: Valid JSON boundary for description_versions
The closing},after"description_versions"correctly includes a comma to introduce the next top‐level key. The blank line is optional but doesn’t affect parsing.
2458-2482:Details
✅ Verification successful
New
aria_labels.projects_sidebarblock: verify consistency across locales
You’ve added a comprehensive set of ARIA labels under a newaria_labels.projects_sidebarsection. To ensure parity, please verify that all other locale files have been updated with the same keys and order.Run this script from the repo root to check every
translations.jsonfor the new block:This will flag any discrepancies in the ARIA labels across locales.
🏁 Script executed:
#!/bin/bash # Verify that all locale files define the same aria_labels.projects_sidebar keys set -e # Extract key list from the reference (English) file EN_KEYS=$(jq -r '.aria_labels.projects_sidebar | keys_unsorted[]' packages/i18n/src/locales/en/translations.json | sort) # Iterate through all locale folders for LOC_FILE in packages/i18n/src/locales/*/translations.json; do MISSING=$(jq -r --argjson ref_keys "$EN_KEYS" ' ($ref_keys) as $keys | ($keys | map(select(. as $k | . as $k | true))) | $keys - ( .aria_labels.projects_sidebar // {} | keys_unsorted ) ' "$LOC_FILE" | sort) if [[ -n "$MISSING" ]]; then echo "⚠️ Missing keys in $LOC_FILE:" echo "$MISSING" fi doneLength of output: 17378
🏁 Script executed:
#!/bin/bash set -e # Extract the reference keys as a proper JSON array EN_KEYS_JSON=$(jq -c '.aria_labels.projects_sidebar | keys_unsorted' packages/i18n/src/locales/en/translations.json) # Iterate through all locale files and report any missing keys for LOC_FILE in packages/i18n/src/locales/*/translations.json; do MISSING=$(jq -r --argjson ref "$EN_KEYS_JSON" ' # Compute ref keys minus the keys present in this locale ($ref - ( .aria_labels.projects_sidebar // {} | keys_unsorted )) | .[]?' "$LOC_FILE") if [[ -n "$MISSING" ]]; then echo "⚠️ Missing keys in $LOC_FILE:" echo "$MISSING" fi doneLength of output: 14643
ARIA labels parity confirmed across locales
Verified that allaria_labels.projects_sidebarkeys inpackages/i18n/src/locales/en/translations.jsonare present in every other locale file. No missing keys detected.packages/i18n/src/locales/vi-VN/translations.json (1)
2463-2487: Excellent accessibility improvement with well-organized translations!The addition of ARIA labels for the projects sidebar enhances screen reader support significantly. The Vietnamese translations are properly structured and appear accurate for the corresponding UI actions.
The hierarchical organization under
aria_labels.projects_sidebarmakes the translations easy to maintain and understand.web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx (4)
5-5: Good addition of internationalization support.The import of
useTranslationhook enables proper localization of ARIA labels for accessibility.
21-22: Proper implementation of translation hook.The translation hook is correctly initialized and ready for use with ARIA labels.
34-34: Good refactoring of event handling.Moving from an inline
onClickhandler to themenuButtonOnClickprop improves separation of concerns and aligns with theCustomMenucomponent's API design.
43-43: Excellent accessibility enhancement!Adding the localized
ariaLabelsignificantly improves screen reader support by providing meaningful context about the quick actions menu toggle functionality.packages/i18n/src/locales/pt-BR/translations.json (1)
2458-2485: Excellent accessibility improvement!Great addition of ARIA labels for the projects sidebar in Portuguese (Brazil). This enhances screen reader support and overall accessibility. The translations are well-structured and follow proper JSON formatting.
web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx (2)
99-99: Verify the outside click behavior change.The outside click now triggers
toggleExtendedSidebar(true)instead of closing the sidebar. This seems counterintuitive - typically clicking outside a sidebar should close it, not open it. Please confirm this is the intended behavior.
109-110:Details
✅ Verification successful
Confirm the inverted CSS class logic.
The CSS classes have been inverted to match the new collapse semantics. Now
extendedSidebarCollapsed: truehides the sidebar andfalseshows it. This appears to be consistent with the behavioral change mentioned in the PR summary, but please ensure this inversion is properly coordinated across all components that use theextendedSidebarCollapsedstate.
🏁 Script executed:
#!/bin/bash # Description: Verify that all components using extendedSidebarCollapsed have been updated to match the new semantics # Expected: All usages should reflect the new logic where true = collapsed/hidden # Search for all usages of extendedSidebarCollapsed rg -A 3 -B 3 "extendedSidebarCollapsed" # Search for toggleExtendedSidebar calls to ensure consistency rg -A 2 -B 2 "toggleExtendedSidebar"Length of output: 11568
ExtendedSidebarCollapsed logic consistency confirmed
All instances of
extendedSidebarCollapsednow uniformly usetrue= collapsed/hidden andfalse= expanded/visible:
Theme store (
web/core/store/theme.store.ts):
- Default
extendedSidebarCollapsed = truetoggleExtendedSidebarcorrectly inverts or sets the state and persists to localStorage.Extended sidebar component (
web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx):
- CSS classes map
extendedSidebarCollapsed→ hide/show via-translate-x-full/translate-x-0.- Outside-click detector calls
toggleExtendedSidebar(true)to collapse.Core sidebar menu items (
web/core/components/workspace/sidebar/sidebar-menu-items.tsx):
- Button aria-label switches between “open” when collapsed (
true) and “close” when expanded (false).onClick={() => toggleExtendedSidebar()}toggles accordingly.CE sidebar items (
web/ce/components/workspace/sidebar/sidebar-item.tsx&extended-sidebar-item.tsx):
if (!extendedSidebarCollapsed) toggleExtendedSidebar()collapses on item click when open.toggleExtendedSidebar(true)collapses after selecting an extended-sidebar item.No inconsistencies found—no further changes needed.
packages/i18n/src/locales/zh-TW/translations.json (1)
2464-2465:⚠️ Potential issueEnsure valid JSON with a separating comma
The closing brace of thedescription_versionsobject must be followed by a comma before introducing the newaria_labelssection. Otherwise, the JSON will be invalid and fail to parse.Apply this diff to correct the format:
"edited_by": "編輯者" - } + },Likely an incorrect or invalid review comment.
packages/i18n/src/locales/ro/translations.json (1)
2458-2483:Details
✅ Verification successful
ARIA labels for projects sidebar look correct and well-localized.
The new
aria_labels.projects_sidebarblock follows the structure introduced in other locale files and uses consistent indentation and translation style. Ensure the JSON remains syntactically valid (no trailing commas) and that this key set aligns exactly with the entries in other locales to prevent missing or extra labels.To verify consistency across all locale files, run:
🏁 Script executed:
#!/bin/bash # Compare aria_labels.projects_sidebar keys across all translations echo "Checking aria_labels.projects_sidebar keys consistency..." for file in packages/i18n/src/locales/*/translations.json; do echo "Locale: $(basename $(dirname $file))" jq -r '.aria_labels.projects_sidebar | keys | .[]' "$file" | sort echo doneLength of output: 13518
✅ ARIA labels for projects_sidebar are consistent across all locales
Verified that the
rotranslations.json has the exact samearia_labels.projects_sidebarkeys as every other locale and parses cleanly with jq—no missing or extra entries and no trailing commas. Ready to merge.packages/i18n/src/locales/es/translations.json (2)
2464-2491: ARIA labels translations added successfully
The newaria_labels.projects_sidebarblock is valid JSON and aligns with the UI components introduced in the PR.
2464-2491:Details
✅ Verification successful
Ensure consistent ARIA labels across all locales
Verify that every locale file defines the same set of keys underaria_labels.projects_sidebarto avoid runtime missing translations.
🏁 Script executed:
#!/usr/bin/env bash # Verify all locale translation files contain the same ARIA keys under projects_sidebar set -e # Extract expected keys from the Spanish file EXPECTED_KEYS=$(jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/es/translations.json) # Check each other locale for file in packages/i18n/src/locales/*/translations.json; do [[ "$file" == "packages/i18n/src/locales/es/translations.json" ]] && continue echo "Checking $file for missing ARIA keys..." for key in $EXPECTED_KEYS; do if ! jq -e --arg k "$key" '.aria_labels.projects_sidebar[$k]?' "$file" > /dev/null; then echo "❌ Missing aria_labels.projects_sidebar.$key in $file" exit 1 fi done done echo "✅ All locales include the complete set of ARIA keys."Length of output: 63585
ARIA labels are consistent across all locales
Allaria_labels.projects_sidebarkeys from the Spanish file have been verified in every other locale. No missing translations detected.packages/i18n/src/locales/ua/translations.json (1)
2464-2469: New ARIA labels block insertion is structured correctly.The
aria_labels.projects_sidebarblock is properly indented and inserted under the root object, preserving the trailing comma on the previous block. This aligns with similar additions in other locale files.packages/i18n/src/locales/en/translations.json (1)
2298-2302:Details
✅ Verification successful
Verify JSON syntax and localization consistency.
A comma was added after the
description_versionsblock and a newaria_labelssection was introduced. Please run a JSON linter and ensure that all locale files definearia_labels.projects_sidebarto keep translations in sync.
🏁 Script executed:
#!/bin/bash # Validate JSON jq empty packages/i18n/src/locales/en/translations.json # Check other locales for aria_labels rg -L '"aria_labels":' packages/i18n/src/localesLength of output: 1377
🏁 Script executed:
#!/bin/bash echo "Verifying aria_labels.projects_sidebar in all locale files..." errors=0 for file in packages/i18n/src/locales/*/translations.json; do if ! jq -e 'has("aria_labels") and (.aria_labels | has("projects_sidebar"))' "$file" >/dev/null; then echo "❌ Missing aria_labels.projects_sidebar in $file" errors=1 fi done if [ $errors -eq 1 ]; then exit 1 fi echo "✅ All locale files define aria_labels.projects_sidebar"Length of output: 3734
Localization Consistency Verified
✅
packages/i18n/src/locales/en/translations.jsonis valid JSON.
✅ All locale files definearia_labels.projects_sidebarand remain in sync.No further action required.
packages/i18n/src/locales/fr/translations.json (1)
2462-2462: Ensure JSON Validity with Trailing CommaAdding a comma after closing
description_versionsis necessary to introduce the newaria_labelsblock without breaking the JSON syntax.packages/i18n/src/locales/zh-CN/translations.json (2)
2445-2469:Details
✅ Verification successful
Verify consistency across locale files
Ensure that the newaria_labels.projects_sidebarkeys are added and correctly translated in all supported locales to avoid missing ARIA labels in other languages.
🏁 Script executed:
#!/bin/bash # Description: Check each locale file for the aria_labels.projects_sidebar block fd translations.json packages/i18n/src/locales -x grep -H '"aria_labels"' {} fd translations.json packages/i18n/src/locales -x grep -H '"projects_sidebar"' {}Length of output: 2837
Verified:
aria_labels.projects_sidebarpresent in all locale files
Confirmed that the newaria_labels.projects_sidebarblock exists across all supported translations. No further action required.
2442-2445: 🛠️ Refactor suggestionJSON syntax error: missing comma between properties
A comma is required after the previous property ("edited_by": "编辑者") to separate it from the newly added"aria_labels"section.Apply this diff to fix the JSON structure:
- "edited_by": "编辑者" + "edited_by": "编辑者",Likely an incorrect or invalid review comment.
packages/i18n/src/locales/ja/translations.json (1)
2462-2488: LGTM! Excellent addition of localized ARIA labels for accessibility.The new
aria_labels.projects_sidebarsection provides comprehensive Japanese translations for accessibility attributes throughout the sidebar UI. This follows proper i18n patterns and will significantly improve screen reader support for Japanese users.web/core/components/workspace/sidebar/dropdown.tsx (3)
31-38: Good reorganization of hooks and variables for better clarity.The consolidation of the
useWorkspacehook to extract bothcurrentWorkspaceandworkspacesin a single destructuring statement improves readability. Adding the translation hook here aligns with the accessibility improvements.Minor observation: The explicit setting of
isUserInstanceAdmin = falseat line 36 seems intentional, but please verify this reflects the correct business logic.
86-86: Excellent accessibility improvement with localized ARIA label.Adding the
aria-labelattribute with a localized string makes the workspace switcher button accessible to screen readers. The translation key follows the established pattern in the i18n files.
190-194: Great addition of accessibility support for the user menu.The user menu button now has a proper
aria-labelattribute with localized text, improving the experience for users with assistive technologies.web/core/components/workspace/sidebar/sidebar-menu-items.tsx (2)
11-11: Good addition of translation support for accessibility.Adding the
useTranslationhook and extractingextendedSidebarCollapsedfrom the theme store enables proper localized ARIA labels. This aligns with the broader accessibility improvements across the sidebar components.Also applies to: 24-27
44-74: Excellent JSX restructuring with improved accessibility.The changes provide several improvements:
- Removed unnecessary Fragment wrapper, simplifying the component structure
- Added proper
type="button"attribute to the toggle button- Implemented dynamic
aria-labelthat reflects the current sidebar state (collapsed/expanded)- Added
flex-shrink-0class to the icon for better layout consistencyThe dynamic ARIA label based on
extendedSidebarCollapsedstate is particularly well-implemented for accessibility.web/core/components/workspace/logo.tsx (4)
1-2: Good addition of translation support.Adding the
useTranslationimport enables localized accessibility attributes, which aligns with the broader i18n improvements across the sidebar components.
13-16: Necessary refactoring to support translation hook.Converting from an arrow function expression to a block-bodied function is required to use the
useTranslationhook. The structure remains clean and readable.
29-29: Excellent accessibility improvement with localized alt text.Replacing the hardcoded "Workspace Logo" string with a localized translation key (
aria_labels.projects_sidebar.workspace_logo) significantly improves accessibility for international users and screen readers.
32-32: Nice syntax improvement for safer string access.Using optional chaining bracket notation (
props.name?.[0]) instead ofcharAtprovides better null safety when accessing the first character of the workspace name.web/core/components/workspace/sidebar/projects-list-item.tsx (5)
187-187: LGTM! Modern optional chaining syntax.Good refactoring from logical AND check to optional chaining syntax. This is more concise and follows modern JavaScript best practices while maintaining the same functionality.
193-193: Good optimization of useEffect dependencies.Removing ref
.currentvalues from the dependency array is correct since they're not stable references and would cause unnecessary re-runs. The current dependencies properly capture when the drag-and-drop behavior needs to be re-established.
287-291: Excellent accessibility improvement!Adding dynamic ARIA labels to the project menu disclosure button greatly improves screen reader accessibility. The conditional labeling based on
isProjectListOpenstate provides clear context about the button's current function.
392-396: Consistent accessibility implementation.This ARIA label addition matches the pattern used for the earlier disclosure button, providing consistent accessibility experience. Using the same translation keys for both buttons that control the same project menu state is appropriate.
318-318:Details
✅ Verification successful
Good accessibility enhancement for CustomMenu.
Adding the
ariaLabelprop with proper translation improves accessibility for the quick actions menu toggle. Ensure theCustomMenucomponent properly implements this prop on the appropriate interactive element.
🏁 Script executed:
#!/bin/bash # Verify CustomMenu component implementation of ariaLabel prop ast-grep --pattern 'export $_ CustomMenu'Length of output: 43
🏁 Script executed:
#!/bin/bash # Locate CustomMenu definitions and usages in TSX files rg -n "CustomMenu" -t tsxLength of output: 53
🏁 Script executed:
#!/bin/bash # Locate CustomMenu definitions and usages across TS/TSX files rg -n "CustomMenu" --glob "*.[tj]sx"Length of output: 43511
🏁 Script executed:
#!/bin/bash # Extract CustomMenu props interfaces and check ariaLabel support rg -n "export interface ICustomMenuDropdownProps" -A 5 packages/ui/src/dropdowns/helper.tsx rg -n "export interface IDropdownProps" -A 5 packages/ui/src/dropdowns/helper.tsx rg -n "ariaLabel" packages/ui/src/dropdowns/custom-menu.tsx rg -n "aria-label" packages/ui/src/dropdowns/custom-menu.tsxLength of output: 1018
Accessibility: CustomMenu ariaLabel implemented
The
CustomMenucomponent now destructures theariaLabelprop and correctly applies it as thearia-labelattribute on the trigger element, satisfying the accessibility improvement. Approved.packages/i18n/src/locales/it/translations.json (1)
2463-2487: Comprehensive accessibility translation support.Excellent addition of Italian ARIA label translations for the projects sidebar. The translations are well-structured, contextually appropriate, and provide comprehensive coverage of UI elements. This properly supports the accessibility improvements being implemented across the application.
Key strengths:
- Proper namespacing under
aria_labels.projects_sidebar- Comprehensive coverage of interactive elements
- Contextually appropriate Italian translations
- Consistent naming conventions
packages/i18n/src/locales/ru/translations.json (3)
2464-2466: Ensure valid JSON structure by adding the comma and top-level key correctly.
The comma after the closing brace ofdescription_versionsand the insertion of the"aria_labels"key are necessary to maintain valid JSON. Please confirm that your CI linter/parser picks up no syntax errors.
2490-2491: Verify JSON closure ofaria_labelsblock.
The closing braces for thearia_labelsobject and the root object are correctly placed without a trailing comma, preserving valid JSON structure.
2467-2489:Details
✅ Verification successful
Validate translation keys against code usage and other locales.
Please verify that each key underaria_labels.projects_sidebarexactly matches the ARIA attribute names referenced in your React components and is in sync across all locale files.
🏁 Script executed:
#!/bin/bash # Compare the projects_sidebar translation keys between English and Russian locales rg -oP '"projects_sidebar":\s*{\K[^}]*' packages/i18n/src/locales/en/translations.json > /tmp/en_keys.txt rg -oP '"projects_sidebar":\s*{\K[^}]*' packages/i18n/src/locales/ru/translations.json > /tmp/ru_keys.txt diff -u /tmp/en_keys.txt /tmp/ru_keys.txtLength of output: 221
🏁 Script executed:
#!/bin/bash # Extract and compare sorted translation keys for projects_sidebar in English and Russian jq -r '.projects_sidebar | keys[]' packages/i18n/src/locales/en/translations.json | sort > /tmp/en_keys.txt jq -r '.projects_sidebar | keys[]' packages/i18n/src/locales/ru/translations.json | sort > /tmp/ru_keys.txt echo "Comparing English vs Russian projects_sidebar keys:" diff -u /tmp/en_keys.txt /tmp/ru_keys.txt # Verify code references for projects_sidebar translations echo -e "\nChecking code usage of projects_sidebar keys:" rg "projects_sidebar\.[a-zA-Z0-9_]+" -n .Length of output: 4700
#!/bin/bash # Extract and compare sorted translation keys for aria_labels.projects_sidebar in English and Russian jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/en/translations.json | sort > /tmp/en_keys.txt jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/ru/translations.json | sort > /tmp/ru_keys.txt echo "Comparing English vs Russian projects_sidebar keys:" diff -u /tmp/en_keys.txt /tmp/ru_keys.txt # Show context around the definition in both files for manual spot-check echo -e "\nEnglish projects_sidebar snippet:" jq '.aria_labels.projects_sidebar' packages/i18n/src/locales/en/translations.json | sed -n '1,30p' echo -e "\nRussian projects_sidebar snippet:" jq '.aria_labels.projects_sidebar' packages/i18n/src/locales/ru/translations.json | sed -n '1,30p'
#!/bin/bash # Compare translation keys under aria_labels.projects_sidebar between English and Russian jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/en/translations.json | sort > /tmp/en_keys.txt jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/ru/translations.json | sort > /tmp/ru_keys.txt echo "=== Key differences (English vs Russian) ===" diff -u /tmp/en_keys.txt /tmp/ru_keys.txt || true echo -e "\n=== Code references for aria_labels.projects_sidebar ===" rg 'aria_labels\.projects_sidebar\.[a-zA-Z0-9_]+' -n .
🏁 Script executed:
#!/bin/bash set -e # Extract and compare sorted translation keys for aria_labels.projects_sidebar in English and Russian jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/en/translations.json | sort > /tmp/en_keys.txt jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/ru/translations.json | sort > /tmp/ru_keys.txt echo "=== Key differences (English vs Russian) ===" diff -u /tmp/en_keys.txt /tmp/ru_keys.txt || true echo -e "\n=== Code references for aria_labels.projects_sidebar keys ===" rg 'aria_labels\.projects_sidebar\.[A-Za-z0-9_]+' -n .Length of output: 4580
Translation keys for
aria_labels.projects_sidebarare consistent and correctly referenced
- No differences were found between English and Russian keys under
aria_labels.projects_sidebar.- All keys are used exactly as defined in the React components’
aria-labelandaltattributes.No action required—translations and code usage are in sync.
packages/i18n/src/locales/sk/translations.json (1)
2465-2489: Excellent accessibility enhancement!The addition of comprehensive ARIA labels for the projects sidebar is a great improvement for accessibility. The Slovak translations are well-structured and cover all the essential interactive elements including workspace switcher, user menu, command palette, sidebar toggles, favorites management, and project navigation.
web/core/components/workspace/sidebar/favorites/favorite-folder.tsx (3)
22-22: Good accessibility setup!Properly importing and initializing the translation hook to support internationalized ARIA labels.
Also applies to: 59-60
235-235: Excellent refactoring and accessibility enhancement!The changes improve both code organization and accessibility:
- Icon size reduction provides better visual consistency
- Moving the onClick handler to
menuButtonOnClickprop separates concerns properly- Adding the translated
ariaLabelmakes the menu accessible to screen readersAlso applies to: 238-238, 247-247
271-273: Great dynamic accessibility implementation!The conditional ARIA labels provide contextual information about the folder state, making the interface much more accessible. The icon size reduction maintains visual consistency with other changes.
Also applies to: 276-276
web/core/store/theme.store.ts (3)
1-1: Good import addition for proper MobX patterns!Adding
runInActionimport supports the improved state management implementation in the store methods.
29-29: Better default state initialization!Setting the initial value to
trueprovides a more predictable default behavior for the extended sidebar collapsed state instead ofundefined.
81-85: Excellent MobX best practices implementation!The refactored method demonstrates proper MobX patterns:
- Using nullish coalescing (
??) for cleaner conditional logic- Computing the state outside the action to prevent reactivity issues
- Wrapping state updates in
runInActionfor proper MobX reactivity- Using the computed value for localStorage to ensure consistency
web/core/components/workspace/sidebar/favorites/favorites-menu.tsx (4)
37-55: LGTM: Good code organization improvements.The reorganization of state variables, navigation, store hooks, translation, and platform hooks with clear comments improves readability and maintainability. Moving
workspaceSlugextraction earlier is logical since it's used throughout the component.
61-62: LGTM: Explicit typing for refs.Using explicit non-nullable types
HTMLDivElementfor the refs is a good practice that improves type safety and makes the component's DOM interaction more predictable.
154-154: LGTM: Correct dependency array update.Adding
tto the dependency array is necessary since the translation function is used within thehandleReordercallback for error messages. This prevents stale closure issues.
193-254: Excellent accessibility improvements with proper semantic structure.The JSX restructuring significantly enhances accessibility:
- Proper button semantics: The "create folder" action is now wrapped in a proper
buttonelement withtype="button"- Dynamic ARIA labels: Both the main toggle and chevron button use conditional ARIA labels that reflect the current state
- Consistent labeling: All interactive elements have appropriate
aria-labelattributes using localized strings- Improved DOM structure: The outer
divwith ref allows for better event handling while maintaining proper button semantics insideThe translation keys used (
aria_labels.projects_sidebar.*) are consistent with the new translation structure being added in the German locale file.packages/i18n/src/locales/de/translations.json (1)
2463-2487: LGTM: Comprehensive German ARIA label translations.The new
aria_labels.projects_sidebarsection provides excellent German translations for all sidebar accessibility labels. Key strengths:
- Complete coverage: All necessary ARIA labels for sidebar elements are included
- Accurate translations: German translations are contextually appropriate (e.g., "öffnen/schließen" for open/close actions)
- Consistent structure: Follows the established translation file format
- Matches component usage: Translation keys align perfectly with those used in the favorites-menu.tsx component
The translations enhance accessibility for German-speaking users by providing clear, descriptive labels for screen readers and assistive technologies.
…igured store according to it
@prateekshourya29 added accessibility files |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
packages/i18n/src/locales/it/accessibility.json (1)
4-24: Suggest refining Italian translations for clarity
Some labels could benefit from more natural phrasing, for example:
- Change
"toggle_quick_actions_menu": "Attiva/disattiva menu azioni rapide"
to"toggle_quick_actions_menu": "Attiva o disattiva il menu delle azioni rapide"- Change
"edition_badge": "Apri modal piani a pagamento"
to"edition_badge": "Apri la finestra modale dei piani a pagamento"These tweaks improve readability and consistency in Italian.
packages/i18n/src/store/index.ts (1)
160-161: Consider making the files list configurable for future flexibility.Currently, the files are hardcoded. For better extensibility, consider making this configurable per language if different languages need different file sets in the future.
packages/i18n/src/locales/cs/accessibility.json (1)
24-24: Refine localization term
The value uses the English word "modal". Consider replacing it with the Czech equivalent "modální okno" for a fully localized experience.packages/i18n/src/locales/ko/accessibility.json (1)
17-20: Differentiate similar translation strings
The keysopen_projects_menu(line 17) andopen_project_menu(line 20) both map to"프로젝트 메뉴 열기". These represent distinct UI elements (all projects menu vs. an individual project menu) and may be confusing for assistive readers. Consider making them more descriptive, for example:- "open_projects_menu": "프로젝트 메뉴 열기", + "open_projects_menu": "모든 프로젝트 메뉴 열기", - "open_project_menu": "프로젝트 메뉴 열기", + "open_project_menu": "개별 프로젝트 메뉴 열기",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
packages/i18n/src/locales/cs/accessibility.json(1 hunks)packages/i18n/src/locales/de/accessibility.json(1 hunks)packages/i18n/src/locales/en/accessibility.json(1 hunks)packages/i18n/src/locales/en/translations.json(1 hunks)packages/i18n/src/locales/es/accessibility.json(1 hunks)packages/i18n/src/locales/fr/accessibility.json(1 hunks)packages/i18n/src/locales/id/accessibility.json(1 hunks)packages/i18n/src/locales/it/accessibility.json(1 hunks)packages/i18n/src/locales/ja/accessibility.json(1 hunks)packages/i18n/src/locales/ko/accessibility.json(1 hunks)packages/i18n/src/locales/pl/accessibility.json(1 hunks)packages/i18n/src/locales/pt-BR/accessibility.json(1 hunks)packages/i18n/src/locales/ro/accessibility.json(1 hunks)packages/i18n/src/locales/ru/accessibility.json(1 hunks)packages/i18n/src/locales/sk/accessibility.json(1 hunks)packages/i18n/src/locales/tr-TR/accessibility.json(1 hunks)packages/i18n/src/locales/ua/accessibility.json(1 hunks)packages/i18n/src/locales/vi-VN/accessibility.json(1 hunks)packages/i18n/src/locales/zh-CN/accessibility.json(1 hunks)packages/i18n/src/locales/zh-TW/accessibility.json(1 hunks)packages/i18n/src/store/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (5)
- packages/i18n/src/locales/zh-CN/accessibility.json
- packages/i18n/src/locales/vi-VN/accessibility.json
- packages/i18n/src/locales/ru/accessibility.json
- packages/i18n/src/locales/es/accessibility.json
- packages/i18n/src/locales/ja/accessibility.json
🧰 Additional context used
🪛 Biome (1.9.4)
packages/i18n/src/store/index.ts
[error] 145-145: Avoid the use of spread (...) syntax on accumulators.
Spread syntax should be avoided on accumulators (like those in .reduce) because it causes a time complexity of O(n^2).
Consider methods such as .splice or .push instead.
(lint/performance/noAccumulatingSpread)
🔇 Additional comments (19)
packages/i18n/src/locales/it/accessibility.json (2)
1-27: Validate JSON structure and syntax
The file is well-formed JSON with proper nesting underaria_labels.projects_sidebar, consistent indentation, and no trailing commas. All defined keys should parse correctly.
2-27:Details
✅ Verification successful
Ensure key consistency across all locales
To prevent missing or extra entries, verify that everyaccessibility.jsonin other language folders contains the sameprojects_sidebarkeys. Consider running this check:
🏁 Script executed:
#!/bin/bash # Description: Compare 'projects_sidebar' keys across all accessibility.json locale files find packages/i18n/src/locales -name accessibility.json | \ xargs -n1 jq -r '.aria_labels.projects_sidebar | keys_unsorted[]' | \ sort | uniq -cLength of output: 705
All
projects_sidebarARIA labels are consistent across locales
The verification script shows each of the 19 keys appears in all 19accessibility.jsonfiles—no missing or extra entries detected. Great job keeping these in sync!packages/i18n/src/locales/en/translations.json (1)
2299-2299: No functional changes in translations file
Only a trailing newline was removed; the JSON keys and values remain unchanged.packages/i18n/src/locales/zh-TW/accessibility.json (1)
1-27: Add Traditional Chinese accessibility labels
The new JSON file correctly defines the fullaria_labels.projects_sidebarschema with Traditional Chinese translations, matching the key set used across other locales. The structure is valid and complete.packages/i18n/src/locales/id/accessibility.json (1)
1-27: Add Indonesian accessibility labels
This file introduces the completearia_labels.projects_sidebarentries with appropriate Indonesian translations. The JSON is well-formed and covers all expected keys.packages/i18n/src/locales/de/accessibility.json (1)
1-27: Add German accessibility labels
The new JSON file provides the full set ofaria_labels.projects_sidebarkeys with accurate German translations. The structure aligns with other locale files and is syntactically correct.packages/i18n/src/locales/fr/accessibility.json (1)
1-27: Accessibility locale file is valid and consistent
The JSON structure is correct, the key set matches other locales, and the French translations are well-formed.packages/i18n/src/locales/ua/accessibility.json (1)
1-27: Accessibility locale file is valid and consistent
The JSON is syntactically correct, uses the same keys as other locales, and the Ukrainian translations align semantically.packages/i18n/src/locales/en/accessibility.json (1)
1-27: Accessibility locale file is valid and consistent
New English accessibility strings are correctly formatted, complete, and mirror the key set in other locale files.packages/i18n/src/locales/ro/accessibility.json (1)
1-27: Accessibility locale file is valid and consistent
The Romanian translations use the correct key set and the JSON is well-formed.packages/i18n/src/locales/tr-TR/accessibility.json (1)
1-27: Appropriate and complete Turkish accessibility translations.The JSON file introduces the full set of
aria_labels.projects_sidebarkeys matching other locales, and the structure, key ordering, and syntax are consistent with existing locale files.packages/i18n/src/locales/sk/accessibility.json (1)
1-27: Appropriate and complete Slovak accessibility translations.This JSON mirrors the structure and key set of other
accessibility.jsonlocale files, ensuring consistency across translations. Syntax and formatting are correct.packages/i18n/src/store/index.ts (1)
159-186: Good approach for modular translation management!The implementation correctly supports loading multiple translation files (including accessibility labels) for all languages, which aligns well with the PR's accessibility improvements.
Note: The AI summary incorrectly states that only "tr-TR" uses multiple files, but the code shows all languages now use
importAndMergeFiles.Likely an incorrect or invalid review comment.
packages/i18n/src/locales/cs/accessibility.json (2)
1-3: Validate JSON structure
The JSON is well-formed with correct nesting and no trailing commas.
4-24:Details
✅ Verification successful
Ensure key consistency across locales
Please verify that thearia_labels.projects_sidebarkeys here exactly match those in other language files to prevent missing or extra labels.
🏁 Script executed:
#!/bin/bash # Compare keys between English and Czech accessibility files diff \ <(jq -r '.aria_labels.projects_sidebar|keys|.[]' packages/i18n/src/locales/en/accessibility.json | sort) \ <(jq -r '.aria_labels.projects_sidebar|keys|.[]' packages/i18n/src/locales/cs/accessibility.json | sort)Length of output: 328
🏁 Script executed:
#!/bin/bash # Verify that .aria_labels.projects_sidebar keys match between English and Czech locales python - << 'EOF' import json from pathlib import Path en_path = Path('packages/i18n/src/locales/en/accessibility.json') cs_path = Path('packages/i18n/src/locales/cs/accessibility.json') en = json.loads(en_path.read_text(encoding='utf-8')) cs = json.loads(cs_path.read_text(encoding='utf-8')) en_keys = set(en.get('aria_labels', {}).get('projects_sidebar', {}).keys()) cs_keys = set(cs.get('aria_labels', {}).get('projects_sidebar', {}).keys()) missing = en_keys - cs_keys extra = cs_keys - en_keys if missing: print("Missing in cs:", *sorted(missing)) if extra: print("Extra in cs:", *sorted(extra)) if not missing and not extra: print("OK: keys are consistent across locales.") EOFLength of output: 50
ARIA labels consistency verified:
projects_sidebarkeys match between English and Czech
The keys underaria_labels.projects_sidebarinpackages/i18n/src/locales/en/accessibility.jsonandpackages/i18n/src/locales/cs/accessibility.jsonare identical. No further changes required.packages/i18n/src/locales/ko/accessibility.json (2)
1-27: Valid JSON structure and syntax
The new Korean localization file is well-formed JSON: braces and commas are correctly placed, indentation is consistent, and there are no trailing commas. The top-levelaria_labels.projects_sidebarobject cleanly encapsulates all entries.
1-27:Details
✅ Verification successful
Verify translation key coverage against English locale
To ensure parity with the default (en) accessibility file, run a key‐comparison script. This will catch missing or extra entries in the Korean JSON:
🏁 Script executed:
#!/usr/bin/env bash # Compare ARIA label keys between English and Korean locales EN_KEYS=$(jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/en/accessibility.json | sort) KO_KEYS=$(jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/ko/accessibility.json | sort) diff <(echo "$EN_KEYS") <(echo "$KO_KEYS") \ && echo "✅ Keys match perfectly." \ || (echo "❌ Mismatch detected. Please align the key sets." && exit 1)Length of output: 2066
To get a reliable diff of the key sets, let’s run a Python‐based check instead of shell process substitutions:
🏁 Script executed:
#!/usr/bin/env bash set -e python3 - << 'PY' import json, sys # Load ARIA label keys with open('packages/i18n/src/locales/en/accessibility.json') as f: en_keys = set(json.load(f)['aria_labels']['projects_sidebar'].keys()) with open('packages/i18n/src/locales/ko/accessibility.json') as f: ko_keys = set(json.load(f)['aria_labels']['projects_sidebar'].keys()) # Compute differences missing = en_keys - ko_keys extra = ko_keys - en_keys # Report if not missing and not extra: print("✅ Keys match perfectly.") sys.exit(0) print("❌ Mismatch detected.") if missing: print("\nMissing in KO:") for k in sorted(missing): print(f" - {k}") if extra: print("\nExtra in KO:") for k in sorted(extra): print(f" - {k}") sys.exit(1) PYLength of output: 44
✅ Verified translation key coverage: Korean locale matches English
All ARIA label keys inpackages/i18n/src/locales/ko/accessibility.jsonalign perfectly with the default English file. No missing or extra entries detected.packages/i18n/src/locales/pt-BR/accessibility.json (2)
1-27: Approve new Portuguese accessibility locale file.The JSON is syntactically valid and follows the established key hierarchy under
aria_labels.projects_sidebar. All entries appear appropriately translated and there are no trailing commas or structural issues.
2-27:Details
✅ Verification successful
Verify translation key consistency with the English locale.
To ensure no keys are missing or extra compared to the source English
accessibility.json, run this script to diff the key sets:
🏁 Script executed:
#!/bin/bash # Compare accessibility keys between English and Brazilian Portuguese locales # Locate the English accessibility.json EN_FILE=$(fd --absolute-path 'accessibility.json' packages/i18n/src/locales/en) if [ -z "$EN_FILE" ]; then echo "Error: English accessibility.json not found under packages/i18n/src/locales/en" exit 1 fi # Extract and sort keys jq -r '.aria_labels.projects_sidebar | keys[]' "$EN_FILE" | sort > /tmp/en_keys.txt jq -r '.aria_labels.projects_sidebar | keys[]' packages/i18n/src/locales/pt-BR/accessibility.json | sort > /tmp/pt_keys.txt # Show differences echo "Keys present in English but missing in pt-BR:" comm -23 /tmp/en_keys.txt /tmp/pt_keys.txt echo "Keys present in pt-BR but missing in English:" comm -13 /tmp/en_keys.txt /tmp/pt_keys.txtLength of output: 940
🏁 Script executed:
#!/bin/bash set -e # Locate the English accessibility.json EN_FILE=$(fd --absolute-path 'accessibility.json' packages/i18n/src/locales/en) if [ -z "$EN_FILE" ]; then echo "Error: English accessibility.json not found under packages/i18n/src/locales/en" exit 1 fi # Compare keys via Python python3 - << EOF import json # Load English keys with open("$EN_FILE") as f: en_keys = set(json.load(f)["aria_labels"]["projects_sidebar"].keys()) # Load pt-BR keys with open("packages/i18n/src/locales/pt-BR/accessibility.json") as f: pt_keys = set(json.load(f)["aria_labels"]["projects_sidebar"].keys()) # Report differences print("Keys present in English but missing in pt-BR:") for key in sorted(en_keys - pt_keys): print(" " + key) print("Keys present in pt-BR but missing in English:") for key in sorted(pt_keys - en_keys): print(" " + key) EOFLength of output: 339
All translation keys in
pt-BR/accessibility.jsonmatch the English source.No missing or extra
projects_sidebarkeys were found when diffing againsten/accessibility.json.
JayashTripathy
force-pushed
the
fix/web-accessibility
branch
from
59b332b to
f2c102e
Compare
JayashTripathy
force-pushed
the
fix/web-accessibility
branch
from
f2c102e to
862031c
Compare
.../components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
Outdated
Show resolved
Hide resolved
* chore: add ARIA attributes * chore: add missing translations * chore: add accessibility translations for multiple languages and configured store according to it * chore: refactor translation file handling and introduce TranslationFiles enum * fix: accessibility issues in workspace sidebar --------- Co-authored-by: JayashTripathy <jayashtripathy371@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
4 participants
Description
This PR adds the missing ARIA attributes to the projects sidebar components.
It also includes the following refactoring-
Type of Change
Summary by CodeRabbit