diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.module.scss index 9cb218cf6..c25d08ebb 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.module.scss @@ -2,6 +2,7 @@ .arrowIconButton { padding: 0.75rem 1.25rem 0.75rem var(--item-arrow-pl); + width: 2.25rem; } .arrowIconButtonHidden { visibility: hidden; diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.tsx b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.tsx index 743c24f1c..e1ee61b4c 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.tsx +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.tsx @@ -14,56 +14,61 @@ interface TreeItemTriggerContentProps { isActive: boolean; isOpen: boolean; onToggle?: () => void; - handleToggle: (event: React.MouseEvent) => void; + handleToggle: ( + event: React.MouseEvent, + ) => void; } const TreeItemTriggerContent: FC = (props) => { - const { treeItemTriggerStyles, item, level, isOpen, handleToggle, onToggle } = props; + const { treeItemTriggerStyles, item, level, isOpen, handleToggle, onToggle } = + props; return ( <> - - - + onClick={handleToggle} + aria-label={`${isOpen ? "Hide" : "Show"} ${item.name}'s spaces`} + aria-hidden={!onToggle} + > + {item.items && item.items?.length > 0 && ( + + )} + - + - - {item.name} - - {item.nameRightContent} - {item.rightContent} - {!!item.notificationsAmount && ( - - {item.notificationsAmount} + + {item.name} - )} - + {item.nameRightContent} + {item.rightContent} + {!!item.notificationsAmount && ( + + {item.notificationsAmount} + + )} + ); };