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

web/ce/components/workspace/edition-badge.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import packageJson from "package.json";
-// ui
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { Button, Tooltip } from "@plane/ui";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -9,9 +10,12 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 import { PaidPlanUpgradeModal } from "../license";
 
 export const WorkspaceEditionBadge = observer(() => {
-  const { isMobile } = usePlatformOS();
   // states
   const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
+  // translation
+  const { t } = useTranslation();
+  // platform
+  const { isMobile } = usePlatformOS();
 
   return (
     <>
@@ -25,6 +29,8 @@ export const WorkspaceEditionBadge = observer(() => {
           variant="accent-primary"
           className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
           onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
+          aria-haspopup="dialog"
+          aria-label={t("aria_labels.projects_sidebar.edition_badge")}
         >
           Community
         </Button>

web/ce/components/workspace/sidebar/app-search.tsx

@@ -1,5 +1,7 @@
 import { observer } from "mobx-react";
 import { Search } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -9,9 +11,12 @@ export const AppSearch = observer(() => {
   // store hooks
   const { sidebarCollapsed } = useAppTheme();
   const { toggleCommandPaletteModal } = useCommandPalette();
+  // translation
+  const { t } = useTranslation();
 
   return (
     <button
+      type="button"
       className={cn(
         "flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none",
         {
@@ -19,6 +24,7 @@ export const AppSearch = observer(() => {
         }
       )}
       onClick={() => toggleCommandPaletteModal(true)}
+      aria-label={t("aria_labels.projects_sidebar.open_command_palette")}
     >
       <Search className="size-4 text-custom-sidebar-text-300" />
     </button>

web/ce/components/workspace/sidebar/extended-sidebar-item.tsx

@@ -55,7 +55,7 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
   const sidebarPreference = getNavigationPreferences(workspaceSlug.toString());
   const isPinned = sidebarPreference?.[item.key]?.is_pinned;
 
-  const handleLinkClick = () => toggleExtendedSidebar();
+  const handleLinkClick = () => toggleExtendedSidebar(true);
 
   if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
     return null;

web/ce/components/workspace/sidebar/sidebar-item.tsx

@@ -38,7 +38,7 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
     if (window.innerWidth < 768) {
       toggleSidebar();
     }
-    if (extendedSidebarCollapsed) toggleExtendedSidebar();
+    if (!extendedSidebarCollapsed) toggleExtendedSidebar();
   };
 
   const staticItems = ["home", "inbox", "pi-chat", "projects"];

web/ce/constants/sidebar-favorites.ts

@@ -1,7 +1,7 @@
-import { Briefcase, ContrastIcon, FileText, Layers, LucideIcon } from "lucide-react";
+import { Briefcase, FileText, Layers, LucideIcon } from "lucide-react";
 // plane imports
 import { IFavorite } from "@plane/types";
-import { DiceIcon, FavoriteFolderIcon, ISvgIcons } from "@plane/ui";
+import { ContrastIcon, DiceIcon, FavoriteFolderIcon, ISvgIcons } from "@plane/ui";
 
 export const FAVORITE_ITEM_ICONS: Record<string, React.FC<ISvgIcons> | LucideIcon> = {
   page: FileText,