a3a580923c
* 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>
32 lines
1,014 B
TypeScript
32 lines
1,014 B
TypeScript
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
|
|
import { useAppTheme, useCommandPalette } from "@/hooks/store";
|
|
|
|
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",
|
|
{
|
|
"border-[0.5px] border-custom-sidebar-border-300": !sidebarCollapsed,
|
|
}
|
|
)}
|
|
onClick={() => toggleCommandPaletteModal(true)}
|
|
aria-label={t("aria_labels.projects_sidebar.open_command_palette")}
|
|
>
|
|
<Search className="size-4 text-custom-sidebar-text-300" />
|
|
</button>
|
|
);
|
|
});
|