[WEB-4166] chore: projects app sidebar accessibility (#7115)

* 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>

packages/ui/src/avatar/avatar.tsx

@@ -160,7 +160,7 @@ export const Avatar: React.FC<Props> = (props) => {
               color: fallbackTextColor ?? "#ffffff",
             }}
           >
-            {name ? name[0].toUpperCase() : fallbackText ?? "?"}
+            {name?.[0]?.toUpperCase() ?? fallbackText ?? "?"}
           </div>
         )}
       </div>

packages/ui/src/dropdowns/custom-menu.tsx

@@ -14,6 +14,7 @@ import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
 
 const CustomMenu = (props: ICustomMenuDropdownProps) => {
   const {
+    ariaLabel,
     buttonClassName = "",
     customButtonClassName = "",
     customButtonTabIndex = 0,
@@ -75,7 +76,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     e.stopPropagation();
     e.preventDefault();
     isOpen ? closeDropdown() : openDropdown();
-    if (menuButtonOnClick) menuButtonOnClick();
+    menuButtonOnClick?.();
   };
 
   const handleMouseEnter = () => {
@@ -147,6 +148,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                 className={customButtonClassName}
                 tabIndex={customButtonTabIndex}
                 disabled={disabled}
+                aria-label={ariaLabel}
               >
                 {customButton}
               </button>
@@ -164,6 +166,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                       disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
                     } ${buttonClassName}`}
                     tabIndex={customButtonTabIndex}
+                    aria-label={ariaLabel}
                   >
                     <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
                   </button>
@@ -183,6 +186,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     onClick={handleMenuButtonClick}
                     tabIndex={customButtonTabIndex}
                     disabled={disabled}
+                    aria-label={ariaLabel}
                   >
                     {label}
                     {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}

packages/ui/src/dropdowns/helper.tsx

@@ -32,6 +32,7 @@ export interface ICustomMenuDropdownProps extends IDropdownProps {
   closeOnSelect?: boolean;
   portalElement?: Element | null;
   openOnHover?: boolean;
+  ariaLabel?: string;
 }
 
 export interface ICustomSelectProps extends IDropdownProps {